將URL圖片鏈接轉換成base64

在使用html2canvas截圖的時候，canvas重新渲染的時候 ，如果資源是URL圖片的時候，在請求有個延時可能還沒渲染完就完成繪制了，造成圖片截圖不出來。
這時將URL圖片轉換成base64后，用base64渲染img圖片，這樣就可以完美解決問題
如何將“跨域圖片”轉換成base64呢？原理很簡單，將img繪制成canvas，再將canvas轉換成base64的img流。
具體代碼

this.getBase64Image('http://wwww.test/test.png', 'coopCachetImg')
第一個參數是圖片的URL地址，第二個是轉換成base64地址后要賦值給的img標簽
getBase64Image (url, ref) {
var that = this
var image = new Image()
image.src = url + '?v=' + Math.random() // 處理緩存
image.crossOrigin = '*' // 支持跨域圖片
image.onload = function () {
var base64 = that.drawBase64Image(image)
that.$refs[ref].src = base64
}
},
drawBase64Image (img) {
var canvas = document.createElement('canvas')
canvas.width = img.width
canvas.height = img.height
var ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0, img.width, img.height)
var dataURL = canvas.toDataURL('image/png')
return dataURL
},