コメント：次の例を実行するときは、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言語でのマルチスレッドと同様に、自由にページ自体の効率に影響しません。