小程序生成图片分享朋友圈

前言

在小程序中，我们是不能直接分享到朋友圈中的，但是我们可以绘制海报并保存到相册，然后再分享到朋友圈来实现。如下图：

canvas绘制海报.jpg
动态生成小程序码上一篇文章已经说过了，没看的同学可以点击前往

实现步骤

• 生成动态小程序码
• 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() {
    //此处可以结合我上一篇文章，在生成动态小程序码内调用canvasPoster(headImg); 
    this.canvasPoster(this.data.code);
  },
  canvasPoster(code) { //canvas绘制图片，code是动态小程序码，可看我上一篇文章
    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);
    //动态生成的小程序码（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: '图片成功保存到相册了，去转发喽~',
          showCancel: false,
          confirmText: '好哒',
          confirmColor: '#72B9C3',
          success(res) {
            if (res.confirm) {
              console.log('用户点击确定');
            }
          }
        })
      }
    })
  }
})