HT for Web基於HTML5的影象操作（二）

圖撲軟體發表於2014-11-22
WebHTML

上篇介紹了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的畫素操作方式，當然使用Hightopo的HT for Web不需要關心這些底層技術細節，HT會自動選擇最合適的染色機制，因為有些終端瀏覽器不支援globalCompositeOperation的功能，有些不支援WebGL的硬體加速，因此自動選擇最合適的渲染機制也是需要底層框架足夠智慧化的。

相關文章