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://blogs.msdn.com/b/ie/archive/2011/04/26/understanding-differences-in-hardware-acceleration-through-paintball.aspx

http://msdn.microsoft.com/en-us/hh562071.aspx

以上两种方式都是基于HTML5的Canvas的2D方式,其实更直接借助GPU的应该是Canvas的WebGL技术,下篇我们将介绍更好玩的基于WebGL的Shading Language的像素操作方式,当然使用HightopoHT for Web不需要关心这些底层技术细节,HT会自动选择最合适的染色机制,因为有些终端浏览器不支持globalCompositeOperation的功能,有些不支持WebGL的硬件加速,因此自动选择最合适的渲染机制也是需要底层框架足够智能化的。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端那些事

过渡与动画 - 逐帧动画&steps调速函数

写在前面 上一篇中我们熟悉五种内置的缓动曲线和(三次)贝塞尔曲线,并且基于此完成了缓动效果. 但是如果我们想要实现逐帧动画,基于贝塞尔曲线的调速函数就显得有些无...

24710
来自专栏儿童编程

儿童编程Scratch之“画笔”基础功能学习总结

Scratch中“画笔”功能能够让使用者模拟画笔在舞台上创作,合理运用能够给作品带来极大的趣味性。

1412
来自专栏木子昭的博客

创意终端影集左侧效果图:

左侧效果图: ? ? ? ? ? 实现思路: 通过python的PIL库,将彩色转黑白(256种灰度),创建字符集,建立字符集与灰度的映射 ? 动图 把照片裁成...

3397
来自专栏大数据风控

R文本挖掘-中文分词Rwordseg

我们的数据分析工作,不仅仅有对数据的分析,还有对文字资料整合的统计分析。在进行词频统计之前,有一项必须要做的工作就是中文的分词。 语料库的处理 语料库 语料...

2326
来自专栏大数据挖掘DT机器学习

中文分词实践(基于R语言)

背景:分析用户在世界杯期间讨论最多的话题。 思路:把用户关于世界杯的帖子拉下来,然后做中文分词+词频统计,最后将统计结果简单做个标签云. 后续:中文分词是中文...

3436
来自专栏我的博客

安卓开发之dip,dp,px,sp

1、dip device independent pixels(设备独立像素). 不同设备不同的显示效果,这个和设备硬件有关, 一般我们为了支持WVGA、H...

2676
来自专栏九彩拼盘的叨叨叨

Web动画性能介绍

帧率(FPS):描述每秒播放的帧数,单位为 Hz 或者 frame/s (帧/秒)。

893
来自专栏开源项目

Git 项目推荐 | 图片验证码生成库

一个简单的Go语言实现的验证码。 图片实例 ? ? ? ? 简介 基于Golang实现的图片验证码生成库,可以实现随机字母个数,随机直线,随机噪点等。可以设置...

3516
来自专栏iOS开发攻城狮的集散地

水波进度、加载动画、文字进度

1733
来自专栏大数据

前端女程序员教你,图片加载时,使用 SVG 作为图片 placehold

前言:使用 SVG 作为占位符不但可以减少数据大小还可以达到不错的显示效果。 不同类型的图片 placehold ? 请点击此处输入图片描述 对于图片占位符,通...

2009

扫码关注云+社区