worker’s js code img.js
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 test2.html
//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.