使用uniapp做海报的坑

使用uniapp做海报有两种方法
1，使用canvas（uniapp官网有插件，可以根据仿照例子做一个）
2，使用HTML2canvas（不过使用这个需要获取dom节点，因为小程序是没有dom节点这一说法的，所以当时没想到好的解决办法，就用了第一种）

canvas我也仅仅只是了解，没有真正做过什么东西，这是我第一次使用这个做一个完整的页面
（海报链接地址）
我用的是这个插件，首先请求海报上需要的数据（如果是小程序需要分享海报，我建议海报这个做成弹框形式出现，因为页面的话还需要请求一次数据在画canvas会很慢的）这时就开始第一个坑了，我当时不知道怎么将正方形图片裁剪成一个圆
1，正方形图片裁剪成一个圆
如果知道的可以跳过这个，我当时很傻傻的百度了半天，但是百度的东西都不对，后来我想想还是以最原始的方法，看文档，文档肯定会介绍这些，我们先把原理搞懂了再想其他办法（canvas文档）可能一开始没有你想要的答案，你需要把这些都过了一遍自然就会有思绪

getDraw(){
	this.ctx = uni.createCanvasContext('zwyPoster',this);
	this.circleImg(this.img,.475,.2, 24)
}
circleImg(img, x, y, r) {
				uni.getImageInfo({
					src:img
				}).then((image)=>{
					x= Math.ceil(this.cansWidth * x)
					y = Math.ceil(this.cansHeight * y)
					this.ctx.save();
					var d = 2 * r;
					var cx = x + r;
					var cy = y + r;
					this.ctx.arc(cx, cy, r, 0, 2 * Math.PI);
					this.ctx.clip();
					this.ctx.drawImage(image[1].path, x, y, d, d);
					this.ctx.restore();
					this.ctx.draw(true);
				})
			},

2，小程序码是最坑的
小程序码是后台返回过来的二进制流文件，我拜托后端换成base64形式的，开始了我的填坑之路
因为base64的图片看到的都是通过img在页面展示的，而通过canvas画就需要先下载下来再进行画

我们百度到的小程序base64画到canvas里面都是

因为我们用的是uniapp不能使用wx，所以我们要继续填坑，百度到很多，终于找到了方法

  let base64Image =  base64Str.split(',')[1].replace(/[\r\n]/g, ''); // 后台返回的base64数据的回车换行换为空字符''
    const fsm = wx.getFileSystemManager();  //文件管理器
    const FILE_BASE_NAME = 'tmp_base64src'; //文件名
    const format = 'png'; //文件后缀
    const timestamp = (new Date()).getTime();//获取一个当前时间戳，用于区分每一个小程序码，防止多次写进的小程序码图片都一样（建议通过不同的商品id来区分不同的小程序码）
    const buffer = wx.base64ToArrayBuffer(base64Image),//base 转二进制 
    filePath = `${wx.env.USER_DATA_PATH}/${timestamp}www.${format}`; //文件名
    fsm.writeFile({ //写文件
      filePath,
      data: buffer,
      encoding: 'binary',
      success(res) {
        wx.getImageInfo({ //读取图片
          src: filePath,
          success: function(res) {
            let img = res.path;//把需要画出来的图片
          },
          fail(e){
            console.log('读取图片报错');
            console.log(e);
          },
          error(res) {
            console.log(res)
          }
        })
      },
      fail(e){
        console.log(e);
      }
    })
  }).catch((e)=>{
    console.log(e);
  })

base64Str是后台返回的base64文件