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

风尐商务QQ

风尐商务QQ

2016-02-19 10:36

get新技能是需要付出行动的,即使看得再多也还是要动手试一试。今天图老师小编跟大家分享的是html5 worker 实例(二) 图片变换效果,一起来学习了解下吧!
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
titletest2.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语言中的多线程。
展开更多 50%)
分享

猜你喜欢

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

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

html5 worker 实例(一) 为什么测试不到效果

Web开发
html5 worker 实例(一) 为什么测试不到效果

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

html5 拖拽上传图片实例演示

Web开发
html5 拖拽上传图片实例演示

html5 乒乓球(碰撞检测)实例二

Web开发
html5 乒乓球(碰撞检测)实例二

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

html5 标签

Web开发
html5 标签

html5 Canvas绘制线条 closePath()实例代码

Web开发
html5 Canvas绘制线条 closePath()实例代码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

HTML5 Canvas——用路径描画线条实例介绍

HTML5 Canvas——用路径描画线条实例介绍

mysql删除表中某一字段重复的记录

mysql删除表中某一字段重复的记录
下拉加载更多内容 ↓