worker的js代碼img.JS
復制代碼代碼如下:
onmessage = function(e) {
postMessage(filter(e.data))
};
function filter(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; // red
pix[i + 1] = grayscale; // green
pix[i + 2] = grayscale; // blue
}
imgd['pixels'].data = pix;
return imgd;
}
Html代碼
復制代碼代碼如下:
<!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" class="onHover"> //注意，自己在這裡插入一張圖片，否則沒用效果
<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>
是執行上面的例子的時候 ，要自己引入jquery包，並且在Html頁面上的img標簽上放入自己要變換的圖片。然後部署到服務器，打開頁面，當鼠標移動到圖片的 上面的時候就會發生變換，在這裡執行變換功能的函數有worker負責，隨意不影響頁面本身的效率，類似於Java語言中的多線程。