コメント:次の例を実行するときは、JQueryパッケージを自分で紹介し、HTMLページのIMGタグに変更する画像を配置する必要があります。特定の実装手順は次のとおりです。興味のある友達はそれを参照できます。私はそれが誰にでも役立つことを願っています。
労働者のJSコードIMG.JSonmessage = function(e){
ポストメサージ(フィルター(e.data))
};
関数フィルター(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; // 赤
pix [i + 1] = grayscale; // 緑
pix [i + 2] = grayscale; // 青
}
imgd ['pixels']。data = pix;
IMGDを返します。
}
HTMLコード
<!doctype html>
<html>
<head>
<title> test2.html </title>
<meta http-equiv = "keywords" content = "keyword2、keyword3">
<メタhttp-equiv = "description" content = "これは私のページ">
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<! - <link type = "text/css" href = "./ styles.css"> - >
<script type = "text/javascript" src = "../ js/jquery-1.8.0.min.js"> </script>
</head>
<body>
<canvas> </canvas>
<img src = "../ image/psu [4] .jpg"> //ここに写真を挿入することに注意してください。そうでなければ役に立たないことに注意してください。
<script type = "text/javascript">
関数プロセス(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 = {
ピクセル:ピクセル、
x:x、
y:y
}
worker.postmessage(obj);
worker.onmessage = function(e){
if(typeof e.data === "string"){
console.log( "worker:" + e.data);
戻る;
}
var new_pixels = e.data.pixels; //ワーカーからのピクセル
context.putimagedata(new_pixels、0、0);
img.src = canvas.todataurl(); //そしてIMGに
}
}
</script>
<script type = "text/javascript">
$(function(){
$( "。onhover")。
var x = this.width;
var y = this.height;
console.log( "x:" + x + "y:" + y);
プロセス(this、x、y);
});
})
</script>
</body>
</html>
上記の例を実行するときは、jQueryパッケージを自分で紹介し、HTMLページのIMGタグに変更する画像を配置する必要があります。次に、サーバーに展開し、ページを開きます。マウスが写真の上部に移動すると、変換が発生します。ワーカーは、ここで変換関数を実行する関数に責任があり、Java言語でのマルチスレッドと同様に、自由にページ自体の効率に影響しません。