HT for Web image operation based on HTML5 (i)

The unique vector graphics design architecture of the HT for Web makes it a powerful and rich dynamic graphics rendering capability, but has it ever been recently known that "Adobe Photoshop is outdated?" "The topic, we can realize that in many cases the actual project is impossible to fully adopt the vector, the project still has a large number of traditional non-vector static picture, after all, the tool is powerful and rich in existing resources, but in order to make the static picture more dynamic effect, HT for Web provides more rendering, such as the HT for The Web's entity Settings ' Body.color ' style can be automatically dyed, and this dyeing technique is explained here.

This article presents the final rendering effect of this example, in which the original image is Http://hightopo.com/images/banner.png, and the dyeing effect is set with red, yellow, and blue colors, based on the HT for The web implementation of such a simple topology, but the code is more than 10 lines, but today we do not rely on the HT for web-based ' body.color ' dyeing function, we will use the most primitive way to produce stained images.

Datamodel =Newht.                       Datamodel (); Graphview=NewHt.graph.GraphView (Datamodel);    Graphview.addtodom (); varRoot =Newht.    Node (); Root.setimage (' Ht-for-web.png ');                                    Datamodel.add (root); [' Blue ', ' yellow ', ' Red '].foreach (function(color) {varnode =Newht.        Node (); Node.setimage (' Ht-for-web.png '); NODE.S ({' Body.color ': color});                     Datamodel.add (node); varEdge =Newht.        Edge (Root, node); EDGE.S ({' Edge.color ': color});                        Datamodel.add (Edge); });

The principle of dyeing is the operation of the image pixel content, which can be understood as a Convertcolor (R, C, Rawcolor, ...) ->finalcolor pixel function conversion, where r and C represent pixels in rows and columns, Rawcolor as raw color information, ... Represents other parameter information, such as the color information we are staining, and ultimately the converted pixel value of the returned Finalcolor through Convertcolor processing.

Picture dyeing operation can be said to be the simplest image processing, the essence is Rawcolor * Tintcolor, where the tintcolor can be understood as HT for The Body.color value of the web, which represents information such as the alarm level status of the monitoring system, which allows the user to observe the alarm state of the equipment operation more intuitively through dyeing. Here the Rawcolor * Tintcolor is essentially multiplied by the RGB of two colors, in general the final alpha transparency will keep the value of the original Rawcolor not manipulated.

Torgba = (function(){        varMap = {},//string-[128,128,128,255]Canvas; return function(color) {varG, data =Map[color]; if(!data) {                if(!canvas) {Canvas= document.createelement (' Canvas '); Canvas.width= 1; Canvas.height= 1; } g= Canvas.getcontext (' 2d '); G.clearrect (0, 0, 1, 1); G.fillstyle=color;                G.beginpath (); G.rect (0, 0, 1, 1);                                                                G.fill (); Data= G.getimagedata (0, 0, 1, 1). Data; Data= Map[color] = [data[0], data[1], data[2], data[3]]; }            returndata;    };                })(); functioninit () {varImage =NewImage (); IMAGE.SRC= ' banner.png ';//' ht-for-web.png ';Image.onload =function() {Datamodel=Newht.                               Datamodel (); Graphview=NewHt.graph.GraphView (Datamodel);            Graphview.addtodom (); varRoot =Newht.            Node ();            Root.setimage (image);              Datamodel.add (root); [' Blue ', ' yellow ', ' Red '].foreach (function(color) {varnode =Newht.                Node ();                                        Node.setimage (createColorImage1 (image, color));                             Datamodel.add (node); varEdge =Newht.                Edge (Root, node); EDGE.S ({' Edge.color ': color});                                Datamodel.add (Edge);                             });    }; }    functioncreateColorImage1 (image, color) {varwidth =Image.width; varHeight =Image.height; varCanvas = document.createelement (' Canvas '); varContext = Canvas.getcontext ("2d" ); Canvas.width=width; Canvas.height=height; Context.drawimage (Image,0, 0, width, height); varRGBA =Torgba (color); varr = rgba[0]/255, G = rgba[1]/255, B = rgba[2]/255;varPixeldata = context.getimagedata (0, 0, width, height); varpixels =Pixeldata.data;  for(vari = 0; i < pixels.length; i + = 4) {pixels[i+0] *=R; Pixels[i+1] *=G; Pixels[i+2] *=b; } context.putimagedata (Pixeldata,0, 0); returnCanvas; }

The above code is the implementation of all the logic, there are two points to note that the color value returned by Getimagedata is the value of 0~255, dye multiplication We need a 0~1-based format, so we need to divide by 255 before multiplying. Another point in order to facilitate user development, the color value allows any HTML supported color format, it is possible to input Red,rgba (255,125,128,0.1) format, the above Torgba code in the closure of the return of a color array can be returned according to the input format of the tool function, It is also used in a pixel of canvas memory to draw dynamically, and then through the getimagedata to determine the color information, and then through the map cache calculation results, this way than enumerating a bunch of color mapping table to simplify.

Of course, the use of this dyeing algorithm when the entity is pure black when there is a problem, because the RGB value of black is 0, so no matter what color multiplied by the result is also 0, the actual application can be asked to avoid making a pure black picture, or the code of the pure black picture for special processing.

The above method is only the first dyeing method, so for CreateColorImage1, the next one will introduce the second dyeing method CreateColorImage2.

HT for Web image operation based on HTML5 (i)