復制代碼代碼如下: !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 img src="../image/psu[4].jpg" //注意，自己在這里插入一張圖片，否則沒用效果 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
