Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about how to achieve the effect of picture transformation in html5 worker, many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

Js code img.js for worker

The code is as follows:

Onmessage = function (e) {

PostMessage (filter (e.data))

}

Function filter (imgd) {

Var pix = imgd.pixels.data

Var xcord = imgd.x / 1000

Var ycord = imgd.y / 1000

For (var I = 0, n = pix.length; I

< n; i += 4) { var grayscale = pix[i] * xcord + pix[i + 1] * .59 + pix[i + 2] * .11; pix[i] = grayscale; // red pix[i + 1] = grayscale; // green pix[i + 2] = grayscale; // blue } imgd['pixels'].data = pix; return imgd; } html代码 代码如下: test2.html

/ / Note: insert a picture here by yourself, otherwise it will be useless

Function process (img,x,y) {

Var canvas = document.getElementById ("myCanvas")

Var context = canvas.getContext ('2d')

Context.drawImage (img, 0,0)

Var pixels = context.getImageData (0re0dir img.widthjimg.height)

Var worker = new Worker ("img.js")

Var obj = {

Pixels: pixels

X:x

Y:y

}

Worker.postMessage (obj)

Worker.onmessage = function (e) {

If (typeof e.data = = "string") {

Console.log ("Worker:" + e.data)

Return

}

Var new_pixels = e.data.pixels; / / Pixels from worker

Context.putImageData (new_pixels, 0,0)

Img.src = canvas.toDataURL (); / / And then to the img

}

}

$(function () {)

$(".onHover") .on ("mouseover", function () {

Var x = this.width

Var y = this.height

Console.log ("X:" + x + "Y:" + y)

Process (this, x, y)

});

})

When executing the above example, introduce the jquery package yourself and put the image you want to change on the img tag on the html page. Then deploy to the server, open the page, when the mouse moves over the picture, it will change, where the function to perform the transformation function is responsible for worker, at will does not affect the efficiency of the page itself, similar to the multi-thread in the java language.

After reading the above, do you have any further understanding of how to achieve the effect of picture transformation in html5 worker? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.