微信小程序保存【朋友圈图片】

版权声明： https://blog.csdn.net/XiaoYi0215/article/details/83177286

// 分享页js

Page({
  /** 页面的初始数据 */
  data: {
    cvBgPath: '../../images/bg_canvas.png', // 画布背景图
    cvQRCodeTip: '微信内长按识别小程序码' // 程序码右侧提示文字
  },
  /** 生命周期函数--监听页面加载 */
  onLoad: function (options) {},

  /*** canvas 文字换行 */
  textByteLength(text, num) { // text为传入的文本 num为单行显示的字节长度
    let strLength = 0; // text byte length
    let rows = 1;
    let str = 0;
    let arr = [];
    for (let j = 0; j < text.length; j++) {
      if (text.charCodeAt(j) > 255) {
        strLength += 2;
        if (strLength > rows * num) {
          strLength++;
          arr.push(text.slice(str, j));
          str = j;
          rows++;
        }
      } else {
        strLength++;
        if (strLength > rows * num) {
          arr.push(text.slice(str, j));
          str = j;
          rows++;
        }
      }
    }
    arr.push(text.slice(str, text.length));
    return [strLength, arr, rows] // [处理文字的总字节长度，每行显示内容的数组，行数]
  },
  /** 绘图 */
  drawCanvas: function (cvQRCodePath) {
    var that = this;
    const ctx = wx.createCanvasContext('myITCanvas')
    // 背景图
    ctx.drawImage(that.data.cvBgPath, 0, 0, 800, 1486)
    // 文字-title 
    /**
       写到画布上的参数 是你获取到的数据赋值，如：
       已获取good对象 title即可写成 that.data.good.title
       其他同理 我这里省略写成 title，price... 
       绘制位置偏移根据自己需求更改
    */
    let [contentLeng, contentArray, contentRows] = that.textByteLength(title, 33)
    ctx.setTextAlign('left')
    ctx.setFillStyle('#000')
    ctx.setFontSize(40)
    let contentHh = 40 * 1.5;
    for (let m = 0; m < contentArray.length; m++) {
      ctx.fillText(contentArray[m], 80, 70 + contentHh * m)
    }
    // 文字-price
    ctx.setFillStyle('red')
    ctx.setFontSize(40)
    ctx.fillText(price, 280, 142 + contentHh)

    // 文字-origin
    ctx.setFillStyle('#676767')
    ctx.setFontSize(28)
    ctx.fillText(origin, 220, 216 + contentHh)

    // 二维码-图片
    ctx.drawImage(cvQRCodePath, 56, (25 + 800 + 260 + contentHh), 290, 290)

    // 程序码提示-文字2
    ctx.setFillStyle('#000')
    ctx.setFontSize(32)
    ctx.fillText(that.data.cvQRCodeTip, 404, (209 + 800 + 260 + contentHh))
     
    ctx.draw()
  },
  /** 保存朋友圈图片 */
  makeCvPhoto: function () {
    var that = this;
    wx.showLoading({
      title: '正在生成....'
    });
    wx.downloadFile({ // 通过接口获取二维码
      url: '你的接口路径',
      header: {
        'content-type': 'application/json',
        'cookie': '// 博主个人项目需要已省略...'
      },
      success: function (res) {
        // 成功-调用绘图方法，将返回值的路径当做绘图参数传入
        that.drawCanvas(res.tempFilePath);
        // 使用延迟为了防止生成空白图
        setTimeout(function () {
          wx.canvasToTempFilePath({ // 保存
            canvasId: 'myITCanvas', // 绘制参数可根据自己需要修改-与上面创建canvasid一致
            destWidth: 800, // 绘制参数可根据自己需要修改
            destHeight: 1486,  // 绘制参数可根据自己需要修改
            fileType: 'png',  // 绘制参数可根据自己需要修改
            success: function (res) { // 保存路径到相册
              wx.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success(res) {
                  wx.hideLoading();
                  wx.showToast({
                    title: '保存成功'
                  });
                },
                fail() {
                  wx.hideLoading();
                  wx.openSetting();
                }
              })
            }
          })
        }, 500)
      }
    })
  }
})

如有疑问或者建议可直接回复，若不能及时处理，可加博主QQ791758820 交流。【建议】小伙伴们在开发小程序遇到问题时可先去小程序官方社区进行解答，里面有很多问题就算不能解决掉你的问题，但大多数是可以提供思路的。