L'applet-canvas WeChat génère des images et les enregistre localement

Avant-propos

---

Scénario de demande : nous savons que l'applet WeChat peut être partagée avec des amis ou des groupes WeChat, mais ne peut pas être partagée avec Moments, donc le partage avec Moments nécessite des Let's spéciaux traitons-le. Ici, nous combinons l'applet avec canvas pour générer une image personnalisée et l'enregistrer localement.

Code

---

• fichier wxml

<view>
    <button type="default" size="defaultSize" bindtap="exportImg">生成图片</button>
</view>
<canvas canvas-id="myCanvas"></canvas>

• js Fichier

Dessiner via canvasAPI

const ctx = wx.createCanvasContext('myCanvas');
//绘制背景图
ctx.drawImage(res.path, 0, 0, screenWidth, 500);
//绘制背景图上层的头像
ctx.save();
ctx.arc(100, 100, 30, 0, 2 * Math.PI);
ctx.clip();
ctx.drawImage(avatarUrl, 50, 50, 110, 110);//根据微信getUserInfo接口获取到用户头像
ctx.restore();
//绘制文字
ctx.setTextAlign('center')
ctx.setFillStyle('#fff')
ctx.setFontSize(16)
ctx.fillText(userInfo.nickName, 100, 180)//用户昵称
ctx.stroke()
ctx.draw()

Obtenir le chemin local via wx.canvasToTempFilePath

wx.canvasToTempFilePath({
    x: 0,
    y: 0,
    width: 300,
    height: 500,
    canvasId: 'myCanvas',
    success: function (res) {
        console.log(res.tempFilePath);
    }
})

Enregistrez les images en local via wx.saveImageToPhotosAlbum

wx.saveImageToPhotosAlbum({
    filePath: tempFilePath,//canvasToTempFilePath返回的tempFilePath
    success: (res) => {
        console.log(res)
    },
    fail: (err) => {}
})

Rendu simples

---

Résumé méthode de 🎜>

canvas ne prend en charge que les images locales et ne prend pas en charge les images réseau, j'ai donc utilisé la méthode drawImage pour transférer à la fois l'avatar et les images d'arrière-plan. getImageInfo

L'avatar obtenu via

est carré, pas le cercle requis. La méthode userInfo est utilisée ici, et elle doit être combinée avec clip() et save(), car si ce n'est pas le cas. restauré après le recadrage, tous les dessins suivants seront dans cette petite zone. restore()

Cette fois

l'API de génération de codes QR n'est pas utilisée. Les amis intéressés peuvent l'essayer. demoVoici le lien

Tutoriel recommandé : "

Tutoriel JS"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!