ความคิดเห็น: เมื่อดำเนินการตัวอย่างต่อไปนี้คุณควรแนะนำแพ็คเกจ jQuery ด้วยตัวคุณเองและใส่ภาพที่คุณต้องการเปลี่ยนบนแท็ก IMG ในหน้า HTML ขั้นตอนการใช้งานเฉพาะมีดังนี้ เพื่อนที่สนใจสามารถอ้างถึงได้ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน
รหัส js ของคนงาน img.jsonMessage = function (e) {
postmessage (ตัวกรอง (e.data))
-
ตัวกรองฟังก์ชั่น (IMGD) {
var pix = imgd.pixels.data;
var xcord = imgd.x / 1000;
var ycord = imgd.y / 1000;
สำหรับ (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] = สีเทา; // สีเขียว
PIX [i + 2] = สีเทา; // สีฟ้า
-
IMGD ['Pixels']. data = pix;
กลับ IMGD;
-
รหัส HTML
<! doctype html>
<html>
<head>
<title> test2.html </title>
<meta http-equiv = "คำหลัก" content = "keyword1, keyword2, keyword3">
<meta http-equiv = "คำอธิบาย" 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> </sanvas>
<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 = คนงานใหม่ ("img.js");
var obj = {
พิกเซล: พิกเซล
x: x,
y: y
-
Worker.postMessage (OBJ);
Worker.onMessage = function (e) {
if (typeof e.data === "String") {
console.log ("คนงาน:" + 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"). on ("mouseover", function () {
var x = this.width;
var y = this.height;
console.log ("x:" + x + "y:" + y);
กระบวนการ (นี่, x, y);
-
-
</script>
</body>
</html>
เมื่อดำเนินการตัวอย่างข้างต้นคุณต้องแนะนำแพ็คเกจ jQuery ด้วยตัวคุณเองและใส่ภาพที่คุณต้องการเปลี่ยนบนแท็ก IMG ในหน้า HTML จากนั้นปรับใช้กับเซิร์ฟเวอร์และเปิดหน้า เมื่อเมาส์เคลื่อนไปที่ด้านบนของภาพการเปลี่ยนแปลงจะเกิดขึ้น คนงานมีหน้าที่รับผิดชอบฟังก์ชั่นที่ทำหน้าที่การแปลงที่นี่และจะไม่ส่งผลกระทบต่อประสิทธิภาพของหน้าเว็บเองที่จะคล้ายกับมัลติเธรดในภาษา Java