WeChat アプレット キャンバスは画像を生成し、ローカルに保存します

序文

---

需要シナリオ: WeChat アプレットは友人や WeChat グループと共有できるが、Moments と共有できないことはわかっています。そのため、Moments と共有するには特別な「Let's」が必要です。ここでは、アプレットと canvas を組み合わせてカスタム画像を生成し、ローカルに保存します。

コード

---

• wxml ファイル

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

• jsファイル

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

wx.canvasToTempFilePath を介してローカル パスを取得します

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

wx.saveImageToPhotosAlbum を通じて画像をローカルに保存します

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

簡単なレンダリング

---

概要

canvas の drawImage メソッドはローカル画像のみをサポートし、ネットワーク画像をサポートしないため、getImageInfo メソッドを使用して両方のアバターを転送しましたと背景画像。

userInfo を通じて取得されたアバターは正方形であり、必要な円ではありません。ここでは clip() メソッドが使用されており、save( ) と restore()。トリミング後に復元しないと、次の描画がその小さな領域に入るからです。

この デモ では QR コードの生成に API を使用していません。興味のある友人は試してみてください。 リンクはこちらです

推奨チュートリアル:「JS チュートリアル 」

以上がWeChat アプレット キャンバスは画像を生成し、ローカルに保存しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。