Heim > Artikel > Web-Frontend > 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
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()
wird die API zur Generierung von QR-Codes nicht verwendet. Interessierte Freunde können es ausprobieren. demo
Hier ist der Link
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!