<!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语言中的多线程。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！
点击进行留言回复
我要评论
网友评论