La la la, lassen Sie uns zunächst über die Anforderungen sprechen. Das Produkt möchte, dass Benutzer ein Bild mit WeChat, QQ und anderen Plattformen innerhalb unserer App teilen. Das Bild enthält den Namen, den Avatar und einen QR-Code des Benutzers mit seinen eigenen Informationen. Dann, wie man dieses Poster erstellt~~~
Zunächst sagte mir unser Chef, dass es ein Plug-In namens html2canvas gibt, dessen Funktion darin besteht, DOM-Knoten in Bilder umzuwandeln, was eine gute Sache ist. Ich habe es getestet und es funktioniert, aber dieses Plug-in ist etwas groß. Es fühlt sich wie ein Verlust an, so eine große Sache einzuführen, um den Anforderungen von Postern gerecht zu werden! ! ! Also, ich zeichne lieber selbst eins~
Zuerst die Renderings
Dangdangdangdang~~~Das endgültig generierte Poster enthält einen Avatar, einen Namen und einen QR-Code. Natürlich ist der QR-Code auf dem Bild der QR-Code von Baidu.~ Schließlich wird base64 für die Weitergabe auf wichtigen Plattformen generiert.
Hier ist ohne weiteres der Code (ich habe diesen Code nicht kompiliert, weil ich faul bin ...)
<canvas id=myCanvas width=750 height=1200 style=border:1px solid #d3d3d3;background:#ffffff;></canvas>
Der DOM-Knoten ist sehr einfach. Generieren Sie einfach ein Canvas-Tag und schreiben Sie einige Attribute nach Ihren Wünschen ~
var canvas = document.getElementById(myCanvas); //Canvas-Knotenfunktion abrufen imageToCanvas(canvas,url1,url2,code) { //Übergeben Sie den Canvas-Knoten-Hintergrundbild-URL1-Avatar-URL2-QR-Code-Code var ctx = canvas.getContext(2d) ; var img1 = new Image(); img1.src = url1; //Ich werde das vorherige nicht erklären, ein Bild generieren img1.onload = function(){ ctx.drawImage(img1,0,0); //Wenn das Bild geladen wird, wird es der Leinwand beginnend mit 0 0 zugewiesen. var img2 = new Image(); img2.src = url2; img2.onload = function(){ ctx.save(); //Speichern Sie den aktuellen Canvas-Status ctx.arc(374, 134, 44, 0, 2 * Math . PI); //Die Schneideoperation schneidet den quadratischen Avatar in einen Kreis//Schneide den Kreis aus der Leinwand aus ctx.clip(); //Crop ctx.drawImage(img2, 330, 90, 88, 88); //Setze img2 auf 330 90 Koordinaten mit der Größe 88 ctx.restore(); //Gib den Canvas-Status frei ctx.font=28px ctx . textAlign=center; ctx.fillStyle ='#FFFFFF'; //Der vorherige Schritt besteht darin, das Textattribut auf „center“ zu setzen ctx.fillText(your name is Shenma, 375,220); //Der Text hier ist fest codiert var img3 = new Image(). ; img3.src = code; img3.onload = function() { ctx.drawImage(img3,136,554,478,478); = convertCanvasToImage(canvas); //Konvertieren Sie das Bild in base64 console.log(imgCode.getAttribute('src')) } } }}imageToCanvas(canvas,1.png,'3.jpeg','code.png') ; //Initialisierungsfunktion ConvertCanvasToImage(canvas) { var image = new Image(); image.src = canvas.toDataURL(image/png); //Canvas in img-Rückgabebild konvertieren;}Auf diese Weise können Sie ein Base64 erhalten und es dann verwenden.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.