WeChat Applet-Canvas generiert Bilder und speichert sie lokal

Vorwort

---

Nachfrageszenario: Wir wissen, dass das WeChat-Applet mit Freunden oder WeChat-Gruppen geteilt werden kann, aber nicht mit Moments geteilt werden kann, daher erfordert das Teilen mit Moments spezielle Let's Damit umgehen. Hier kombinieren wir das Applet mit canvas, um ein benutzerdefiniertes Bild zu generieren und es lokal zu speichern.

Code

---

• wxml-Datei

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

• js Datei

Über CanvasAPI zeichnen

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()

Lokalen Pfad über wx.canvasToTempFilePath abrufen

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

Bilder über wx.saveImageToPhotosAlbum lokal speichern

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

Einfache Renderings

---

Zusammenfassung-Methode von 🎜>

canvas unterstützt nur lokale Bilder und keine Netzwerkbilder, daher habe ich die drawImage-Methode verwendet, um sowohl den Avatar als auch die Hintergrundbilder zu übertragen. getImageInfo

Der durch

erhaltene Avatar ist quadratisch, nicht der erforderliche Kreis. Die userInfo-Methode wird hier verwendet und muss mit clip() und save() kombiniert werden, da dies nicht der Fall ist Nach dem Zuschneiden wird die nächste wiederhergestellt. Alle nachfolgenden Zeichnungen befinden sich in diesem kleinen Bereich. restore()

Dieses Mal

wird die API zur Generierung von QR-Codes nicht verwendet. Interessierte Freunde können es ausprobieren. demoHier ist der Link

Empfohlenes Tutorial: „

JS-Tutorial“

Das obige ist der detaillierte Inhalt vonWeChat Applet-Canvas generiert Bilder und speichert sie lokal. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!