初识小程序 填坑之路（二）

因为我是bug体质，所以才来写博客。

小程序生成带有小程序码的图片，分享到朋友圈，扫描进入分享页。

1. 绘制画布，导出生成图片。
2. 点击分享按钮，弹出 图片和保存按钮。
3. 点击保存按钮， 保存到相册。

WXML 代码

<button bindtap='alertPic'>分享</button>
<canvas canvas-id="myCanvas" class='canvas'></canvas>
<view hidden='{{change}}' class='canvas-img'>
    <view class='bg-c'>
      <image src='{{canvasImg}}'></image>
      <button bindtap='saveImg' type='warn' size='mini'>保存到相册</button>
    </view>
  </view>

WXSS代码

//因为我也只是写着玩，所以具体的样式我就没写。
.canvas{
  height:750rpx;
  width:550rpx;
  position: fixed;
  left: 0;
  top:9999rpx; 
  background-color:#fff;
}

js 代码

//大概就是这些，其他的data里面的数据就不贴了
 onReady: function () {
    //绘制画布
    var that = this;
    const ctx = wx.createCanvasContext('myCanvas');
    const x = "../../../images/banner.png";
    ctx.drawImage(x, 10, 10, 330, 190);
    ctx.draw()
    ctx.setTextAlign('left');    
    ctx.setFillStyle('#666');  
    ctx.setFontSize(16);        
    ctx.fillText("一分钟了解什么是资产", 10, 240);
    ctx.draw(true)
    ctx.setFillStyle('#F46464');
    ctx.fillText("￥980", 10, 260);
    ctx.draw(true)
    const xcx = "../../../images/111.jpg";
    ctx.drawImage(xcx, 10, 300, 100, 100);
    ctx.draw(true)
    ctx.setFillStyle('#666');
    ctx.setFontSize(14);
    ctx.fillText("长按识别小程序码", 120, 390);
    ctx.draw(true)
    ctx.draw(true,
      // 生成图片
      setTimeout(function () {
        wx.canvasToTempFilePath({
          canvasId: 'myCanvas',
          fileType: 'jpg',
          success: function (res) {
            console.log(res.tempFilePath)
            that.setData({
              canvasImg: res.tempFilePath
            })
          },
        })
      }, 1000)
    );
  },

 // 点击保存按钮 存到本地
  saveImg: function () {
    var that = this;
    wx.getImageInfo({
      src: this.data.canvasImg,
      success: function (res) {
        wx.saveImageToPhotosAlbum({
          filePath: res.path,
          success(res) {
            wx.showToast({
              title: '图片保存成功',
              icon: 'success',
              duration: 2000
            });
            that.setData({
              change: 'true'
            })
          },
        })
      }
    })

需要注意的几点： 具体原因，我要不要写呢？

1. canvas不要用hidden，用position定位到看不见的地方。
2. 绘制画布不要放在onload中，放在onready里面，最开始看着文档来的，最后导出图片失败。
3. wx.canvasToTempFilePath导出图片时，一直不能显示canvas绘制的图片，加了一个setTimeout搞定。
4. 点击保存到相册时wx.saveImageToPhotosAlbum不能直接使用网络地址，从 wx.getImageInfo里面取。