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


Posted in HTML / CSS onJune 24, 2013

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语言中的多线程。
HTML / CSS 相关文章推荐
纯CSS3打造属于自己的“小黄人”
Mar 14 HTML / CSS
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
Apr 26 HTML / CSS
详解HTML5 LocalStorage 本地存储
Dec 23 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
Jan 17 HTML / CSS
基于canvas的骨骼动画的示例代码
Jun 12 HTML / CSS
Html5踩坑记之mandMobile使用小记
Apr 02 HTML / CSS
HTML5录音实践总结(Preact)
May 07 HTML / CSS
Html5嵌入钉钉的实现示例
Jun 04 HTML / CSS
浅析HTML5 Landmark
Sep 11 HTML / CSS
css中:last-child不生效的解决方法
Aug 05 HTML / CSS
使用CSS实现百叶窗效果示例代码
May 07 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
Jun 24 #HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
Jun 20 #HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 #HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
Jun 09 #HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
Jun 09 #HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 #HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
Jun 08 #HTML / CSS
You might like
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
php实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
PHP中用hash实现的数组
2011/07/17 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
PHP中实现获取IP和地理位置类分享
2015/02/10 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
PHP封装的HttpClient类用法实例
2015/06/17 PHP
php字符集转换
2017/01/23 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
深入认识javascript中的eval函数
2009/11/02 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
2018/07/28 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
Vue组件间通信 Vuex的用法解析
2019/08/05 Javascript
原生js实现五子棋游戏
2020/05/28 Javascript
[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示
2018/05/25 DOTA
[01:02:30]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
python函数装饰器用法实例详解
2015/06/04 Python
python队列queue模块详解
2018/04/27 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
在 Jupyter 中重新导入特定的 Python 文件(场景分析)
2019/10/27 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
中专自我鉴定范文
2013/10/16 职场文书
2014世界杯球队球队口号
2014/06/05 职场文书
高考升学宴答谢词
2015/01/20 职场文书
酒店人事主管岗位职责
2015/04/11 职场文书
在人间读书笔记
2015/06/30 职场文书
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android