Home > Web Front-end > H5 Tutorial > html5 worker example (2) image transformation effect_html5 tutorial skills

html5 worker example (2) image transformation effect_html5 tutorial skills

WBOY
Release: 2016-05-16 15:49:25
Original
1485 people have browsed it
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:




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.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template