Ejemplo de código de implementación de función Avatar de Canvas

El jefe me dijo hace dos días que la función del avatar personalizado en el sitio web oficial del tigre fue implementado por Flash. Así que permítanme usar lienzos para implementar la misma característica, jeje, recientemente estudié lienzo, por lo que estuve de acuerdo (en realidad, no has acordado si no la has estudiado, jajajaja ~)

Dirección de Git: https://github.com/ry928330/portraitdiy

• Arrastre el cuadro pequeño izquierdo a la izquierda, o el mouse se coloca en la esquina inferior derecha del cuadro pequeño. el derecho.
• Ingrese la alta altura, personalice el tamaño que necesita para personalizar y actualmente solo admite la misma imagen de avatar con la misma altura.

Debido a que debe tomar una captura de pantalla del área donde está la imagen, debe hacer un lienzo y cubrir el área donde está la imagen. Aquí, damos una función para crear el mismo lienzo de posición basado en el nombre de clase del elemento en el DOM y cubrirlo en el elemento DOM original:

 Function createCanVasbyClassName (TAG) {Var CanvasinitialWidth = $ ('.' + Tag) .Width (); Left -$ ('.' + Tag). . (). Left = Left ;/ : 'Canvas', Ancho: Canvasinitialwidth, altura: CanvasinitialHeight}); Var appendele = $ ('. PortraitContainer'). , CanvasInitight);

Con este lienzo, puede operar sin sentido en el área donde está su imagen. Primero, baje toda el área para dibujar una sombra negra ligera y luego borrar el color en el área inicial de la caja pequeña. Luego agregue el evento MouseDown, MouseMove, MouseUp a toda la página.

 Function mouseMoveFunc (event) { / * actúa en el evento * / var newmousex = event.clientx -clearcanvasobj.left; ClearCanVasObj.Width && NowMousey> = ClearCanVasObj.ysStart && NowMousey <= ClearCanvasObj.SSTART + ClearCanvasobj.heeigh) Anvasarea = true. > = ClearCanVASObj.xStart + ClearCanVasObj.Width -10) && (NowMousex <= ClearCanVasObj.xStart + ClearCanVasobj.width + 10) && Ey> = ClearCanVASOBJ.SSSTART + ClearCanVasObj.Height --10) && (ahoraMousey <= ClearCanvas ClearCanVasObj.Height + 10) {ClearCanVasObj.Iscanvasarea = true; .cursor = 'predeterminado';} var ourterdomwidth = $ (. imgContainer). ; / / Var OutCtx = Canvas.getContext ('2d'); , clearCanVasobj.ysstart) ry_ctx.fillrect (clearCanVasObj.xstart, clearC anvasobj.Start, clearCanvasobj.width, clearCanvasobj.height); = XDistance; Width)> = OuterDomWidth) {ClearCanvv). Registro ('2', clearCanvasobj.xstart, clearCanvasobj.ystart) ry_ctx.clarrect (clearCanvasobjj .xstart, clearCanVasobj.ysst, clearCanvasobj.width, clearCanVasobj.Height); Asobj.top, clearcanvasobj. Ancho, ClearCanVasObj.Height, ImageUrl) ClearCanVasObj.Mousex = Event. (ClearCanVasObj.xStart, ClearCanVasObj.Start, ClearCanVasObj.Width, ClearCanVasObj .Height); XStart + ClearCanVasobj.Width> = OutRicomWidth) {ClearCanVasObj.Width = OuterDomWidth -ClearCanVasob.xStart; Terdomheight -Clarcanvasobj.ystart; altura = OUTERDOMHEIGHT -CLearCanVASObj.Start;} if (clearCanVASObj.Width <= 10) {ClearCanVASObj.Width = 10;} if (clearCanVasObj.heigh <= 10) {clearCanVASOB J.HEight = 10;} ry_ctx.cleRrect (clearcanvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasvasVas XStart, ClearCanVasObj.Start, ClearCanvasobj.Width, ClearCanVasobj.Height); = Event.clientx; = Event.clienty;}}

En la función, debe prestar atención a la condición de límite del arrastre, uno es que el cuadro no puede arrastrarse al límite de la imagen donde está la imagen; El marco se encuentra para cambiar el estilo del mouse. Durante el proceso de arrastre, volvimos a pintar constantemente el área donde se movió el movimiento cuadrado (es decir, la sombra del dibujo continuo), y luego llamamos la función ClearRect en la nueva posición para volver a eliminar un pequeño marco cuadrado. En el proceso de arrastrar o estiramiento, llamaremos constantemente la función ProductesMallpic. El código es el siguiente:

 Función ProduceMallPic (ImageUrl, izquierda, arriba, ancho, altura) {var img = new image (); Foreach (function (it, index) {targetCanvas = document.getElementById (item.class); targetCtx.push (targetCanvas.getContext ('2d')); Targe tctx [index] .Clarrect (0,0, item.width,,,,,,,, width,,, item.head);

Hablemos sobre el papel de esta función. Debido a que debe convertir el área donde el DOM se encuentra en una imagen para que pueda usar la función Drawimage para interceptar el área que necesita. Así que primero usamos la función de la biblioteca HTML2Canvas para hablar sobre la imagen.

 Html2canvas (document.getElementById ('imgContainer'), {onrendered: function (canvas) {var imageUrl = canvastranstoiMage (canavs); ...}) puede vervastranstoimage (canvas) {var imageUrl = canvas.todataurl ('image/png ');

Luego, puede facilitar el contenedor de lienzo a la derecha.

Dependencia relacionada: