将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
},

将URL图片链接转换成base64

原文：https://www.cnblogs.com/gangkoudemao/p/12452497.html