微信小程序-canvas绘制图片

由于小程序无法分享到朋友圈，所以想分享到朋友圈的话，我们只能生成一张海报了。

这时，我们就要用canvas来绘制图片

一、创建canvas容器

// 展示图片，并保存到本地
<view class=\'imagePathBox\' v-if="showPoster">
   <image v-if="imagePath" :src="imagePath" class=\'shengcheng\'></image>
   <view v-if="imagePath == \'\'" class="poster_ing">海报生成中...</view>
   <view class=\'baocun\' @tap=\'baocun\'>保存相册，分享到朋友圈</view>
   <image src="/static/icon_oc_close.png" class="post_close" @tap="closePoster"></image>
</view>
// canvas容器
<view class="canvas-box">
   <canvas  canvas- />
</view>

二、服务端获取小程序二维码

为什么说是服务端获取小程序码呢，因为微信公众平台是不允许将 https://api.weixin.qq.com 域名绑定到服务请求白名单中的

getCode: function() {
  let that = this
  let channelId = compress(app.globalData.channelId)
  let custId = compress(this.custInfo.custId)
  let customId = compress(that.customId)
  let str = channelId + \'/\' + custId + \'/\' + customId
// 这里需要说明下，scene是page后接的参数，而且有效长度为32位，超过是无法生码的，所以一定要控制长度
  // 因为我要传递的参数刚好是纯数字，所以我的方法是把原来的十进制转化成了32进制，在取参的时候再转化下即可
  // 当然如果需要的数据量比较大话，也可以将数据存到后台，只把id传过去即可
// accessToken的获取可以看下微信小程序的API
  uni.request({
    url: \'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=\' + this.accessToken,
    data: {
       scene: str,
       page: "pages/personal/routerSharePage/routerSharePage"
    },
    method: "POST",
    responseType: \'arraybuffer\', //设置响应类型
    success(res) {
// 转化为base64位
      var codeSrc = uni.arrayBufferToBase64(res.data); //对数据进行转换操作
      that.setData({
        codeSrc: codeSrc
      })
      that.createNewImg()
    },
    fail(e) {
      console.log(e)
    }
   })
 },

三、绘制canvas

createNewImg: function() {
  var that = this;
// 因为base64不能直接生成图片，所以需要转成本地图片
  let pathCode = "data:image/png;base64," + this.codeSrc
  const fsm = wx.getFileSystemManager();
  const FILE_BASE_NAME = \'tmp_base64src\';
  const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(pathCode) || []
  const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
  const buffer = wx.base64ToArrayBuffer(bodyData);
  fsm.writeFileSync( filePath, buffer, \'binary\')
/* 创建容器 */
  var context = uni.createCanvasContext(\'mycanvas\');
  /* 主体背景色 */
  context.setFillStyle("#ffffff")
  /* 背景色填充区域 */
  context.fillRect(0, 0, 375, 667)

  //将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片
  context.drawImage(this.headerImg, 0, 0, 375, 421);
  /* 绘制标语 */
  let text1 = \'我的线路我做主\'
  let text2 = \'我是线路合伙人，为我助力吧\'
  context.setFontSize(24)
  context.setFillStyle("#181818")
  context.setTextAlign(\'center\')
  context.fillText(text1, 185, 467)
  context.stroke()

  context.setFontSize(18)
  context.setFillStyle("#4D4D4D")
  context.setTextAlign(\'center\')
  context.fillText(text2, 185, 500)
  context.stroke()

  /* 画虚线 */
  context.lineWidth = 3
  context.strokeStyle = "#4D4D4D"
  context.beginPath()
  context.setLineDash([18.5, 4])
  context.moveTo(37.5, 525)
  context.lineTo(337.5, 525)
  context.stroke()
  /* 小程序二维码 */
  context.drawImage(filePath, 41, 547, 82, 82);
  /* 小程序描述 */
  let text3 = \'分享来自北京定制公交升级版\'
  let text4 = \'长按识别小程序立即参与\'

  context.setFontSize(15)
  context.setFillStyle("#181818")
  context.setTextAlign(\'left\')
  context.fillText(text3, 140, 579)
  context.stroke()

  context.setFontSize(14)
  context.setFillStyle("#4D4D4D")
  context.setTextAlign(\'left\')
  context.fillText(text4, 140, 610)
  context.stroke()
  context.draw();
  //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
  setTimeout(function() {
    uni.canvasToTempFilePath({
      canvasId: \'mycanvas\',
      success: function(res) {
   　　   var tempFilePath = res.tempFilePath;
         uni.hideLoading()
            that.setData({
              imagePath: tempFilePath,
              showPoster: true
         });
      },
      fail: function(res) {
         console.log(res);
      }
   });
  }, 200);
},

四、保存图片

baocun: function() {
   uni.showLoading({
      title: \'正在下载\',
   })
   if (this.imagePath.indexOf(\'https\') > -1) {} else {
      this.imagePath = this.imagePath.replace(\'http\', \'https\')
    }
    uni.saveImageToPhotosAlbum({
       filePath: this.imagePath,
       success(res) {
         uni.showModal({
            content: \'图片已保存到相册，赶紧晒一下吧~\',
            showCancel: false,
            confirmText: \'好的\',
            confirmColor: \'#333\',
            success: function(res) {
              if (res.confirm) {
                 uni.hideLoading()
              }
            },
            fail: function(res) {
               console.log(11111)
            }
         })
       }
    })
  },

ok，这样就可以了，有问题可以留言