本文章以为线上的图片链接为例子,使用的方法是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.的错误
具体后端配置可参照:添加链接描述