Canvas's custom avatar function implementation code example

The boss told me two days ago that the function of the custom avatar on the official website of the Tiger was implemented by Flash. Those who were not installed had to manually allow Falsh to run. So let me use Canvas to implement the same feature, hehe, just recently studied Canvas, so I readily agreed (Actually, you don’t have agreed if you haven't studied it, hahahahaha ~)

Git address: https://github.com/ry928330/Portraitdiy

• Drag the left small box on the left, or the mouse is placed in the lower right corner of the small square frame. Click the stretching square box. The picture covered by the box is automatically intercepted, and then re -painted in multiple containers on the right.
• Enter the high height, customize the size you need to customize, and currently only supports the same avatar picture with the same height.

Because you have to take a screenshot of the area where the picture is, you have to make a Canvas and cover the area where the picture is. Here, we give a function to create the same position Canvas based on the class name of the element in the DOM, and cover it on the original DOM element:

 Function CreatecanvasByClassName (tag) {var canvasinitialWidth = $ ('.' + tag) .width (); Var CanvasinitialHeight = $ ('.' + tag); var left = $ ('.' + tag). Offset (). left -$ ('.' + tag) .parent ('. PortraitContainer'). Offset (). Left + 1; VAR TOP = $ ('.' + tag). ('.' + tag) .parent ('. PortraitContainer'). Officet (). Top + 1; // var left = $ ('.' + tag) .offset (). left + 1; // var top = $ ('.' + tag) .Offset (). Top + 1; Clearcanvasobj.left = $ ('.' + tag) .offset (). leftCanvasobj.top = $ ('.' + tag tag ) .offset (). Top + 1; // Clearcanvasobj.left = left; // Clearcanvasobj.top = Top; VAR Canvaselement = $ ('<canvas> </canvas>'); OOR (Getrandom (0, 10000)); Clearcanvasobj.canvasid = Randomnum; Canvaselement.attr ({id: 'canvas', Width: CanvasinitialWidth, Height: CanvasinitialHeight}); Vaselement.css ({position: 'absolute', top: top, left : left}); // $ ('body').append (CANVASELEMENT); VAR APPENDELE = $ ('. PortraitContainer'). 'canvas'); VAR CTX = Canvas.getContext ('2D'); //ctx.fillStyle = RGBA (211,211,216,0.5); CTX.Clearrect (0, 0, CanvasinitialWidth, CANVASINITIGHT); CTX.Fillst YLE = RGBA (0,0,0, 0.4); ctx.fillrect (0, 0, CanvasinitialWidth, CanvasinitialHeight); Return canvas;}

With this Canvas, you can operate wantonly in the area where your picture is. First, lower the entire area to draw a light black shadow, and then erase the color in the initial small box area. Then add MouseDown, mousemove, mouseup event to the entire page. The functions they do are similar to you to realize a drag function on the page. Here we focus on the operations in mousemove. The code is as follows:

 Function MouseMovefunc (Event) { / * Act on the event * / var newmousex = event.clientx -clearcanvasobj.left; var nowmousey = event.clienty .top; if (nowmousex> = Clearcanvasobj.xstart && NOWMousex <= Clearcanvasobj. XSTART + CLEARCANVASOBJ.WIDTH && NOWMousey> = Clearcanvasobj.ysstart && NOWMOUSEY <= Clearcanvasobj.ysstart + Clearcanvasobj.heigh) anvasarea = true; //Clearcanvasobj.isrightCorner = false; imgcontainercanvas.style.cursor = 'Move';} Else if ((nowmousex> = Clearcanvasobj.xstart + Clearcanvasobj.width -10) && (NOWMOUSEX <= Clearcanvasobj.xstart + Clearcanvasobj.width + 10) && Ey> = Clearcanvasobj.ysstart + Clearcanvasobj.height -10) && (nowmousey < = Clearcanvasobj.ysstart + Clearcanvasobj.height + 10) {Clearcanvasobj.ISCANVASAREA = TRUE; //Clearcanvasobj.beGindraw = False; .cursor = 'Se-Resize';} Else {clearcanvasobj.iscanvasarea = false; // Clearcanvasobj.isrightcorner = false; Imgcontainercanvas.style.cursor = 'DEFAULT';} VAR OUTERDOMWIDTH = $ (. ImgContainer). ht = $ (. Imgcontainer) .height (); VAR XDISTANCE = EVENT.CLIENTX- Clearcanvasobj.Mousex; var Ydistance = Event.clienty -Clearcanvasobj.Mousey; // Var Outctx = Canvas.getContext ('2D'); .begindraw & & Clearcanvasobj.iscanvasarea &&! Clearcanvasobj.isrightcorner) {ry_ctx.fillstyle = clearcanvasobj.color; // console.log ('1', clearcanvasobj.xstart, clearcanvasobj.ysstart) Ry_ctx.fillrect (clearcanvasobj.xstart, Clearc anvasobj.ystart, clearcanvasobj.width, clearcanvasobj.height); // OUTERCTX.FILLATT (0, 0, Canvas.width, Canvas.Height); Clearcanvasobj.xstart += XDISTANCE; ClearcanvasObj.ysstart += YDISTANCE; Arcanvasobj.xstart <= 0) {Clearcanvasobj .xstart = 0;} if (Clearcanvasobj.ysstart <= 0) {clearcanvasobj.ysstart = 0;} if (Clearcanvasobj.xstart + Clearcanvasobj.width)> = OUTERDOMWIDTH) {Clearcanvv). askj.xstart = OterDomwidth -Clearcanvasobj.width;} If (Clearcanvasobj.ysstart + Clearcanvasobj.height)> = OUTERDOMHEIGHT) {Clearcanvasobj.ysstart = OUTERDOMHEIGHT -CLEARCANVASOGHT;} // Console.Log ( '2', Clearcanvasobj.xstart, Clearcanvasobj.ystart) Ry_CTX.CLEARRECT (Clearcanvasobjj .xstart, Clearcanvasobj.ysst, Clearcanvasobj.width, Clearcanvasobj.Height); Producesmallpic (Clearcanvasobj.xstart+Clearcanvasobj. YSTART+CLEARCANVASOBJ.TOP, Clearcanvasobj.width, Clearcanvasobj.Height, Imageurl) Clearcanvasobj.Mousex = Event. Clientx; Clearcanvasobj.mousey = Event.clienty;} // Drag the small box if (Clearcanvasobj.isrightcorner) {Ry_CTX.FillStyle = Clearcanvasobj.color; Ry_CTX.FI llrest (Clearcanvasobj.xstart, Clearcanvasobj.ystart, Clearcanvasobj.width, Clearcanvasobj .height); Var RealDistance = math.min (xDistance, YDISTANCE) Clearcanvasobj.width += RealDistance; Clearcanvasobj.height += RealDistance; Judgment of conditions if (Clearcanvasobj.xstart + Clearcanvasobj.width> = Outricomwidth ) {Clearcanvasobj.width = OUTERDOMWIDTH -CLEARCANVASOB.xstart; Clearcanvasobj.heigh = OUTERDOMWIDTH -Clearcanvasobj.ysstart + Clearcanvasobj.height> = OUTERDOMHEIGHT) {Clearcanvasobj.width = OUTERDOMHEIGHT -CLEARCANVASOBJ.YSTART; ClearcanvasObj.height = OUTERDOMHEIGHT -CLEARCANVASOBJ.YSTART;} If (Clearcanvasobj.width <= 10) {ClearcanvasObj.width = 10;} if (Clearcanvasobj.heigh <= 10) {Clearcanvasob j.Height = 10;} Ry_ctx.Clearrect (Clearcanvasobj.xstart, Clearcanvasobj.ystart, Clearcanvasobj.width, Clearcanvasobj.height); Producesmallpic (Clearcanvasobj.xstart+Clearcanvasobj.ysstart+ Clearcanvasobj.top, Clearcanvasobj.width, Clearcanvasobj.height, ImageURL); Clearcanvasobj.mousex = Event.clientx; clearcanvasobj.mousey = event.clienty;}}

In the function, you need to pay attention to the boundary condition of the dragging, one is that the box cannot be dragged to the boundary of the picture where the picture is; the other is when your mouse is placed in the area where the square frame is located to change the style of the mouse. During the dragging process, we constantly re -painted the area where the square movement moved (that is, the shadow of continuously drawing), and then called the Clearrect function in the new position to re -wipe out a small square frame. In the process of dragging or stretching, we will constantly call the Producesmallpic function. In the container on the right (each container is a canvas), the required avatars are continuously drawn according to the size of the container. The code is as follows:

 Function Producesmallpic (ImageUrl, LEFT, TOP, Width, Height) {var IMG = New Image (); img.src = imageurl; var targetctx = new array (); tcanvas = null; img.Onload = Function () {Portraitgroupsarr . Foreach (function (it, index) {targetcanvas = document.GetelementByid (item.class); targetctx.push (targetcanvas.getContext ('2D')); TARGE TCTX [Index] .Clearrect (0,0, item.width, item.head); Targetctx [index] .DrawImage (IMG, left -Clearcanvasobj.left, TOP -CLEARCANVASOBJ.TOP, Width, Height, 0, 0, ITEM.HEIGHT );})}}

Let's talk about the role of this function. Here we should pay attention to a parameter ImageUrl. This URL is transformed by the DOM of the picture. Because you have to turn the area where the DOM is located into a picture so that you can use the DrawImage function to intercept the area you need. So we first use the HTML2CANVAS library function to talk about the picture. The DOM is converted into Canvas. The content of this canvas contains the pictures you want to intercept. Then transform this canvas into the picture address ImageUrl. The code is as follows:

 HTML2CANVAS (Document.GetelementByid ('Imgcontainer'), {Onrendered: Function (Canvas) {VAR ImageUrl = CanvastranstoImage (Canavs); ...}) Function can VASTRANSTOIMAGE (Canvas) {var ImageUrl = Canvas.todataurl ('Image/PNG '); Return Imageurl;}

Then, you can facilitate the Canvas container on the right. Talking about the picture back to it. This is the end of the whole process. It seems that it seems simple.

Related dependence: