HT for Web HTML5-based image Operations (ii)

The previous article introduced the HT for Web using HTML5 Canvas's getimagedata and setimagedata functions, through the color product realization of the dyeing effect, this article will again introduce another more efficient implementation, of course, the effect of the function is exactly the same. This time we are still based on HTML5 technology, but using the Globalcompositeoperation property of canvas for various blending effects:

Various globalcompositeoperation effects can be referenced https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/ Compositing's description, we use the "multiply" and "destination-atop" two blending effects, through the following three steps to achieve:

1. Fill the rectangular area of the picture with the dyed color first

2, the use of "multiply" for drawimage drawing, to achieve the following effects

3, the last step of the "Destination-atop" Globalcompositeoperation Way, again drawimage, this drawing effect will be key out of the image pixel area, excluding non-picture parts, and finally reach our desired staining film:

All codes are 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;}; 

At this point we have two different ways of drawing, the same amount of code, who should choose? Let's test the performance of the two implementations in the following ways:

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 under the Chrome browser of Mac Air, CreateColorImage1 takes 1630 milliseconds, CreateColorImage2 takes 29 milliseconds, the difference is 56 times times That is to say, although the use of globalcompositeoperation two times DrawImage, but performance is still much higher than by getimagedata set pixel values.

The root cause of this huge gap is that the createColorImage1 is based solely on CPU operation, JS is single-threaded, and the dense numerical operation is not the strengths of JS, and the use of Globalcompositeoperation rendering method, The browser can fully use the GPU and other hardware accelerated way to achieve more performance, so the two-way performance difference of dozens of times times is not surprising, there are interested in a few Microsoft on the browser Canvas hardware acceleration related articles:

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 way, in fact, more directly with the GPU should be the canvas of WEBGL technology, the next we will introduce a better play based on the WebGL shading Language pixel operation mode, Of course, using Hightopo's HT for web does not need to be concerned with these underlying technical details, HT will automatically choose the most appropriate staining mechanism, because some terminal browsers do not support globalcompositeoperation functionality, some do not support WEBGL hardware acceleration, Therefore, the automatic selection of the most appropriate rendering mechanism also requires that the underlying framework is intelligent enough.

HT for Web HTML5-based image Operations (ii)