Exemple de code d'implémentation de fonction Avatar personnalisé de Canvas

Le patron m'a dit il y a deux jours que la fonction de l'avatar personnalisé sur le site officiel du Tiger a été mise en œuvre par Flash. Alors permettez-moi d'utiliser Canvas pour implémenter la même fonctionnalité, hehe, tout récemment étudié toivas, donc je suis facilement d'accord (en fait, vous n'avez pas convenu si vous ne l'avez pas étudié, hahahahaha ~)

Adresse git: https://github.com/ry928330/portraitdiy

• Faites glisser la petite boîte gauche sur la gauche, ou la souris est placée dans le coin inférieur droit du petit cadre carré. le droit.
• Entrez la hauteur élevée, personnalisez la taille que vous devez personnaliser et ne prend actuellement en charge que la même image d'avatar avec la même hauteur.

Parce que vous devez prendre une capture d'écran de la zone où se trouve l'image, vous devez faire une toile et couvrir la zone où se trouve l'image. Ici, nous donnons une fonction pour créer le même canevas de position basé sur le nom de classe de l'élément dans le DOM, et le couvrir sur l'élément DOM d'origine:

 Fonction CreateCanvasbyClassName (Tag) {var CanvasInitialWidth = $ ('.' + Tag) .Width (); gauche - $ ('.' + tag) .parent ('. PortraitContainer'). Le PortraitContainer '). (). Left = Left; // clearCanvasobj.top = top; : 'Canvas', largeur: canvasinitialwidth, hauteur: canvasinItialHeight}); Var appendele = $ ('. PortraitContainer'). , CanvasinItTh);

Avec cette toile, vous pouvez opérer désinvolte dans la zone où se trouve votre image. Tout d'abord, abaissez toute la zone pour dessiner une ombre noire légère, puis effacez la couleur dans la petite zone initiale. Ensuite, ajoutez l'événement MousDown, MouseMove, Mouseup à la page entière.

 Fonction MousMoveFunc (événement) {/ * Agir sur l'événement * / var newmousex = event.clientx -clienty 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.ysstart + clearcanvasobj.yight -10) & (NowMousey <= ClearCanvaSobj. ClearCanvasobj.height + 10) {clearCanvasobj.iscanvasarea = true; .cursor = 'Default';} var externomwidth = $ (. ImgContainer). ; , clearCanvasobj.ysstart) ry_ctx.fillrect (clearcanvasobj.xstart, clearc anvasobj.ystart, clearcanvasobj.width, clearcanvasobj.height); = XDistance; Width)> = OUTERDOMWIDTH) {ClearCanvv). (2 ', ClearCanvasobj.xstart, clearCanvasobj.ystart) ry_ctx.clearrect (ClearCanvasobj. Obj.top, ClearCanvasobj. Width, clearCanvasobj.height, ImageUrl) clearCanvasobj.mousex = event. (ClearCanvasobj.xstart, clearCanvasobj.ystart, clearCanvasobj.width, clearCanvasobj .Height); xstart + clearCanvasoBj.Width> = USURCOMWidth) {clearCanvasobj.width = OuterDomWidth -ClearCanvasob.xstart; Ight -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); .ClientX; ClearCanvasobj.mouse = event.clienty;}}

Dans la fonction, vous devez faire attention à la condition aux limites de la traînée, l'une est que la boîte ne peut pas être traînée vers la limite de l'image où l'image est; Le cadre est situé pour changer le style de la souris. Pendant le processus de traînée, nous avons constamment repensé la zone où le mouvement carré se déplaçait (c'est-à-dire l'ombre de dessin en continu), puis appelée la fonction ClearRect dans la nouvelle position pour re-échouer un petit cadre carré. Dans le processus de traînée ou d'étirement, nous appellerons constamment la fonction productrice. Le code est le suivant:

 Fonction ProductionsMallpic (ImageUrl, gauche, largeur, hauteur) {var img = new Image (); Foreach (function (it, index) {TargetCanvas = document.getElementById (item.class); ciblectx.push (TargetCanvas.getContex item.head);

Parlons du rôle de cette fonction. Nous devons faire attention à un paramètre ImageUrl. Parce que vous devez tourner la zone où le DOM est situé en image afin que vous puissiez utiliser la fonction DrawImage pour intercepter la zone dont vous avez besoin. Nous utilisons donc la fonction de bibliothèque HTML2Canvas pour parler de l'image.

 Html2Canvas (document.getElementById ('imgContainer'), {onRendered: function (canvas) {var imageurl = canvastranStoimage (canavs); ...}) la fonction peut vasterstoimage (canvas) {var imageurl = canvas.todataurl ('Image / Png '); Retour ImageUrl;}

Ensuite, vous pouvez faciliter le conteneur en toile à droite.

Dépendance connexe: