小程序生成图片分享朋友圈怎么实现

实现步骤

• 生成动态小程序码

• canvas绘制图像

• 将图像生成成图片

• 保存到相册

• 实现代码

canvas.wxml

  
  保存海报

canvas.js

//canvas/canvas.jsPage({
  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('用户点击确定');
            }
          }
        })
      }
    })
  }})