是执行下面的例子的时候,要自己引入jquery包,并且在html页面上的img标签上放入自己要变换的图片,具体实现步骤如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助
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语言中的多线程。
最新资讯
互联网公司组织构架大调整:跟着阿里抗周期

互联网公司组织构架大

毫无疑问,大家所处的环境已经发生了根本性的变化。
传小扎曾向微软高管寻求建议:差点威胁桑德伯格地位

传小扎曾向微软高管寻

扎克联系微软总裁兼首席法务官史密斯并非出于“挖墙脚
直击|51talk:未来5年为10万菲律宾外教提供就业机会

直击|51talk:未来5年为

51Talk 在菲律宾首都马尼拉召开 2019 菲律宾战略年发
彭博:腾讯音乐指导发售价在招股区间中位数附近

彭博:腾讯音乐指导发售

据彭博,腾讯音乐指导发售价在招股区间中位数附近。
高通苹果专利之争:谁都有软肋

高通苹果专利之争:谁都

12月10日,高通对外宣布,中国福建省福州中级人民法(tian)院(ping)授予
亚马逊加速推进自研芯片 英特尔领先地位岌岌可危

亚马逊加速推进自研芯

作为全球最大的在线零售商和最大的云计算公司,亚马逊正
最新文章
html5 canvas-1.canvas介绍(hello canvas)

html5 canvas-1.canva

大家都知道,目前并不是所有的浏览器中支持html5,就算是
canvas烟花特效锦集

canvas烟花特效锦集

这篇文章主要介绍了canvas烟花特效锦集,小编觉得挺不错
使用Html5、CSS实现文字阴影效果

使用Html5、CSS实现文

这篇文章主要介绍了使用Html5、CSS实现文字阴影效果的
html5 canvas绘制放射性渐变色效果

html5 canvas绘制放射

这篇文章主要介绍了html5 canvas绘制放射性渐变色效果
canvas基础之图形验证码的示例

canvas基础之图形验证

这篇文章主要介绍了canvas基础之图形验证码的示例的相
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能

利用HTML5+css3+jquer

这篇文章主要介绍了利用HTML5+css3+jquery+weui实现仿