Ausführliche Erklärung zum Teilen von WeChat-Postern auf HTML5-Leinwand (persönliche Klettergrube)

In diesem Artikel wird das Teilen von Canvas-WeChat-Postern vorgestellt und mit allen geteilt. Die Details sind wie folgt:

1. Erzeuge zufällig ein Bild
2. Rufen Sie den Avatar und den Namen des WeChat-Benutzers ab (passen Sie die Backend-Schnittstelle an, um ihn zu erhalten).
3. Kombinieren Sie den Avatar und den Titel des Benutzers mit einem zufällig generierten Bild zu einem Poster
4. Möglicherweise hat der Benutzer auf der vorherigen Seite auch den Wunschtext eingegeben, der auch in das Bild eingefügt werden muss.

1. Canvas ist ungültig, wenn im WeChat-Browser lange gedrückt wird, und kann nicht wie img geteilt werden (dann werde ich es in img konvertieren).
2. Nach der Konvertierung in img kann es in den WeChat-Entwicklertools angezeigt werden, funktioniert jedoch nicht auf dem realen Gerät (ich möchte weinen, aber keine Tränen sagen, dass das Bild möglicherweise domänenübergreifend ist ^-^).
3. Die Benutzer-Avatar-Synthese erfordert auch abgerundete Ecken, daher habe ich mir nur die Canvas-API-Dokumentation angesehen.
4. Wenn der Text im Canvas die angegebene Breite überschreitet, muss er umbrochen werden. Ich kenne nur die verschiedenen Textausrichtungsmethoden, die die angegebene Breite nicht überschreiten. ctx.textAlign = 'center';
5. Das Problem, dass die Leinwand auf einem hochauflösenden Bildschirm verschwommen ist (das ist ganz einfach, ich weiß nicht, warum Du Niang so ausführlich ist), liegt nicht an der Leinwand.witdt=innerWidth*devicePixelRatio

 <div class=imgBox v-cloak> <img :src='imgSrc' v-if=imgSrc /></div>

CSS

 <style> *{ margin:0; padding:0 } body, html { width: 100% } .imgBox { width: 100%; display: block; </style>

Skript

 // js-Hauptstruktur new Vue({ el:'imgBox', data:{ urlParam: {},//Erhalten Sie das Wertobjekt in der URL randomNum: 1,//Die Zufallszahl wird verwendet, um zu bestimmen, welcher Segensseite userName: '' ,//Benutzername imgSrc: '',//Synthesiertes endgültiges Bild userImg: '',//Benutzer-Avatar-Bild userMessage: '',//Benutzernachricht}, Methoden: { // Mit Freunden teilen wxShareFriends: function () {}, // Header der Initialisierungsanforderung wxHttp: function () { $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name=csrf-token ]' ).attr('content') } }); // Zufallszahlen abrufen [1,10] randomNumbers() { this.randomNum = Math.ceil(Math.random() * 10) }, // Den Avatar und Titel des WeChat-Benutzers sowie die Segensworte des Benutzers abrufen getUserInfo() { var vm = this $.post('API request address' , function (data) { if (data.code == 1) { vm.userImg = data.data.headimg; vm.userName = data.data.nickname; (vm.randomNum % 2 == 0) { vm.userMessage= 'Wenn wir uns in der Welt der Sterblichen treffen, ist die Zeit vergangen, einander in der Welt der Sterblichen zu begegnen.' else { vm.userMessage = 'Treffen in der Welt der Sterblichen, wir sind alt' } } vm.$nextTick(function () { vm.drawCanvasBgImg(); }) }) }, // Holen Sie sich den Seiten-DPR und die Breite getWindowInfo() { var windowInfo = {}; if (window.innerWidth) { windowInfo.width = window.innerWidth; width = document.body.clientWidth; } return windowInfo }, // Zeichnen Sie ein großes Hintergrundbild zum Teilen auf der Aktivitätsseite. drawCanvasBgImg () {}, // Schneiden Sie einen Kreis auf der Leinwand des Hintergrundbilds aus und füllen Sie ihn mit dem Avatar des Benutzers. drawCanvasUserImg(canvas, ctx, dpr) {}, // Füllen im Benutzernamen oder in der Benutzernachricht CanvasFillText (Canvas, CTX, DPR, CircleR) {}, // Gemeinsames Base64-Bit-Bild synthetisieren ConvertCanvasToImage (Canvas) { this.imgSrc = canvas.toDataURL(image/jpeg);//png ist giftig und der QR-Code kann auf Android nicht erkannt und nicht umgeleitet werden this.$Spin.hide(); } }})

1. drawCanvasBgImg()
2. drawCanvasUserImg (canvas, ctx, dpr)
3. CanvasFillText (Canvas, CTX, DPR, CircleR)
4. ConvertCanvasToImage(Leinwand)

 // Nachdem Sie die Daten erhalten haben, beginnen Sie mit dem Zeichnen des Hintergrundbilds. Die Idee ist sehr einfach: Zeichnen Sie das Bild in die Leinwand, zeichnen Sie dann den Avatar-Text auf die Leinwand und konvertieren Sie ihn in img drawCanvasBgImg () { var vm = this; = document.createElement(canvas); var ctx = canvas.getContext(2d); var clientWidth = this.getWindowInfo().width;//Erhalten Sie die Bildschirmbreite für den adaptiven mobilen Bildschirm der Leinwandbreite dpr = this.getWindowInfo().dpr; ctx.globalCompositeOperation = source-atop;//** Das Aliasing scheint nutzlos, ich weiß nicht, ob es an der falschen Stelle verwendet wird** canvas.width = dpr * clientWidth; //Aufgrund des Mobiltelefonbildschirms wird dieser mehrmals gerendert. Verwenden Sie dpr, um die Leinwandbreite und -höhe dynamisch festzulegen, um unscharfe Bilder zu vermeiden. 375;//Das Entfernen der Statusleiste im WeChat-Header sollte 603 sein. Ich verstehe nicht, dass 603 den Bildschirm immer noch nicht mit Bildern füllen kann, also habe ich es zu 609 hinzugefügt. var img = new Image(); img. crossOrigin = '';//Das Bild der toten Grube überschreitet die Domäne (img.crossOrigin = Anonymous kann immer noch keine Bilder im Base64-Format anzeigen) img.src = http://xxx + this.randomNum + .jpg; img.onload = function () { ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

 //Schneiden Sie einen Kreis auf der Leinwand des Hintergrundbilds aus und füllen Sie ihn mit dem Avatar des Benutzers. width / 2 ;//X-Koordinate des Kreismittelpunkts var CircleY = 50 * dpr;//Y-Koordinate des Kreismittelpunkts var imgX = CircleX - CircleR;//Startkoordinate des Bildes X var imgY = CircleY - CircleR;//Die Startkoordinate des Bildes Y var imgWidth = 2 * CircleR;//Die Größe des Bildes richtet sich nach dem Kreis var img = new Image(); img.crossOrigin = ''; = this.userImg; img .onload = function () { ctx.save(); // Speichern Sie den aktuellen Status von ctx ctx.arc(circleX, CircleY, CircleR, 0, 2 * Math.PI); //Zeichne einen Kreis ctx.clip(); //Zeichne den Kreis darüber ctx.drawImage(img, imgX, imgY, imgWidth, imgWidth); ; //Zustand wiederherstellen vm.canvasFillText(canvas, ctx, dpr, circleR }},

 // Geben Sie den Benutzernamen oder die Benutzernachricht ein userMessageX = dpr * 40; //X-Achsenkoordinate der Benutzernachricht var userMessageY = 0; //Y-Achsenkoordinate der Benutzernachricht var lastSubStrIndex = 0;//String subscript var lineWidth = 0;//Eine Zeilenbreite var allTextWidth = 0;//Alle Zeichenbreite ctx.font = fontSizeThis; // Der Benutzername ist erforderlich, um den Benutzernamen zu schreiben, wenn (this.userName) { userNameY = CircleR * 2.5; ctx.fillStyle = #0094ff ctx.textAlign = 'center'; canvas.width / 2, userNameY); } if (this.userMessage) { userMessageY = userNameY + dpr * 35; // Holen Sie sich die Zeichenbreite für (var i = 0; i < this.userMessage . length; i++) { allTextWidth += ctx.measureText(this.userMessage[i]) // Wenn die Zeichenfolge länger ist als der Canvas-Bereich, brechen Sie die Zeile um if (allTextWidth > canvas.width - 2* userMessageX) { for (var i = 0; i < this.userMessage.length; i++) { lineWidth += ctx. MeasureText(this.userMessage[ i]).width; if (lineWidth > canvas.width - 2*userMessageX) { ctx.textAlign = 'left'; ctx.fillText(this.userMessage.substring(lastSubStrIndex, i), userMessageX, userMessageY += dpr * 25;//Setze Zeilenhöhe lineWidth = 0; lastSubStrIndex = i; Länge - 1) { ctx.fillText(this.userMessage.substring(lastSubStrIndex, i + 1), Benutzernachricht },

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.