HT for Web HTML5-based image operations (2)

HT for Web HTML5-based image operations (2)

In the previous article, we introduced the getImageData and setImageData functions of HTML5 Canvas used by HT for Web, and the coloring effect achieved by the color product. This article will introduce another more efficient implementation method, of course, the functions to be implemented are the same. This time we are still based on the HTML5 technology, but use the globalCompositeOperation attribute of Canvas for various blending effects:

For more information about the effects of globalCompositeOperation, see the instructions in the https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing. We use the "multiply" and "destination-atop" blending effects in the following three steps:

1. First fill the rectangular area of the image size with colored colors

2. Use multiply to draw a drawImage.

3. In the last step, use the globalCompositeOperation method of "destination-atop" and drawImage again. The effect will be extracted from the pixel area of the image, excluding the non-image part, and finally reach the desired dyeing part:

All code is as follows:

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;};

So far, we have two completely different ways of drawing. The two have almost the same amount of code. Who should we choose? Let's test the performance of the two implementation methods:

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);

I tested the above Code in the chrome browser of mac air. It takes 1630 milliseconds for createColorImage1 and 29 milliseconds for createColorImage2. The difference between the two is 56 times. That is to say, although using globalCompositeOperation, however, the performance is still far higher than how to set pixel values one by one through getImageData.

The root cause of this huge gap is that the createColorImage1 method is completely based on CPU operations, js is a single thread, and intensive numerical operations are not js's strength, but the globalCompositeOperation rendering method is used, the bottom layer of the browser can use GPU and other hardware acceleration methods to achieve more performance. Therefore, it is not surprising that the performance differences between the two-minute approach are dozens of times different, if you are interested, refer to Microsoft's articles on Canvas hardware acceleration in browsers:

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

The above two methods are based on the HTML5 Canvas 2D method. In fact, the GPU should be used more directly by the Canvas WebGL technology, in the next article, we will introduce more interesting pixel operations based on the Shading Language of WebGL. Of course, the HT for Web using Hightopo does not need to care about these underlying technical details, HT automatically selects the most suitable dyeing mechanism, because some terminal browsers do not support the globalCompositeOperation function, and some do not support hardware acceleration of WebGL, therefore, automatic selection of the most appropriate rendering mechanism also requires that the underlying framework be intelligent enough.