La la la, parlons d'abord des exigences. Le produit souhaite que les utilisateurs partagent une photo sur WeChat, QQ et d'autres plates-formes au sein de notre application. L'image contient le nom de l'utilisateur, son avatar et un code QR avec ses propres informations. Alors, comment générer cette affiche~~~
Tout d'abord, notre patron m'a dit qu'il existe un plug-in appelé html2canvas. Sa fonction est de convertir les nœuds DOM en images, ce qui est une bonne chose. Je l'ai testé, et ça marche, mais ~ ce plug-in est un peu gros, c'est une perte d'introduire une chose aussi importante pour répondre aux besoins des affiches ! ! ! Alors, je ferais mieux d'en dessiner un moi-même~
Tout d'abord, les rendus
Dangdangdangdang~~~L'affiche finale générée comprend un avatar, un nom et un code QR. Bien sûr, le code QR sur l'image est le code QR de Baidu~ Enfin, la base64 est générée pour le partage sur les principales plateformes.
Sans plus attendre, voici le code (je n'ai pas compilé ce code car je suis paresseux...)
<canvas id=myCanvas width=750 height=1200 style=border:1px solid #d3d3d3;background:#ffffff;></canvas>
Le nœud DOM est très simple, générez simplement une balise canvas et écrivez quelques attributs à votre guise ~
var canvas = document.getElementById(myCanvas); //Obtenir la fonction du nœud de canevas imageToCanvas(canvas,url1,url2,code) { //Passer dans l'image d'arrière-plan du nœud de canevas url1 avatar url2 Code QR code var ctx = canvas.getContext(2d ) ; var img1 = new Image(); img1.src = url1; //Je n'expliquerai pas le précédent, génère une image img1.onload = function(){ ctx.drawImage(img1,0,0); //Lorsque l'image est chargée, elle est affectée au canevas à partir de 0 0. var img2 = new Image(); img2.src = url2; img2.onload = function(){ ctx.save(); //Enregistre l'état actuel du canevas ctx.arc(374, 134, 44, 0, 2 * Math . PI); //L'opération de découpe coupe l'avatar carré en cercle//Découpez le cercle du canevas ctx.clip(); //Recadrer ctx.drawImage(img2, 330, 90, 88, 88); //Mettez img2 aux coordonnées 330 90 avec une taille 88 ctx.restore(); //Libérez l'état du canevas ctx.font=28px Arial; textAlign=centre; ctx.fillStyle ='#FFFFFF'; //L'étape précédente consiste à définir l'attribut text sur center ctx.fillText(votre nom est Shenma, 375,220); //Le texte ici est codé en dur, passer plus de paramètres est ok var img3 = new Image(). ; img3.src = code; img3.onload = function() { ctx.drawImage(img3,136,554,478,478); //Ajouter de la même manière une image var imgCode); = convertCanvasToImage(canvas); //Convertir l'image en base64 console.log(imgCode.getAttribute('src')) } } }}imageToCanvas(canvas,1.png,'3.jpeg','code.png') ; //Fonction d'initialisation convertCanvasToImage(canvas) { var image = new Image(); //Convertir le canevas en image de retour img ;}
De cette façon, vous pouvez obtenir une base64 et ensuite l'utiliser.
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.