ホームページ > ウェブフロントエンド > jsチュートリアル > WeChat アプレット キャンバスは画像を生成し、ローカルに保存します

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

hzc
リリース: 2020-06-13 17:37:55
転載
3214 人が閲覧しました

序文


需要シナリオ: 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(&#39;myCanvas&#39;);
//绘制背景图
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(&#39;center&#39;)
ctx.setFillStyle(&#39;#fff&#39;)
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: &#39;myCanvas&#39;,
    success: function (res) {
        console.log(res.tempFilePath);
    }
})
ログイン後にコピー

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

wx.saveImageToPhotosAlbum({
    filePath: tempFilePath,//canvasToTempFilePath返回的tempFilePath
    success: (res) => {
        console.log(res)
    },
    fail: (err) => {}
})
ログイン後にコピー

簡単なレンダリング


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

概要

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

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

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

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

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

関連ラベル:
ソース:juejin.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート