HTML5-Leinwandzeichnung des WeChat-Applets und im Systemalbum gespeichert

Bevor wir mit der Implementierung beginnen, werfen wir einen Blick auf die Renderings.

1. Netzwerkbilder müssen zuerst mit einem Download-Domänennamen konfiguriert werden, der über wx.getImageInfo in einen temporären Pfad konvertiert werden kann;

2. Aufgrund persönlicher Gewohnheiten bin ich es gewohnt, die Async-Await-Syntax zu verwenden, daher muss ich die Regenerator-Bibliothek vorstellen. Die Verwendungsmethode kann online überprüft werden.

/datas/common.js

 //Kapseln Sie die WeChat-Bildinformationen. export const getWxImageInfo = (imgPath) => { return new Promise((resolve, depend) => { wx.getImageInfo({ src: imgPath, success: res => {solve(res) }, fail: res => {reject (res) } }) })}// Kapselt das Abrufen von Knotenauswahlinformationen export const getSelectQurey = (queryStr) => { return new Promise(resolve => { var query = wx.createSelectorQuery(); query.select(queryStr).boundingClientRect(); query.exec(res => { discover(res) }) })}// Das Paket exportiert die Leinwand, um ein Bild einer bestimmten Größe zu generieren export const canvasToTempFilePath = (width, height, canvasId, fileType = 'jpg') => { return new Promise((resolve) } }) })}//Bilder kapseln und im Systemalbum speichern export const saveImageToPhotosAlbum = (filePath) => { return new Versprechen((auflösen, ablehnen) => { wx.saveImageToPhotosAlbum({ filePath, success: res => { auflösen(res) }, fail: res => { ablehnen(res) } }) })}

.wxml

 <view class=icon-download Catchtap=getCanvas>Klicken, um Bild zu generieren</view><!-- Großes QR-Code-Bild--><view class='shade' wx:if={{isShowCanvas}}> <view class ='qr-code'> <canvas class='qr-canvas' canvas-id=qrCanvas id=qrCanvas></canvas> <view class='qr-btn'> <view class='qr-btn-save' Catchtap='saveImageToPhotosAlbumFunc'>Bild speichern und an Freunde weitergeben</view> <view class='qr-btn-cancel' Catchtap='hideCanvas'>Abbrechen</view> < /view view> </view></view><!-- QR-Code großes Bild.end -->

.wxss

 /* Großes Bild anzeigen */.shade { Breite: 100 %; Hintergrundfarbe: rgba(240, 235, 0,5); Position: fest; : 0;}.qr-code { width: 600rpx; height: 1000rpx; absolut; oben: 50%; transform: Translate(-50%, -50%); ; margin: 0 auto; width: 600rpx;}.qr-btn { width: 600rpx; 100rpx; Zeilenhöhe: 0 auto; Schriftgröße: #658dc5;}.qr-btn-save {flex: 0 500rpx; -align: Mitte; Rand rechts: 1rpx fest #fff;}.qr-btn-cancel { text-align: center; flex: 0 0 100rpx;}

Tipps

Das Produktbild ist quadratisch, daher basieren Breite und Höhe des Produktbildes hier auf der Breite der Leinwand. Der Text kann nicht umbrochen werden.

Hinweis: Das Dokument enthält einen Satz, auf den Sie achten müssen, wenn Sie wx.canvasToTempFilePath(Object object, Object this) verwenden: Exportieren Sie den Inhalt des angegebenen Bereichs der aktuellen Leinwand, um ein Bild der angegebenen Größe zu generieren . Nur durch den Aufruf dieser Methode im draw()-Rückruf kann das Bild erfolgreich exportiert werden.

 const app = getApp()const regeneratorRuntime = app.globalData.regeneratorRuntimeconstconst util = require('../../utils/util.js')import { getSelectQurey, getWxImageInfo, canvasToTempFilePath, saveImageToPhotosAlbum} from '../../ datas/common.js'Page({ data: { isShowCanvas: false, // Ob Leinwand angezeigt werden soll wxaCode: 'https://xxx..jpg', // Produkt-Applet-CodegoodsImageUrl: 'https://xxx..jpg', // Produktbild canvasTempFilePath: '', //Canvas exportiert den temporären Pfad zum Generieren von Bildern}, //Klicken Sie, um die zu generierende Leinwand anzuzeigen getCanvas(e) { if (!this.data.wxaCode) { util.showToast('QR-Code-Generierung fehlgeschlagen'); return; } this.setData({ isShowCanvas: true }, () => { this.createCanvas(); }) }, // Leinwand ausblenden hideCanvas() { this . setData({ isShowCanvas: false }) }, // Canvas asynchron erstellen createCanvas() { wx.showLoading({ title: 'Bild wird generiert...' }) const _this = this // Einen Knotenselektor erstellen const res = waiting getSelectQurey('#qrCanvas'); // Die Breite und Höhe der Leinwand const cvWidth = res[0].width = res[0] .height; const cvSubValue = cvHeight - cvWidth const qrWidth = cvSubValue / 1,5 const qrMargin = (cvSubValue - qrWidth) / 2 const qrX = cvWidth - qrWidth - qrMargin / 2 const qrY = cvWidth + qrMargin const shopNameY = cvWidth + cvSubValue - qrWidth // QR-Code-Netzwerkbild zum temporären Pfad let qrImagePath = ''; versuchen { const wxaCode = _this.data.wxaCode; const qrImage = waiting getWxImageInfo(wxaCode); failed'); return; } // Produktnetzwerkbilder zum temporären Pfad let goodsImagePath = '/images/default_goods.png'; constgoodsImage = _this.data.goodsImageUrl; if (goodsImage) {constgoodsImageRes = waiting getWxImageInfo(goodsImage); } // Canvas erstellen var ctx = wx.createCanvasContext('qrCanvas', _this); // Legen Sie den Hintergrund fest ctx.setFillStyle('#fff'); ctx.fillRect(0, 0, cvWidth, cvHeight); // Legen Sie die Breite und Höhe des Produktbilds fest gleich sein ctx.drawImage(goodsImagePath, 0, 0, cvWidth, cvWidth); Setze das QR-Code-Bild ctx.drawImage(qrImagePath, qrX, qrY, qrWidth, qrWidth); // Setze den Shop-Namen const shopName = 'Ich bin der Shop-Name'; ctx.setFillStyle('black') ctx.setFontSize(16 ) ctx .setTextAlign('left') ctx.fillText(shopName, 10, shopNameY, cvWidth); // Legen Sie den Produktnamentext so fest, dass er nicht umbrochen werden kann. const wereName = 'Ein Produkt mit einem sehr langen Namen wird Sie fragen, ob Sie Angst haben.' warenName1 = ''; let warenName2 = ''; ctx.setFillStyle('black') ctx.setFontSize(14) ctx.setTextAlign('left') if (goodsName.length <= 10) { ctx.fillText(goodsName, 10, shopNameY + 30, cvWidth - qrWidth); 0, 10); warenName2 = warenName.substring(10); ctx.fillText(goodsName1, 10, shopNameY + 30, cvWidth - qrWidth); ctx.fillText(goodsName2, 10, shopNameY + 50, cvWidth - qrWidth); warenName.substring(10, 22) + '...'; ctx.fillText(goodsName1, 10, shopNameY + 30, cvWidth - qrWidth); ctx.fillText(goodsName2, 10, shopNameY + 50, cvWidth - qrWidth); Klicken Sie auf das Identifizierungs-Applet und geben Sie jetzt eine Bestellung auf! '; ctx.setFillStyle('gray') ctx.setFontSize(8) ctx.setTextAlign('center') ctx.fillText(tipText, cvWidth / 2, cvHeight - 10); // Vollständig ctx.draw(false, () => { wx.hideLoading(); _this.canvasToTempFilePathFunc(cvWidth, cvHeight, 'qrCanvas') } }, // Den Inhalt des angegebenen Bereichs der aktuellen Leinwand exportieren, um ein Bild der angegebenen Größe zu generieren async canvasToTempFilePathFunc(cvWidth, cvHeight, qrCanvas) { try { let res = waiting CanvasToTempFilePath( cvWidth, cvHeight, qrCanvas); this.setData({ canvasTempFilePath: res.tempFilePath }); Catch (error) { console.log(error); util.showToast(error.errMsg); ( ) { try { let res = warten saveImageToPhotosAlbum(this.data.canvasTempFilePath); this.hideCanvas(); util.showToast('Bild erfolgreich gespeichert');

Das Schreiben ist relativ einfach, da es hauptsächlich meiner Bequemlichkeit beim Aufzeichnen dient und daher nicht zu viele Nutzungsszenarien berücksichtigt.

Das Obige ist die vom Herausgeber eingeführte und im Systemalbum gespeicherte HTML5-Leinwandzeichnung. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen antworten Zeit!