Home » html5 » HT for Web基于HTML5的图像操作(二)

上篇介绍了HT for Web采用HTML5 Canvas的getImageData和setImageData函数,通过颜色乘积实现的染色效果,本文将再次介绍另一种更为高效的实现方式,当然要实现的功能效果是完全一样的。这次我们依然基于HTML5技术,但采用Canvas的globalCompositeOperation属性进行各种blending效果:

Screen Shot 2014-11-22 at 9.42.52 PM

各种globalCompositeOperation效果可参考https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing 的说明,我们采用“multiply”和“destination-atop”这两种blending效果,通过以下三个步骤实现:

1、先以染色颜色填充图片大小的矩形区域

2、采用“multiply”进行drawImage的绘制,达到以下效果

Screen Shot 2014-11-22 at 9.50.47 PM

 

3、最后一步采用“destination-atop”的globalCompositeOperation方式,再次drawImage,这次绘制效果将会抠出图片像素区域,剔除非图片部分,最终达到我们所要的染色效果图片:

Screen Shot 2014-11-22 at 9.54.36 PM

所有代码如下

	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的硬件加速,因此自动选择最合适的渲染机制也是需要底层框架足够智能化的。

comments

  1. HT for Web基于HTML5的图像操作(三) |说道:

    […] 上篇采用了HTML5的Canvas的globalCompositeOperation属性达到了染色效果,其实CSS也提供了一些常规图像变化的设置参数,关于CSS的过滤器Filter设置可参考 http://www.html5rocks.com/en/tutorials/filters/understanding-css/,CSS的设置的确很方便,不需要我们了解底层实现逻辑,仅需要提供简单的设置参数值即可,但这样的方式毕竟无法达到随心所欲变化的效果,这有点想OpenGL早期只能通过Fixed Function Pipeline进行开发,和如今采用Shading Language可实现丰富多彩变化的质变,因此这篇我们将采用WebGL的SL代码方式折腾点更好玩的效果。 […]

  2. HTforWeb基于HTML5的图像操作(三)-ASP.NET 网站设计说道:

    […] 上篇采用了HTML5的Canvas的globalCompositeOperation属性达到了染色效果,其实CSS也提供了一些常规图像变化的设置参数,关于CSS的过滤器Filter设置可参考 http://www.html5rocks.com/en/tutorials/filters/understanding-css/,CSS的设置的确很方便,不需要我们了解底层实现逻辑,仅需要提供简单的设置参数值即可,但这样的方式毕竟无法达到随心所欲变化的效果,这有点想OpenGL早期只能通过Fixed Function Pipeline进行开发,和如今采用Shading Language可实现丰富多彩变化的质变,因此这篇我们将采用WebGL的SL代码方式折腾点更好玩的效果。 […]

  3. HTforWeb基于HTML5的图像操作(三) – ASP.NET 网站设计说道:

    […] 上篇采用了HTML5的Canvas的globalCompositeOperation属性达到了染色效果,其实CSS也提供了一些常规图像变化的设置参数,关于CSS的过滤器Filter设置可参考 http://www.html5rocks.com/en/tutorials/filters/understanding-css/,CSS的设置的确很方便,不需要我们了解底层实现逻辑,仅需要提供简单的设置参数值即可,但这样的方式毕竟无法达到随心所欲变化的效果,这有点想OpenGL早期只能通过Fixed Function Pipeline进行开发,和如今采用Shading Language可实现丰富多彩变化的质变,因此这篇我们将采用WebGL的SL代码方式折腾点更好玩的效果。 […]

  4. HT for Web基於HTML5的圖像操作(三) | 程序員的後花園说道:

    […] 上篇采用瞭HTML5的Canvas的globalCompositeOperation屬性達到瞭染色效果,其實CSS也提供瞭一些常規圖像變化的設置參數,關於CSS的過濾器Filter設置可參考 http://www.html5rocks.com/en/tutorials/filters/understanding-css/,CSS的設置的確很方便,不需要我們瞭解底層實現邏輯,僅需要提供簡單的設置參數值即可,但這樣的方式畢竟無法達到隨心所欲變化的效果,這有點想OpenGL早期隻能通過Fixed Function Pipeline進行開發,和如今采用Shading Language可實現豐富多彩變化的質變,因此這篇我們將采用WebGL的SL代碼方式折騰點更好玩的效果。 […]

  5. HT for Web基於HTML5的影象操作(三) | 程式前沿说道:

    […] 上篇採用了HTML5的Canvas的globalCompositeOperation屬性達到了染色效果,其實CSS也提供了一些常規影象變化的設定引數,關於CSS的過濾器Filter設定可參考 http://www.html5rocks.com/en/tutorials/filters/understanding-css/,CSS的設定的確很方便,不需要我們瞭解底層實現邏輯,僅需要提供簡單的設定引數值即可,但這樣的方式畢竟無法達到隨心所欲變化的效果,這有點想OpenGL早期只能通過Fixed Function Pipeline進行開發,和如今採用Shading Language可實現豐富多彩變化的質變,因此這篇我們將採用WebGL的SL程式碼方式折騰點更好玩的效果。 […]

发表评论

电子邮件地址不会被公开。 必填项已用*标注


答案 : *
19 × 27 =