HT for Web基于HTML5的图像操作(二)
上篇介绍了HT for Web采用HTML5 Canvas的getImageData和setImageData函数,通过颜色乘积实现的染色效果,本文将再次介绍另一种更为高效的实现方式,当然要实现的功能效果是完全一样的。这次我们依然基于HTML5技术,但采用Canvas的globalCompositeOperation属性进行各种blending效果:
各种globalCompositeOperation效果可参考https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing 的说明,我们采用“multiply”和“destination-atop”这两种blending效果,通过以下三个步骤实现:
1、先以染色颜色填充图片大小的矩形区域
2、采用“multiply”进行drawImage的绘制,达到以下效果
3、最后一步采用“destination-atop”的globalCompositeOperation方式,再次drawImage,这次绘制效果将会抠出图片像素区域,剔除非图片部分,最终达到我们所要的染色效果图片:
所有代码如下
function createColorImage2(image, color) {
var width = image.width;
var height = image.height;
var canvas = document.createElement('canvas');
var context = canvas.getContext( "2d" );
canvas.width = width;
canvas.height = height;
context.fillStyle = color;
context.fillRect(0, 0, width, height);
context.globalCompositeOperation = "multiply";
context.drawImage(image, 0, 0, width, height);
context.globalCompositeOperation = "destination-atop";
context.drawImage(image, 0, 0, width, height);
return canvas;
};
至此我们有两种截然不同的绘制方式,两者的代码量差不多,该选择谁呢?让我们测试下两种实现方式的性能:
time = new Date().getTime();
for(var i=0; i<100; i++){
createColorImage1(image, 'red');
}
console.log(new Date().getTime() - time); time = new Date().getTime();
for(var i=0; i<100; i++){
createColorImage2(image, 'red');
}
console.log(new Date().getTime() - time);
我在mac air的chrome浏览器下测试了以上代码,createColorImage1需要1630毫秒,createColorImage2需要29毫秒,两者相差56倍,也就是说采用globalCompositeOperation虽然进行了两次drawImage,但性能依然远高于通过getImageData逐个设置像素值的方式。
造成这种巨大差距的根本原因在于createColorImage1的方式完全基于CPU运算,js本就单线程,且密集数值运算也不是js的强项,而采用globalCompositeOperation的渲染方式,浏览器底层完全可以采用GPU等硬件加速的方式达到更加的性能,因此两钟方式性能差异几十倍也不足为奇了,有兴趣可参考微软的几篇关于浏览器Canvas硬件加速相关的文章:
http://msdn.microsoft.com/en-us/hh562071.aspx
以上两种方式都是基于HTML5的Canvas的2D方式,其实更直接借助GPU的应该是Canvas的WebGL技术,下篇我们将介绍更好玩的基于WebGL的Shading Language的像素操作方式,当然使用Hightopo的HT for Web不需要关心这些底层技术细节,HT会自动选择最合适的染色机制,因为有些终端浏览器不支持globalCompositeOperation的功能,有些不支持WebGL的硬件加速,因此自动选择最合适的渲染机制也是需要底层框架足够智能化的。
HT for Web基于HTML5的图像操作(二)的更多相关文章
- HT for Web基于HTML5的图像操作(三)
上篇采用了HTML5的Canvas的globalCompositeOperation属性达到了染色效果,其实CSS也提供了一些常规图像变化的设置参数,关于CSS的过滤器Filter设置可参考 http ...
- HT for Web基于HTML5的图像操作(一)
HT for Web独创的矢量图片设计架构,使其具有强大丰富的动态图形呈现能力,但从最近知乎热议的“Adobe Photoshop 是否已经过时?”的话题,大家能体会到很多情况下实际项目不可能完全采用 ...
- HT for Web的HTML5树组件延迟加载技术实现
HT for Web的HTML5树组件有延迟加载的功能,这个功能对于那些需要从服务器读取具有层级依赖关系数据时非常有用,需要获取数据的时候再向服务器发起请求,这样可减轻服务器压力,同时也减少了浏览器的 ...
- 扩展HT for Web之HTML5表格组件的Renderer和Editor
在HT for Web提供了一下几种常用的Editor,分别是: slider:拉条 color picker:颜色选择器 enum:枚举类型 boolean:真假编辑器 string:普通的文本编辑 ...
- 基于HT for Web矢量实现HTML5文件上传进度条
在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...
- 基于HTML5的WebGL电信网管3D机房监控应用
先上段视频,不是在玩游戏哦,是规规矩矩的电信网管企业应用,嗯,全键盘的漫游3D机房: http://www.hightopo.com/guide/guide/core/3d/examples/exam ...
- 基于HTML5的电信网管3D机房监控应用
先上段视频,不是在玩游戏哦,是规规矩矩的电信网管企业应用,嗯,全键盘的漫游3D机房: 随着PC端支持HTML5浏览器的普及,加上主流移动终端Android和iOS都已支持HTML5技术,新一代的电信网 ...
- 基于HTML5的WebGL设计汉诺塔3D游戏
在这里我们将构造一个基于HT for Web的HTML5+JavaScript来实现汉诺塔游戏. http://hightopo.com/demo/hanoi_20151106/index.html ...
- HT for Web 3D游戏设计设计--汉诺塔(Towers of Hanoi)
在这里我们将构造一个基于HT for Web的HTML5+JavaScript来实现汉诺塔游戏. 汉诺塔的游戏规则及递归算法分析请参考http://en.wikipedia.org/wiki/Towe ...
随机推荐
- 蛙蛙推荐:AngularJS学习笔记
为了降低前端代码的数量,提高可维护性,可测试性,学习了下AngularJS,正在准备投入项目开发中. AngularJS的概念比较多,如果面向对象方面的书理解的不透的话学习起来有些费劲,它的官方有个快 ...
- (function(){...}())与(function(){...})()
(function(){ ...... }()) 或 (function(){ ...... })() 匿名函数自调用,也就是说,定义一个匿名函数 ...
- Quartz.net2.2初体验
简介:Quartz.net是一个开源的作用调度框架,非常强大,能够通过简单的配置帮助我们定时具体的操作.相对于我们用的线程里面while(true)然后sleep来执行某个操作,应该算的上是高端,大气 ...
- js 数组遍历for..in弊端
//for..in在数组中的弊端 原则上数组Array对象是不能操作的,但是有些程序员开始不注意把Array的原型链上添加了方法就会出现意想不到的bug //例如 ,,]; Array.prototy ...
- 避开WebForm天坑,拥抱ASP.Net MVC吧
有鹏友在如鹏网的QQ群中提了一个问题: 请问,在ASP.Net中如何隐藏一个MenuItem,我想根据不同的权限,对功能菜单进行隐藏,用style不行. 如果要仅仅解答这个问题,很好解答,答案很简单: ...
- 004. Asp.Net Routing与MVC 之二: 请求如何激活Controller和Action
上篇讲到 请求到达 MvcRouteHandler ,并且透过 IRouteHandler.GetHttpHandler 获取到了真正的处理程序 MvcHandler 这次我们看看,MvcHandle ...
- Oracle 权限(grant、revoke)
200 ? "200px" : this.width)!important;} --> 数据库版本:11GR2 一.介绍 在oracle中没有其他数据库系统中的数据库的概念, ...
- java.sql.SQLException: JZ00L
出现, java.sql.SQLException: JZ00L: 登录失败.检查与此异常现象有关的 SQL 警告以获得失败原因. at com.sybase.jdbc3.jdbc.ErrorMess ...
- Java-继承,多态练习0922-03
编写一个Java应用程序,该程序包括3个类:Monkey类.People类和主类 E.要求: (1) Monkey类中有个构造方法:Monkey (String s),并且有个public void ...
- lua的table表处理 及注意事项
lua,一款很轻量级很nice很强大的脚本语言,做为lua中使用最为频繁的table表,在使用之时还是有颇多的好处与坑的: 下面是大牛 云风的一片关于lua table的blog,可使得对lua ta ...