Dessin sur toile HTML5 de l'applet WeChat et enregistré dans l'album système

Avant de commencer à l’implémenter, jetons un œil aux rendus.

1. Les images réseau doivent d'abord être configurées avec un nom de domaine de téléchargement, qui peut être converti en chemin temporaire via wx.getImageInfo ;

2. En raison d'habitudes personnelles, j'ai l'habitude d'utiliser la syntaxe d'attente asynchrone, je dois donc présenter la bibliothèque du régénérateur. La méthode d'utilisation peut être vérifiée en ligne.

/datas/common.js

 //Encapsuler les informations de l'image WeChat. export const getWxImageInfo = (imgPath) => { return new Promise((resolve, rejet) => { wx.getImageInfo({ src: imgPath, success: res => { solve(res) }, fail: res => { rejet (res) } }) })}// Encapsule l'obtention des informations du sélecteur de nœud export const getSelectQurey = (queryStr) => { return new Promise(resolve => { var query = wx.createSelectorQuery(); query.select(queryStr).boundingClientRect(); query.exec(res => { solve(res) }) })}// Le package exporte le canevas pour générer une image d'une taille spécifiée export const canvasToTempFilePath = (width, height, canvasId, fileType = 'jpg') => { return new Promise((resolve, rejet) => { wx.canvasToTempFilePath({ width, height, canvasId, fileType, success: res => { solve(res) }, fail: res => { rejet(res) } }) })}//Encapsuler et enregistrer les images dans l'album système export const saveImageToPhotosAlbum = (filePath) => { return new Promesse((résoudre, rejeter) => { wx.saveImageToPhotosAlbum({ filePath, succès : res => { résoudre(res) }, échec : res => { rejeter(res) } }) })}

.wxml

 <view class=icon-download catchtap=getCanvas>Cliquez pour générer une image</view><!-- Grande image de code QR--><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'>Enregistrez la photo et partagez-la avec vos amis</view> <view class='qr-btn-cancel' catchtap='hideCanvas'>Annuler</view> < /view view> </view></view><!-- QR code grande image.end -->

.wxss

 /* Afficher l'image en grand*/.shade { largeur : 100 % ; hauteur : 100 % ; couleur d'arrière-plan : rgba (240, 235, 235, 0,5); : 0;}.qr-code { largeur : 600rpx ; hauteur : 1000rpx ; couleur d'arrière-plan : #fff ; absolu ; haut : 50 % ; gauche : 50 % ; transformation : traduire (-50 %, -50 %); /* margin : 30rpx auto ; ; marge : 0 auto ; largeur : 600rpx ; hauteur : 900rpx;}.qr-btn { largeur : 600rpx ; 100rpx ; hauteur de ligne : 100rpx ; marge : 0 auto ; taille de police : #fff ; affichage : flex ; couleur d'arrière-plan : #658dc5;}.qr-btn-save { flex : 0 0 500rpx ; -aligner : centre ; bordure droite : 1 rpx solide #fff;}.qr-btn-cancel {text-align: center; flex: 0 0 100rpx;}

conseils

L'image du produit est carrée, donc la largeur et la hauteur de l'image du produit sont basées sur la largeur de la toile. Le texte ne peut pas être enveloppé. Il s'agit simplement d'un processus simple.

Remarque : il y a une phrase dans le document à laquelle vous devez faire attention lors de l'utilisation wx.canvasToTempFilePath(Object object, Object this) : Exportez le contenu de la zone spécifiée du canevas actuel pour générer une image de la taille spécifiée . Ce n'est qu'en appelant cette méthode dans le rappel draw() que l'image peut être exportée avec succès.

 const app = getApp()const regeneratorRuntime = app.globalData.regeneratorRuntimeconstconst util = require('../../utils/util.js')import { getSelectQurey, getWxImageInfo, canvasToTempFilePath, saveImageToPhotosAlbum} de '../../ datas/common.js'Page({ données : { isShowCanvas : false, // Afficher ou non le canevas wxaCode : 'https://xxx..jpg', // Code de l'applet du produit goodImageUrl : 'https://xxx..jpg', // Image du produit canvasTempFilePath : '', //Canvas exporte le chemin temporaire pour générer les images}, //Cliquez pour afficher le canevas à générer getCanvas(e) { if (!this.data.wxaCode) { util.showToast('La génération du code QR a échoué'); return; } this.setData({ isShowCanvas: true }, () => { this.createCanvas(); }) }, // Masquer le canevas hideCanvas() { this . setData({ isShowCanvas : false }) }, // Créer un canevas asynchrone createCanvas() { wx.showLoading({ title : 'L'image est générée...' }) const _this = this // Créer un sélecteur de nœud const res = wait getSelectQurey('#qrCanvas'); // La largeur et la hauteur du canevas const cvWidth = res[0].width; .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 // Image réseau de code QR vers le chemin temporaire, laissez qrImagePath = ''; { const wxaCode = _this.data.wxaCode; const qrImage = wait getWxImageInfo(wxaCode); qrImagePath = qrImage.path } catch (e) { wx.hideLoading(); this.hideCanvas(); failed'); return } // Images du réseau du produit vers le chemin temporaire let goodImagePath = '/images/default_goods.png'; const goodImage = _this.data.goodsImageUrl; if (goodsImage) { const goodImageRes = wait getWxImageInfo(goodsImagePath = goodImageRes.path } // Créer un canevas var ctx = wx.createCanvasContext('qrCanvas', _this); // Définir l'arrière-plan ctx.setFillStyle('#fff'); ctx.fillRect(0, 0, cvWidth, cvHeight); être le même ctx.drawImage(goodsImagePath, 0, 0, cvWidth, cvWidth); Définir l'image du code QR ctx.drawImage(qrImagePath, qrX, qrY, qrWidth, qrWidth); // Définir le nom de la boutique const shopName = 'Je suis le nom de la boutique'; ctx.setFillStyle('black') ctx.setFontSize(16 ) ctx .setTextAlign('left') ctx.fillText(shopName, 10, shopNameY, cvWidth - qrWidth); // Définissez le texte du nom du produit de manière à ce qu'il ne puisse pas être enveloppé. C'est juste un processus simple. const goodName = 'Un produit avec un nom très long vous demandera si vous avez peur'; marchandisesName1 = ''; laissez marchandisesName2 = ''; ctx.setFillStyle('black') ctx.setFontSize(14) ctx.setTextAlign('left') si (goodsName.length <= 10) { ctx.fillText(goodsName, 10, shopNameY + 30, cvWidth - qrWidth); else if (goodsName.length > 10 && GoodsName.length <= 22) {goodsName1 = GoodsName.substring( 0, 10); marchandisesName2 = marchandisesName.substring(10); ctx.fillText(goodsName1, 10, shopNameY + 30, cvWidth - qrWidth); ctx.fillText(goodsName2, 10, shopNameY + 50, cvWidth - qrWidth } else {goodsName1 = GoodsName.substring(0, 10 goodName2); marchandisesName.substring(10, 22) + '...'; ctx.fillText(goodsName1, 10, shopNameY + 30, cvWidth - qrWidth); ctx.fillText(goodsName2, 10, shopNameY + 50, cvWidth - qrWidth); } // Définir la const tipText = 'Long Appuyez sur l'applet d'identification et passez une commande maintenant ! '; ctx.setFillStyle('gray') ctx.setFontSize(8) ctx.setTextAlign('center') ctx.fillText(tipText, cvWidth / 2, cvHeight - 10); => { wx.hideLoading(); _this.canvasToTempFilePathFunc(cvWidth, cvHeight, 'qrCanvas') }); }, // Exporte le contenu de la zone spécifiée du canevas actuel pour générer une image asynchrone de la taille spécifiée CanvasToTempFilePathFunc(cvWidth, cvHeight, qrCanvas) { essayez { let res = wait canvasToTempFilePath( cvWidth, cvHeight, qrCanvas); this.setData({ canvasTempFilePath: res.tempFilePath }); catch (error) { console.log(error); util.showToast(error.errMsg } }, // Enregistrez l'image dans le fichier async local saveImageToPhotosAlbumFunc); ( ) { essayer { let res = attendre saveImageToPhotosAlbum(this.data.canvasTempFilePath); console.log(res); this.hideCanvas(); util.showToast('Image enregistrée avec succès');

L'écriture est relativement simple, car c'est principalement pour ma commodité d'enregistrer, donc elle ne prend pas en compte trop de scénarios d'utilisation.

Ce qui précède est le dessin de toile html5 de l'applet WeChat introduit par l'éditeur et enregistré dans l'album système. J'espère qu'il vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra. temps!