Comments: When executing the following example, You need to introduce the jquery package yourself and put the converted image on the img tag on the html page. The specific implementation steps are as follows, if you are interested, please refer to the following:Worker js Code img. js
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
The Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Title> test2.html </title>
<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 = "./styles.css"> -->
<Script type = "text/javascript" src = ".../js/jquery-1.8.0.min.js"> </script>
</Head>
<Body>
<Canvas id = "myCanvas" width = "640" height = "480"> </canvas>
// note that you can insert an image here, otherwise it will not work.
<Script type = "text/javascript">
Function process (img, x, y ){
Var canvas = document. getElementById ("myCanvas ");
Var context = canvas. getContext ('2d ');
Context. drawImage (img, 0, 0 );
Var pixels = context. getImageData (0, 0, img. width, img. 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
}
}
</Script>
<Script type = "text/javascript">
$ (Function (){
$ (". OnHover"). on ("mouseover", function (){
Var x = this. width;
Var y = this. height;
Console. log ("X:" + x + "Y:" + y );
Process (this, x, y );
});
})
</Script>
</Body>
</Html>
When running the preceding example, You need to introduce the jquery package and put the converted image on the img tag on the html page. Then deploy it on the server and open the page. When you move the mouse over the image, the conversion will occur. Here, worker is responsible for the function that executes the conversion function, without affecting the page efficiency at will, similar to multithreading in java.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
