The worker of the js code img. Js
code is as follows:


the onmessage=function (e) {
postMessage (filter (e.d ata))
};
function filter (imgd) {
var. Pix=imgd pixels. The data;
var xcord=imgd. X/1000;
var ycord=imgd. Y/1000;
the for (var I=0, n=pix. Length; I <n; I + 4)={
var grayscale=pix xcord + pix [I] * [I + 1) *. 59 + pix [I + 2) *. 11;
pix [I]=grayscale;//red
pix [I + 1)=grayscale;//green
pix [I + 2)=grayscale;//blue

} imgd [' pixels']. Data=http://www.script-home.com//html5/pix;
return imgd;
}

HTML
code is as follows:


<! DOCTYPE html>
<Html>
<Head>
<Title> Test2. Html
<Meta HTTP - equiv="keywords" content="keyword1, keyword2, keyword3 >"
<Meta HTTP - equiv="description" content="this is my page" >
<Meta HTTP - equiv="content-type" content="text/HTML; charset=utf-8" >
<! - <Link rel="stylesheet" type="text/CSS" href="http://www.script-home.com//html5/styles.css" >- >
<Script type="text/javascript 'SRC=" http://www.script-home.com//js/jquery-1.8.0.min.js "></script>
</head>
<Body>
<MyCanvas canvas id="" width=" 640 "height=" 480 "></canvas>
<Img SRC="http://www.script-home.com//image/psu [4]. JPG" class="onHover" >//note that your insert a picture here, otherwise useless effect
<The script type="text/javascript" >
the function process (img, x, y) {
var canvas=document. The getElementById (" myCanvas ");
var context=canvas. GetContext (" 2 d ");
the context. The drawImage (img, 0, 0);
var pixels=context. The getImageData (0, 0, img width, img, height);
var worker=new worker (" img. Js ");
var obj={
pixels: pixels,
x: x, y:

y}
the worker. The postMessage (obj);
the worker. The onmessage=function (e) {
the if (typeof e.d ata="string" http://www.script-home.com//html5/=={
the console. The log (" worker: "+ e.d ata);
the return;
}
var new_pixels=e.d ata. Pixels;//Pixels from the worker
the context. The putImageData (new_pixels, 0, 0); .
img SRC=http://www.script-home.com//html5/canvas.toDataURL ();//And then to the img

}}
</script>
<The script type="text/javascript" >
$(function () {
$(" onHover ") on (" mouseover ", function () {
var x=this. Width.
var y=this. Height.
the console. The log (" x: "+ x + y:" + y).
the process (this, x, y);
});
})
</script>
</body>
</html>

is to perform the above example, to introduce the jquery package, and on the img tags in HTML page into oneself to transform images. And then deployed to a server, open the page, when the mouse moves to the picture above, transformation will occur in the perform the function of transform function with the worker is in charge here, casual does not affect the efficiency of the page itself, similar to the multithreaded Java language.
# 0 - #


This concludes the body part