html5 worker 實例(二) 圖片變換效果_html5教學技巧

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 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程式碼

複製程式碼複製程式碼

複製程式碼



複製碼>












//注意，自己在這裡插入一張圖片，否則沒用效果

})
是執行上面的例子的時候，要自己引入jquery包，並且在html頁面上的img標籤上放入自己要變換的圖片。然後部署到伺服器，開啟頁面，當滑鼠移動到圖片的 上面的時候就會發生變換，在這裡執行變換功能的函數有worker負責，隨意不影響頁面本身的效率，類似於java語言中的多執行緒。