La la la, hablemos primero de los requisitos. El producto quiere que los usuarios compartan una imagen en WeChat, QQ y otras plataformas dentro de nuestra aplicación. La imagen contiene el nombre del usuario, avatar y un código QR con su propia información. Entonces, ¿cómo generar este cartel? ~~~
En primer lugar, nuestro jefe me dijo que existe un complemento llamado html2canvas. Su función es convertir nodos DOM en imágenes, lo cual es bueno. Lo probé y funciona, pero ~ este complemento es un poco grande. ¡Se siente como una pérdida presentar algo tan grande para satisfacer las necesidades de los carteles! ! ! Así que será mejor que dibuje uno yo mismo~
Primero, las representaciones.
Dangdangdangdang ~~~ El póster final generado incluye un avatar, nombre y código QR. Por supuesto, el código QR en la imagen es el código QR de Baidu ~ Finalmente, se genera base64 para compartir en las principales plataformas.
Sin más preámbulos, aquí está el código (no he compilado este código porque soy un vago...)
<canvas id=myCanvas ancho=750 alto=1200 estilo=borde:1px sólido #d3d3d3;fondo:#ffffff;></canvas>
El nodo DOM es muy simple, simplemente genere una etiqueta de lienzo y escriba algunos atributos como desee ~
var canvas = document.getElementById(myCanvas); //Obtener la función del nodo del lienzo imageToCanvas(canvas,url1,url2,code) { //Pasar la imagen de fondo del nodo del lienzo url1 avatar url2 Código QR código var ctx = canvas.getContext(2d) ; var img1 = new Image(); img1.src = url1; //No explicaré el anterior, genera una imagen img1.onload = function(){ ctx.drawImage(img1,0,0); //Cuando se carga la imagen, se asigna al lienzo a partir de 0 0. var img2 = new Image(); img2.src = url2; img2.onload = function(){ ctx.save(); //Guardar el estado actual del lienzo ctx.arc(374, 134, 44, 0, 2 * Math . PI); //La operación de corte corta el avatar cuadrado en un círculo//Recorta el círculo del lienzo ctx.clip(); //Recortar ctx.drawImage(img2, 330, 90, 88, 88); //Colocar img2 en 330 90 coordenadas con tamaño 88 ctx.restore(); //Liberar el estado del lienzo ctx.font=28px Arial; textAlign=centro; ctx.fillStyle ='#FFFFFF'; //El paso anterior es establecer el atributo de texto en el centro ctx.fillText(su nombre es Shenma, 375,220); //El texto aquí está codificado de forma rígida, pasar más parámetros está bien var img3 = new Image(). ; img3.src = code; img3.onload = function() { ctx.drawImage(img3,136,554,478,478); de manera similar, agrega la imagen var imgCode; = convertCanvasToImage(canvas); //Convierte la imagen a base64 console.log(imgCode.getAttribute('src')) } } }}imageToCanvas(canvas,1.png,'3.jpeg','code.png') ; // Función de inicialización convertCanvasToImage(canvas) { var image = new Image(); //Convierte el lienzo en una imagen de retorno img;}De esta manera, puedes obtener una base64 y luego usarla.
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.