微信小程序开发之保存图片

由于小程序不能直接分享到朋友圈，因此需要用户手动生成二维码图片并保存到本地相册，然后分享到朋友圈。

简书封面.png

一、效果图

二、原理
通过canvas绘图，把图片以及文字绘在canvas上面，再通过wx.canvasToTempFilePath()生成图片并把绘制的图片路径保存到一个变量，然后通过wx.saveImageToPhotosAlbum()把这张图片保存到本地相册。

三、疑难点
1、在demo中我们需要控制canvas的显示和隐藏，如果使用了display:none那么将无法进行绘制，如果用opactiy:0在开发者工具可以达到目的效果，在真机测试上无效。这时我们可以通过控制top值这个小技巧来解决(T_T想了好久)
2、适配问题，canvas以px为单位，我们需要把它转换为rpx来适应各种屏幕大小。通过wx.getSystemInfo()来获取当前设备信息，这里需要获取的是屏幕宽度和高度，它们的转换关系是（屏幕宽度 / 750）* canvas的宽度、（屏幕高度 / 1334）* canvas的高度。
3、生成图片模糊问题，在wx.canvasToTempFilePath()中设置destWidth和destHeight的大小为实际图片的2倍以上即可。

四、重点代码

<!--canvas不能用display:block和none 设置样式opacity为0真机无效 因此设置top位置在屏幕外面即可-->
<canvas canvas-id="myCanvas" class="{{isOpacity == true?'topScroll':''}}"></canvas>

/*canvas宽高*/
canvas{
  width: 600rpx;
  height: 750rpx;
  position: fixed;
  left: 75rpx;
  top: 50%;
  margin-top: -435rpx;
}
/*控制canvas显示和隐藏 top值要大 要保证能溢出到屏幕外面*/
.topScroll{
  position: absolute;
  top: -2000rpx;
}

//获取当前设备屏幕宽高 在onLoad生命周期里执行
onLoad: function (){
    var that = this;
    wx.getSystemInfo({
      success(res) {
        console.log(res);
        console.log(res.windowWidth);
        console.log(res.windowHeight);
        that.setData({
          deviceWidth: res.windowWidth,
          deviceHeight: res.windowHeight
        })
      }
    })
  }

//生成图片 
showImg:function (){
    var that = this;
    const ctx = wx.createCanvasContext('myCanvas');
    var imgPath = '../../images/cat.jpg';
    var imgUserPath = '../../images/user.png';
    var code = '../../images/code.jpg';
    //绘制图像到画布 x y width height
    ctx.drawImage(imgPath, 0, 0, (that.data.deviceWidth / 750) * 600, (that.data.deviceHeight / 1334) * 500);
    ctx.setFillStyle('white')
    //创建一个矩形
    ctx.fillRect(0, (that.data.deviceHeight / 1334) * 500, (that.data.deviceWidth / 750) * 600, (that.data.deviceHeight / 1334) * 350);
    //绘制图像到画布
    ctx.drawImage(imgUserPath, (that.data.deviceWidth / 750) * 30, (that.data.deviceHeight / 1334) * 530, (that.data.deviceWidth / 750) * 120, (that.data.deviceWidth / 750) * 120)

    //创建文字
    ctx.setFontSize((that.data.deviceWidth / 750) * 30)
    ctx.setFillStyle('#333333')
    //文案 x y
    ctx.fillText('毕竟1米八', (that.data.deviceWidth / 750) * 170, (that.data.deviceHeight / 1334) * 590)

    ctx.setFontSize((that.data.deviceWidth / 750) * 25)
    ctx.setFillStyle('#666666')
    ctx.fillText('Web前端攻城狮', (that.data.deviceWidth / 750) * 170, (that.data.deviceHeight / 1334) * 630)

    ctx.setFontSize((that.data.deviceWidth / 750) * 22)
    ctx.setFillStyle('#999999')
    ctx.fillText('长按识别图中二维码增加好友', (that.data.deviceWidth / 750) * 30, (that.data.deviceHeight / 1334) * 710)

    //绘制图像到画布
    ctx.drawImage(code, (that.data.deviceWidth / 750) * 470, (that.data.deviceHeight / 1334) * 540, (that.data.deviceWidth / 750) * 100, (that.data.deviceWidth / 750) * 100)
    //渲染
    ctx.draw()

    //需要把canvas转成图片后才能保存
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 600,
      height: 750,
      destWidth: 1200,  //2倍关系
      destHeight: 1500, //2倍关系
      canvasId: 'myCanvas',
      success: function (res) {
        console.log(res.tempFilePath);
        that.setData({
          //关键 赋值给变量
          shareImgSrc: res.tempFilePath
        })
      },
      fail: function (res) {
        console.log(res)
      }
    })
}

//保存图片 
  saveImg: function (){
    var that = this;
    wx.saveImageToPhotosAlbum({
      //shareImgSrc为canvas赋值的图片路径
      filePath: that.data.shareImgSrc,
      success(res) {
        console.log(res);
        wx.showModal({
          title: '保存成功',
          content: '图片成功保存到相册了，去发圈噻~',
          showCancel: false,
          confirmText: '确认',
          confirmColor: '#21e6c1',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定');
            }
          }
        })
      }
  }

好了，大功告成！