Komentar: Saat menjalankan contoh berikut, Anda harus memperkenalkan paket jQuery sendiri dan meletakkan gambar yang ingin Anda ubah pada tag IMG pada halaman HTML. Langkah implementasi spesifik adalah sebagai berikut. Teman yang tertarik dapat merujuknya. Saya harap ini akan membantu semua orang.
Kode JS Pekerja IMG.JSonMessage = function (e) {
postmessage (filter (e.data))
};
Filter fungsi (imgd) {
var pix = imgd.pixels.data;
var xcord = imgd.x / 1000;
var ycord = imgd.y / 1000;
untuk (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; // merah
pix [i + 1] = grayscale; // hijau
pix [i + 2] = grayscale; // biru
}
imgd ['piksel']. Data = pix;
kembalikan imgd;
}
Kode HTML
<! Doctype html>
<Html>
<head>
<title> test2.html </title>
<meta http-equiv = "kata kunci" content = "kata kunci1, kata kunci2, kata kunci3">
<meta http-equiv = "description" content = "This is my Page">
<meta http-equiv = "konten tipe" content = "text/html; charset = utf-8">
<!-<link type = "text/css" href = "./ styles.css">->
<type skrip = "Text/JavaScript" src = "../ js/jQuery-1.8.0.min.js"> </script>
</head>
<body>
<Canvas> </an Canvas>
<img src = "../ gambar/psu [4] .jpg"> // Perhatikan bahwa Anda memasukkan gambar di sini, jika tidak, itu tidak akan berguna.
<type skrip = "Teks/JavaScript">
proses fungsi (img, x, y) {
var canvas = document.geteLementById ("myCanvas");
var context = canvas.getContext ('2d');
context.drawimage (img, 0, 0);
var piksel = context.getImagedata (0,0, img.width, img.height);
var pekerja = pekerja baru ("img.js");
var obj = {
piksel: piksel,
x: x,
Y y
}
Worker.PostMessage (OBJ);
worker.onMessage = function (e) {
if (typeof e.data === "string") {
console.log ("pekerja:" + e.data);
kembali;
}
var new_pixels = e.data.pixels; // piksel dari pekerja
context.putImagedata (new_pixels, 0, 0);
img.src = canvas.todataurl (); // dan kemudian ke IMG
}
}
</script>
<type skrip = "Teks/JavaScript">
$ (function () {
$ (". OnHover"). on ("mouseover", function () {
var x = this.width;
var y = this.height;
console.log ("x:" + x + "y:" + y);
proses (ini, x, y);
});
})
</script>
</body>
</html>
Saat menjalankan contoh di atas, Anda perlu memperkenalkan paket jQuery sendiri dan meletakkan gambar yang ingin Anda ubah pada tag IMG pada halaman HTML. Kemudian berikan ke server dan buka halaman. Ketika mouse bergerak ke bagian atas gambar, transformasi akan terjadi. Pekerja bertanggung jawab atas fungsi yang melakukan fungsi transformasi di sini, dan itu tidak akan mempengaruhi efisiensi halaman itu sendiri sesuka hati, mirip dengan multi-threading dalam bahasa Java.