微信小程序-把小程序页面保存至用户相册

前言

生成分享海报！产生这种需求的原因在于目前小程序不支持直接分享到微信朋友圈。但是微信小程序支持通过扫描/长按识别二维码或小程序码图片的方式进入一个小程序首页或小程序中某个特定页面。

wxml

<view class='container'>
  <canvas canvas-id='share'></canvas>
  <view class='save-pic' bindtap='saveImageToPhotosAlbum'>保存图片</view>
</view>

wxss

.save-pic{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  line-height: 98rpx;
  text-align: center;
  font-size: 32rpx;
  color: #fff;
  background-color: #33cccc;
}

canvas{
  width: 320px;
  height: 460px;
  border-radius: 10px;
  box-shadow: 0 2px 18px 0 rgba(0,0,0,0.2);
  margin: 30px auto;
  overflow: hidden;
  background: #fff;
}

js

// pages/poster/poster.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    shareTempFilePath: ''
  },
  // 处理在canvas中，文字不会自己换行的问题
  dealWords: function (options) {
    options.ctx.setFontSize(options.fontSize);//设置字体大小
    var allRow = Math.ceil(options.ctx.measureText(options.word).width / options.maxWidth);//实际总共能分多少行
    var count = allRow >= options.maxLine ? options.maxLine : allRow;//实际能分多少行与设置的最大显示行数比，谁小就用谁做循环次数
    var endPos = 0;//当前字符串的截断点
    for (var j = 0; j < count; j++) {
      var nowStr = options.word.slice(endPos);//当前剩余的字符串
      var rowWid = 0;//每一行当前宽度  
      if (options.ctx.measureText(nowStr).width > options.maxWidth) {//如果当前的字符串宽度大于最大宽度，然后开始截取
        for (var m = 0; m < nowStr.length; m++) {
          rowWid += options.ctx.measureText(nowStr[m]).width;//当前字符串总宽度
          if (rowWid > options.maxWidth) {
            if (j === options.maxLine - 1) { //如果是最后一行
              options.ctx.fillText(nowStr.slice(0, m - 1) + '...', options.x, options.y + (j + 1) * 24);  //(j+1)*18这是每一行的高度    
            } else {
              options.ctx.fillText(nowStr.slice(0, m), options.x, options.y + (j + 1) * 24);
            }
            endPos += m;//下次截断点
            break;
          }
        }
      } else {//如果当前的字符串宽度小于最大宽度就直接输出
        options.ctx.fillText(nowStr.slice(0), options.x, options.y + (j + 1) * 24);
      }
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    let promise1 = new Promise(function (resolve, reject) {
      /* 获得要在画布上绘制的图片 */
      wx.getImageInfo({
        src: '../img/poster-pic.png',
        success: function (res) {
          resolve(res);
        }
      })
    });
    let promise2 = new Promise(function (resolve, reject) {
      wx.getImageInfo({
        src: '../img/qrCode.png',
        success: function (res) {
          resolve(res);
        }
      })
    });

    /* 图片获取成功才执行后续代码 */
    Promise.all(
      [promise1, promise2]
    ).then(res => {
      /* 创建 canvas 画布 */
      const ctx = wx.createCanvasContext('share');
        // 绘制矩形
      ctx.fillStyle="#fff";
      ctx.fillRect(0, 320, 320, 140);

      ctx.setStrokeStyle("#33cccc");
      ctx.setLineWidth(0.5);
      ctx.rect(220, 330, 70, 70);

      /* 绘制图像到画布  图片的位置你自己计算好就行 参数的含义看文档 */
      ctx.drawImage('/' + res[0].path, 0, 0, 320, 320);
      ctx.drawImage('/' + res[1].path, 225, 335, 60, 60);

    
      /* 绘制文字 位置自己计算 参数自己看文档 */      
      ctx.setFillStyle('#323232');                       //  颜色
      var name = '灵眸OSMO+手机云台租赁手机云台租赁';
      this.dealWords({
        ctx: ctx,//画布上下文
        fontSize: 16,//字体大小
        word: name,//需要处理的文字
        maxWidth: 180,//一行文字最大宽度
        x: 10,//文字在x轴要显示的位置
        y: 325,//文字在y轴要显示的位置
        maxLine: 3//文字最多显示的行数
      })

      ctx.setFontSize(12);  
      ctx.setFillStyle('#646464');     
      ctx.fillText('微信长按小程序码', 205, 420);     
      ctx.fillText('开启你的找租旅途', 205, 440); 

      ctx.setFontSize(16)   
      ctx.setFillStyle('#f17229');
      ctx.fillText('￥20元/天', 10, 430)         //  内容

      /* 绘制 */
      ctx.stroke();
      ctx.draw(false, this.getTempFilePath);
    })
  },
  //获取临时路径
  getTempFilePath: function () {
    wx.canvasToTempFilePath({
      canvasId: 'share',
      success: (res) => {
        this.setData({
          shareTempFilePath: res.tempFilePath
        })
      }
    })
  },
  //保存至相册
  saveImageToPhotosAlbum: function () {
    if (!this.data.shareTempFilePath) {
      wx.showModal({
        title: '提示',
        content: '图片绘制中，请稍后重试',
        showCancel: false
      })
    }
    wx.saveImageToPhotosAlbum({
      filePath: this.data.shareTempFilePath,
      success: (res) => {
        setTimeout(function () {
          wx.navigateTo({
            url: '../new-store-detail/new-store-detail',
          })
        }, 3000);
      },
      fail: (err) => {
        console.log(err)
      }
    })
  }
})

最终结果如图所示：

赏

谢谢你请我吃糖果