建站
咨詢
售后
建站咨詢
新聞中心
今天就跟大家聊聊有關(guān)html5 worker中怎樣實(shí)現(xiàn)圖片變換效果的，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
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代碼
代碼如下:
//注意，自己在這里插入一張圖片，否則沒用效果
是執(zhí)行上面的例子的時(shí)候 ，要自己引入jquery包，并且在html頁面上的img標(biāo)簽上放入自己要變換的圖片。然后部署到服務(wù)器，打開頁面，當(dāng)鼠標(biāo)移動(dòng)到圖片的 上面的時(shí)候就會(huì)發(fā)生變換，在這里執(zhí)行變換功能的函數(shù)有worker負(fù)責(zé)，隨意不影響頁面本身的效率，類似于java語言中的多線程。
看完上述內(nèi)容，你們對(duì)html5 worker中怎樣實(shí)現(xiàn)圖片變換效果的有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。
當(dāng)前名稱：html5worker中怎樣實(shí)現(xiàn)圖片變換效果的-創(chuàng)新互聯(lián)
網(wǎng)頁路徑：http://www.dlmjj.cn/article/doojeo.html
