微信小程序canvas绘制海报并保存本地相册

在做微信小程序电商项目中，想要分享一款商品，使用最多并且最简便的方法就是使用小程序自带的分享api进行分享，但是分享出去的页面比较难看；

        另一种方法就是自己使用小程序canvas绘制分享的海报，这个海报可以保存在相册里，而且可以按照自己的需求效果进行页面绘制。

 前提准备：

1、一张海报背景图、商品图片、长按识别小程序码，这三个图片必须是线上图片，然后使用wx.downloadFile将线上地址转化成本地地址，不然会导致真机不显示的问题；

2、域名配置，图片所涉及的域名一定要在小程序后台进行配置，开发的过程中虽然可以配置不校验域名，但是真正上线测试的时候一定要记得配置，不然在测试的时候会发现总是需要你去打开调试模式，有点烦人；

代码：

<view class="btn" bindtap="clickMe">点我生成海报</view>

<view wx:if="{{ show }}" class="canvas-box">

  <canvas style="width: {{ windowW }}px; height: {{ windowH }}px;" canvas-id="firstCanvas"></canvas>

  <view bindtap="daochu" class="btnSave">点击保存</view>

</view>

.btn{

  text-align: center;

  margin-top: 300rpx;

}

.canvas-box{

  background: #999999;

  position: fixed;

  top: 0;

}

.btnSave{

  z-index: 11111;

  font-size: 26rpx;

  background: #564d60;

  color: #ffffff;

  width: 200rpx;

  height: 70rpx;

  line-height: 70rpx;

  border-radius: 10rpx;

  text-align: center;

  position: absolute;

  bottom: 5rpx;

  left: 50%;

  margin-left: -100rpx;

}

 js逻辑思路：

1、在data中默认show为false，目的是解决canvas-box遮挡 “点我生成海报” 按钮，因为 canvas-box 样式设置了position: fixed;top:0;

2、当页面加载的时候获取设备的屏幕宽高，目的是为了让海报背景能始终居中于设备中心，后面绘制画布的时候会看到元素的位置几乎都用设备宽高进行了计算；同时，将线上图片url转换为本地地址，我的图片都是网上找的，如果真正项目要用的话，使替换成后台返回的图片路径即可；

3、点击 "点我生成海报" 按钮，调用 clickMe 方法，开始绘制海报；

4、海报绘制函数中调用了 newLine(text, context) ，目的值设置多文字折行功能；

5、点击 "点击保存" 按钮，触发daochu( )方法，使用wx.canvasToTempFilePath将画布生成指定大小的图片；

6、接5，生成成功后调用eventSave( )进行图片本地保存，使用的api是wx.saveImageToPhotosAlbum；

温馨提示：

js代码有点多，如果懒得看的童鞋们，不妨直接将代码下载下来在本地进行测试：

https://github.com/chenlun1000/wxCanvas.git

Page({

  /**

   * 页面的初始数据

   */

  data: {

    show: false

  },

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {

    var that = this

    // 获取设备宽高，以备海报全屏显示

    wx.getSystemInfo({

      success: function (res) {

        that.setData({

          windowW: res.windowWidth,

          windowH: res.windowHeight

        })

      },

    })

    // 海报背景图线上地址

    var url = 'https://shop-1256250812.cos.ap-beijing.myqcloud.com/%E7%99%BD%E8%89%B2%E8%83%8C%E6%99%AF%E5%9B%BE.png'

    // 商品图片（哪吒头像）线上地址

    var urll = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000