使用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文件