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使用技巧5个
Apr 02 HTML / CSS
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
May 07 HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
使用CSS3来绘制一个月食图案
Jul 18 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
May 03 HTML / CSS
CSS3 @media的基本用法总结
Sep 10 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
html5教程制作简单画板代码分享
Dec 04 HTML / CSS
html5使用canvas画空心圆与实心圆
Dec 15 HTML / CSS
使用canvas压缩图片上传的方法示例
Feb 07 HTML / CSS
详解HTML5布局和HTML5标签
Oct 26 HTML / CSS
HTML中的表单Form实现居中效果
May 25 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
php 随机记录mysql rand()造成CPU 100%的解决办法
2010/05/18 PHP
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
php中模拟POST传递数据的两种方法分享
2011/09/16 PHP
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
JavaScript 事件对象的实现
2009/07/13 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
javascript每日必学之多态
2016/02/23 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
vue项目中常见问题及解决方案(推荐)
2019/10/21 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
2020/10/01 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
JS实现鼠标移动拖尾
2020/12/27 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
深入解析Python中函数的参数与作用域
2016/03/20 Python
浅析Python中yield关键词的作用与用法
2016/11/29 Python
python七夕浪漫表白源码
2019/04/05 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
Python-jenkins模块获取jobs的执行状态操作
2020/05/12 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
机电工程专业应届生求职信
2013/10/03 职场文书
企业活动策划方案
2014/06/02 职场文书
农村党建工作汇报材料
2014/10/27 职场文书
2015年志愿者服务工作总结
2015/04/20 职场文书
2015年财政所工作总结
2015/04/25 职场文书
解除处分决定书
2015/06/25 职场文书
js实现模拟购物商城案例
2021/05/18 Javascript
FFmpeg视频处理入门教程(新手必看)
2022/01/22 杂记