首页 > web前端 > html教程 > html5 worker 实例(二) 图片变换效果

html5 worker 实例(二) 图片变换效果

黄舟
发布: 2016-12-20 14:59:16
原创
1334 人浏览过

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[&#39;pixels&#39;].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(&#39;2d&#39;); 
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语言中的多线程。

 以上就是html5 worker 实例(二) 图片变换效果的内容,更多相关内容请关注PHP中文网(m.sbmmt.com)! 


相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板