当前位置:Gxlcms > html代码 > html5worker实例(二)图片变换效果

html5worker实例(二)图片变换效果

时间:2021-07-01 10:21:17 帮助过:40人阅读

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语言中的多线程。

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

人气教程排行