Beispiel für die benutzerdefinierte Avatar -Funktion Implementierungscode von Canvas

Der Chef sagte mir vor zwei Tagen, dass die Funktion des benutzerdefinierten Avatars auf der offiziellen Website des Tigers von Flash implementiert wurde. Lassen Sie mich mit Canvas dieselbe Funktion verwenden, hehe, die erst kürzlich Leinwand studiert hat, also stimmte ich bereitwillig zu (tatsächlich haben Sie nicht zugestimmt, ob Sie es nicht studiert haben, hahahahaha ~)

GIT -Adresse: https://github.com/ry928330/portraitdiy

• Ziehen Sie die linke kleine Schachtel links, oder die Maus wird in der unteren rechten Ecke des kleinen quadratischen Rahmens platziert. das Recht.
• Geben Sie die hohe Höhe ein, passen Sie die Größe an, die Sie für die Anpassung benötigen, und unterstützt derzeit nur das gleiche Avatar -Bild mit der gleichen Höhe.

Da Sie einen Screenshot des Bereichs, in dem sich das Bild befindet, aufnehmen müssen, müssen Sie eine Leinwand erstellen und den Bereich abdecken, in dem sich das Bild befindet. Hier geben wir eine Funktion, um die gleiche Position zu erstellen, basierend auf dem Klassennamen des Elements im DOM, und sie auf das ursprüngliche DOM -Element abzudecken:

 Funktion createCanvasByCassName (Tag) {var canvasinitialwidth = $ (' + tag) .width (); links -$ (' + tag) .Parent ('. Porträtkontainer '). . (). links = // Clearcanvasobj.top : 'Canvas', Breite: Canvasinitialwidth, Höhe: CanvasinitialHeight}); Var appendele = $ ('. Porträtkontainer'). , Canvasingight);

Mit dieser Leinwand können Sie in dem Bereich, in dem sich Ihr Bild befindet, mutwillig arbeiten. Senken Sie zuerst den gesamten Bereich, um einen hellen schwarzen Schatten zu zeichnen, und löschen Sie dann die Farbe im ersten kleinen Kastenbereich. Fügen Sie MOUSEDOWN, Mousemove, Mausup -Ereignis zu der gesamten Seite hinzu.

 Funktion Mousemovefunc (Ereignis) { / * auf das Ereignis handeln ClearCanvasobj.Width && nowmousey> = ClearCanvasobj.ysStart && nowmousey <= ClearCanvasobj.ysStart + ClearCanvasobj.Heigh) Anvasarea = true; > = ClearCanvasobj.xstart + clearCanvasobj.width -10) && (nowMousex <= clearCanvasobj.xstart + clearCanvasobj.width + 10) && ey> = clearCanvasobj.yStart + Clearcanvasobj.height -10) && (nunMousey <= = (nunMusey <= Clearcanvasobj.Height + 10) {Clearcanvasobj.iscanvasarea = True; .Cursor = 'Standard';} var oterdomwidth = $ (. ImgContainer). ; // var outctx = canvas.getContext ('2d'); Clearcanvasobj.ysStart) ry_ctx.fillrect (ClearCanvasobj.xstart, Clearc Anvasobj.Ystart, ClearCanvasobj.Width, Clearcanvasobj.Height); = XDistance; Breite)> = äußere Domeswidth) {ClearCanvv). ('2', Clearcanvasobj.xstart, Clearcanvasobj.YSTART) RY_CTX.Clearrect (Clearcanvasobjj .xstart, Clearcanvasobj.ysst, Clearcanvasobj.width, Clearcanvasobj.height); obj. Breite, Clearcanvasobj.Height, ImageRl) ClearCanvasobj.Mousex = Ereignis (Clearcanvasobj.xstart, Clearcanvasobj.YSTART, Clearcanvasobj.Width, Clearcanvasobj. xstart + clearcanvasobj.width> = Outricomwidth) {ClearCanvasobj.Width = Outerdomwidth -Clearcanvasob.xstart; Obj.ystart; Clearcanvasobj. Höhe = oterdomHeight -clearcanvasobj.ystart;} if (clearcanvasobj.width <= 10) {ClearCanvasobj.Width = 10;} if (clearcanvasobj.heigh <= 10) {Clearcanvasob J.Height = 10;} ry_ctx (Clearcanvasobj. XStart, Clearcanvasobj.YSTART, Clearcanvasobj.width, Clearcanvasobj.Height); Obj.Mousey = event.clienty;}}

In der Funktion müssen Sie auf den Randzustand des Ziehens achten, dass die Box nicht an die Grenze des Bildes gezogen werden kann, auf dem sich das Bild befindet. Der Rahmen ist so, dass der Stil der Maus verändert wird. Während des Dragging -Prozesses haben wir ständig den Bereich, in dem sich die quadratische Bewegung bewegte (dh den Schatten des kontinuierlichen Zeichnens), wieder aufgebraucht und dann die ClearRect -Funktion in der neuen Position bezeichnet, um einen kleinen quadratischen Rahmen herauszuwischen. Beim Ziehen oder Dehnen werden wir die produzierende Funktion ständig im Container auf der rechten Seite aufrufen (jeder Behälter ist eine Leinwand), die erforderlichen Avatare werden kontinuierlich gemäß der Größe des Behälters gezeichnet. Der Code ist wie folgt:

 Funktion erzeugt (ImageRl, links, widt, Höhe) {var img = new Image (); Foreach (function (it, index) {targetCanvas = document.getElementById (item.class); targetCtx.push (targetCanvas.getContext ('2d'); Targe TCTX [INDEX] .ClearRect (0,0, item.width, item.head);

Lassen Sie uns über die Rolle dieser Funktion sprechen. Da Sie den Bereich, in dem sich das DOM befindet, in ein Bild verwandeln müssen, damit Sie die Drawimage -Funktion verwenden können, um den von Ihnen benötigten Bereich abzufangen. Wir verwenden zuerst die HTML2CANVAS -Bibliotheksfunktion, um über das Bild zu sprechen.

 Html2canvas (document.getElementById ('ImgContainer'), {Onrendered: Funktion (Canvas) {var imageurl = canvastranstomage (canavs); ');

Dann können Sie den Canvas -Container auf der Rechten erleichtern.

Verwandte Abhängigkeit: