La la la, vamos falar primeiro sobre os requisitos. O produto deseja que os usuários compartilhem uma imagem no WeChat, QQ e outras plataformas em nosso aplicativo. A imagem contém o nome do usuário, avatar e um código QR com informações próprias. Então, como gerar este pôster ~~~
Em primeiro lugar, nosso chefe me disse que existe um plug-in chamado html2canvas. Sua função é converter nós DOM em imagens, o que é uma coisa boa. Eu testei e funciona, mas ~ este plug-in é um pouco grande. Parece uma perda introduzir algo tão grande para atender às necessidades dos postadores! ! ! Então, é melhor eu mesmo desenhar um ~
Primeiro, as renderizações
Dangdangdangdang ~~~ O pôster final gerado inclui um avatar, nome e código QR. Claro, o código QR na imagem é o código QR do Baidu ~ Finalmente, base64 é gerado para compartilhamento nas principais plataformas.
Sem mais delongas, aqui está o código (não compilei esse código porque sou preguiçoso...)
<canvas id=myCanvas width=750 height=1200 style=border:1px solid #d3d3d3;background:#ffffff;></canvas>
O nó DOM é muito simples, basta gerar uma tag canvas e escrever alguns atributos como desejar ~
var canvas = document.getElementById(myCanvas); //Obter nó de tela function imageToCanvas(canvas,url1,url2,code) { //Passar imagem de fundo do nó de tela url1 avatar url2 Código QR var ctx = canvas.getContext(2d ) ; var img1 = new Image(); img1.src = url1; //Não vou explicar o anterior, gere uma imagem img1.onload = function(){ ctx.drawImage(img1,0,0); //Quando a imagem é carregada, ela é atribuída ao canvas a partir de 0 0. var img2 = new Image(); img2.src = url2; img2.onload = function(){ ctx.save(); . PI); //A operação de corte corta o avatar quadrado em um círculo//Recorta o círculo da tela ctx.clip(); //Cortar ctx.drawImage(img2, 330, 90, 88, 88); //Coloque img2 em 330 90 coordenadas com tamanho 88 ctx.restore(); //Libere o estado da tela ctx.font=28px Arial . textAlign=centro;ctx.fillStyle ='#FFFFFF'; //A etapa anterior é definir o atributo de texto para centralizar ctx.fillText(seu nome é Shenma, 375,220); //O texto aqui é codificado. Na prática, passar mais parâmetros está ok var img3 = new Image(); ; img3.src = code; img3.onload = function() { ctx.drawImage(img3,136,554,478,478); = convertCanvasToImage(canvas); //Converte a imagem para base64 console.log(imgCode.getAttribute('src')) } } }}imageToCanvas(canvas,1.png,'3.jpeg','code.png') ; //Função de inicialização convertCanvasToImage(canvas) { var image = new Image(); //Converte tela em imagem de retorno img;}Desta forma, você pode obter uma base64 e usá-la.
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.