前言

在小程序中，我們是不能直接分享到朋友圈中的，但是我們可以繪制海報并保存到相冊，然后再分享到朋友圈來實現。如下圖：

canvas繪制海報.jpg

實現步驟

• 生成動態(tài)小程序碼
• canvas繪制圖像
• 將圖像生成成圖片
• 保存到相冊

實現代碼

• canvas.wxml

<!--pages/canvas/canvas.wxml-->
<view class="container">
  <canvas canvas-id="posterCanvas" style="width:280px;height:450px;"></canvas>
  <view bindtap="savePoster">保存海報</view>
</view>

• canvas.js

//canvas/canvas.js
Page({
  data: {
    code: '/pages/images/code.png', //如果是服務器圖片一定要先下載到本地
    imgSrc: ''
  },
  onLoad() {
    //此處可以結合我上一篇文章，在生成動態(tài)小程序碼內調用canvasPoster(headImg); 
    this.canvasPoster(this.data.code);
  },
  canvasPoster(code) { //canvas繪制圖片，code是動態(tài)小程序碼，可看我上一篇文章
    let ctx = wx.createCanvasContext('posterCanvas', this);
    ctx.setFillStyle('white');
    ctx.fillRect(0, 0, 280, 450);
    ctx.setFontSize(14);
    ctx.setFillStyle('#ed4b33');
    ctx.fillText('用戶名', 50, 40);
    ctx.setFillStyle('#41302C');
    ctx.fillText('標題', 15, 75);
    ctx.drawImage('/pages/images/banner.png', 15, 90, 250, 200);
    //動態(tài)生成的小程序碼（ps：網絡圖片一定要先下載到本地）
    ctx.drawImage(code, 110, 300, 60, 60);
    ctx.setFontSize(10);
    ctx.setFillStyle('#999');
    ctx.setTextAlign('center');
    ctx.fillText('關注【******】小程序', 140, 390);
    ctx.fillText('瀏覽更多精彩內容', 140, 410);
    ctx.setFillStyle('white');
    ctx.save();
    ctx.beginPath();
    ctx.arc(30, 35, 15, 0, 2 * Math.PI);
    ctx.clip();
    ctx.drawImage('/pages/images/head.png', 15, 20, 30, 30); //頭像我是用的本地圖片
    ctx.restore();
    ctx.draw(false, () => {
      wx.canvasToTempFilePath({ //將canvas生成圖片
        width: 280,
        height: 450,
        canvasId: 'posterCanvas',
        fileType: 'png',
        success: (canvasImgRes) => {
          this.setData({
            imgSrc: canvasImgRes.tempFilePath
          });
        }
      }, this);
    })
  },
  savePoster() {
    wx.saveImageToPhotosAlbum({
      filePath: this.data.imgSrc, //圖片路徑
      success(res) {
        wx.showModal({
          title: '保存成功',
          content: '圖片成功保存到相冊了，去轉發(fā)嘍~',
          showCancel: false,
          confirmText: '好噠',
          confirmColor: '#72B9C3',
          success(res) {
            if (res.confirm) {
              console.log('用戶點擊確定');
            }
          }
        })
      }
    })
  }
})