js将图片转换为base64编码格式

本文章以为线上的图片链接为例子，使用的方法是canvas把图片转码

canvas绘制图片方法

getBase64Url(img){
     
	let canvas = document.createElement('canvas'),
		ctx = canvas.getContext('2d');
	canvas.height = img.height;
	canvas.width = img.width;
	ctx.drawImage(img, 0, 0)
	let dataUrl = canvas.toDataURL('image/png');
	return dataUrl
}

第一步，先获取图片链接，
第二步，onload加载图片，
第三步，图片加载完后的回调函数里面执行getBase64Url()绘制base64编码的图片

getBase64Img(){
     
	let img = new Image()
	img.src = 'https://mhimg.clewm.net/cli/images/background/bg20.png'
	img.crossOrigin = 'Anonymous'          //处理图片跨域
	img.onload = () => {
     
		let base64img = that.getBase64Url(img)
		console.log(base64img)
	}
},

需要注意的地方就是，canvas的toDataURL()方法,没有办法绘制跨域的图片
解决方法如下，
1，在被引的图片添加crossOrigin属性，值为’Anonymous’
2，存放图片地址的服务器也要开启跨域权限
否则会出现：No ‘Access-Control-Allow-Origin’ header is present on the requested resource.的错误
具体后端配置可参照：添加链接描述