html5 worker example (2) image transformation effect_html5 tutorial skills

worker’s js code img.js

Copy the code

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 code

Copy code

The code is as follows:

//Note, insert a picture here, otherwise it will have no effect

is when executing the above example, You need to introduce the jquery package yourself, and put the image you want to transform on the img tag on the html page. Then deploy it to the server, open the page, and when the mouse moves over the picture, the transformation will occur. The function that performs the transformation function here is responsible for the worker, which does not affect the efficiency of the page itself, similar to multi-threading in the Java language.