Exemplo de Código de Implementação da Função Avatar personalizado da Canvas

O chefe me disse há dois dias que a função do avatar personalizada no site oficial do tigre foi implementado pelo Flash. Então, deixe -me usar a tela para implementar o mesmo recurso, hehe, estudou recentemente a tela, então eu prontamente concordei (na verdade, você não concordou se não o estudou, hahahahaha ~)

Endereço Git: https://github.com/ry928330/portraitdiy

• Arraste a caixa pequena esquerda à esquerda, ou o mouse é colocado no canto inferior direito da moldura quadrada pequena. a direita.
• Digite a alta altura, personalize o tamanho que você precisa personalizar e atualmente suporta apenas a mesma imagem de avatar com a mesma altura.

Como você precisa tirar uma captura de tela da área onde está a imagem, precisa fazer uma tela e cobrir a área onde está a imagem. Aqui, damos uma função para criar a mesma tela de posição com base no nome da classe do elemento no DOM e cobri -lo no elemento DOM original:

 Função CreateCanvasbyclassName (Tag) {var CanvasinitialWidth = $ ('.' + Tag) .Width (); Esquerda -$ ('.' Tag) .Parent ('. . (). Esquerda = esquerda; : 'Canvas', Largura: CanvasinitialWidth, Altura: CanvasinitialHeight}); Var appendele = $ ('RetratContainer'). , Canvasinitight);

Com essa tela, você pode operar devagar na área onde está sua foto. Primeiro, abaixe toda a área para desenhar uma sombra preta clara e depois apagar a cor na área inicial da caixa pequena. Em seguida, adicione o evento MouseDown, MouseMove e MouseUp em toda a página.

 Function mouseMoveFunc (evento) { / * Aja no evento * / var newmousex = event.clientx -clearcanvasobj.left; ClearConvasobj.width && NowMousey> = ClearCanvasobj.ysstart && NowMousey <= ClearCanvasobj.ysstart + clearcanvasobj.heigh) anvasarea = true; > = ClearCanvasObj.xstart + clearcanvasobj.width -10) && (agoraMousex <= clearcanvasobj.xstart + clearcanvasobj.width + 10) && ey> = clearCanvasobj.ysstart + clearcan.height -10) & & (agora mamyy <agora ClearConvAsobj.Height + 10) {ClearCaneta .cursor = padrão ';} var OuterDomWidth = $ (. ; ClearCanvasobj.ysstart) ry_ctx.fillrect (clearcanvasobj.xstart, clearc anvasobj.ystart, clearcanvasobj.width, clearCansobj.Height); = Xdistance; width)> = OuterDomWidth) {ClearCanvv). ('2', clearcanvasobj.xstart, clearcanvasobj.ystart) ry_ctx.clearrect (clearcanvasobjj .xstart, clearcanvasobj.ysst, clearcanvasobj.width, clearcanvasobj.heart); asobj. Largura, ClearCanvasObj.Height, Imageurl) ClearCansobj.mousex = Evento (Clearcanvassobj.xstart, clearcanvasobj.ystart, clearcanvassobj.width, clearcanvasobj .Height); xstart + clearCanvasObj.width> = OutricomWidth) {ClearCanvasobj.width = OuterdomWidth -ClearCanvasob.xstart; Asobj.ystart; altura = outerdomHeight -ClearCanvasObj.ystart;} if (clearCanvasObj.width <= 10) {clearCanvasobj.width = 10;} if (clearCanvasobj.heigh <= 10) {clearCanvAsOB J.HanB = 10;} ry_ctx.clemret. xstart, clearcanvassobj.ystart, clearcanvasobj.width, clearcanvasobj.Height); obj.mousey = Event.Clienty;}}

Na função, você precisa prestar atenção à condição de limite do arrasto, uma é que a caixa não pode ser arrastada para o limite da imagem onde está a imagem; O quadro está localizado para alterar o estilo do mouse. Durante o processo de arrastando, reiniciamos constantemente a área onde o movimento quadrado se moveu (ou seja, a sombra de desenhar continuamente) e depois chamamos de função clara de Recret na nova posição para rejeitar uma pequena estrutura quadrada. No processo de arrastar ou alongamento, chamaremos constantemente a função produtores de Momes. O código é o seguinte:

 Função Producemmlpic (ImageUrl, esquerda, largura, altura) {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);

Vamos falar sobre o papel dessa função. Porque você precisa transformar a área onde o DOM está localizado em uma imagem para poder usar a função Drawimage para interceptar a área necessária. Por isso, usamos a função HTML2CANVAS para falar sobre a imagem.

 Html2Canvas (document.getElementById ('imgContainer'), {onrended: function (canvas) {var imageurl = canvastranstoImage (canavs); ...}) função pode vastranstoimage (canvas)/vargurl = canvas.todata ');

Em seguida, você pode facilitar o recipiente de tela à direita.

Dependência relacionada: