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利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 HTML / CSS
css3实现多个元素依次显示效果
Dec 12 HTML / CSS
html5视频播放_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
Feb 07 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
Feb 14 HTML / CSS
使用phonegap克隆和删除联系人的实现方法
Mar 31 HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
Mar 01 HTML / CSS
移动端Html5页面生成图片解决方案
Aug 07 HTML / CSS
HTML5中的网络存储实现方式
Apr 28 HTML / CSS
html5小程序飞入购物车(抛物线绘制运动轨迹点)
Oct 19 HTML / CSS
CSS3鼠标悬浮过渡缩放效果
Apr 17 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
层叠菜单的动态生成
2006/10/09 PHP
php学习之简单计算器实现代码
2011/06/09 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
php计算给定日期所在周的开始日期和结束日期示例
2017/02/06 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
PHP使用Nginx实现反向代理
2017/09/20 PHP
PHP实现的解汉诺塔问题算法示例
2018/08/06 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
JavaScript版TAB选项卡效果实例
2013/08/16 Javascript
jQuery获得内容和属性示例代码
2014/01/16 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
详解vue-validator(vue验证器)
2017/01/16 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
2017/07/06 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
Python编程中NotImplementedError的使用方法
2018/04/21 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
工程地质勘察专业大学生求职信
2013/10/13 职场文书
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
小学生作文评语
2014/04/18 职场文书
安全生产月演讲稿
2014/05/09 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
计划生育目标责任书
2015/05/09 职场文书
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript
详解PyTorch模型保存与加载
2022/04/28 Python
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技