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 渐变(Gradients)之CSS3 线性渐变
Jul 08 HTML / CSS
CSS3美化表单控件全集
Jun 29 HTML / CSS
详解纯CSS3制作的20种loading动效
Jul 05 HTML / CSS
利用css3 translate完美实现表头固定效果
Feb 28 HTML / CSS
不同浏览器对CSS3和HTML5的支持状况
Oct 31 HTML / CSS
CSS3 简单又实用的5个属性
Mar 04 HTML / CSS
你不知道的5个HTML5新功能
Jun 28 HTML / CSS
HTML5的结构和语义(5):内嵌媒体
Oct 17 HTML / CSS
用HTML5实现网站在windows8中贴靠的方法
Apr 21 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
Oct 23 HTML / CSS
详解px单位html5响应式方案
Mar 08 HTML / CSS
CSS实现背景图片全屏铺满自适应的3种方式
Jul 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
Zerg建筑一览
2020/03/14 星际争霸
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
详解webpack require.ensure与require AMD的区别
2017/12/13 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
JQuery实现ajax请求的示例和注意事项
2018/12/10 jQuery
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
关于vue属性使用和不使用冒号的区别说明
2020/10/22 Javascript
CentOS安装pillow报错的解决方法
2016/01/27 Python
Java分治归并排序算法实例详解
2017/12/12 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
python线程池threadpool实现篇
2018/04/27 Python
Python使用Pickle库实现读写序列操作示例
2018/06/15 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
python 实现批量替换文本中的某部分内容
2019/12/13 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
最好的意大利皮夹克:D’Arienzo
2018/12/04 全球购物
结婚邀请函范文
2014/01/14 职场文书
财务管理职业生涯规划书
2014/02/26 职场文书
关于学习的演讲稿
2014/05/10 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
2014各大专业毕业生自我评价
2014/09/17 职场文书
六五普法宣传标语
2014/10/06 职场文书
会议通知
2015/04/15 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
《天使的翅膀》读后感3篇
2019/12/20 职场文书
Redis可视化客户端小结
2021/06/10 Redis