在线图片地址转base64回显

需求：一个业务需要把一个在线地址回显

var img = "https://ts3.cn.mm.bing.net/th?id=OIP-C.owpbNjuu23xkyc4yrX9BDQHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2";//imgurl 就是你的图片路径

function getBase64Image(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 ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
var dataURL = canvas.toDataURL("image/"+ext);
return dataURL;
}

var image = new Image();
image.src = img;
image.onload = function(){
var base64 = getBase64Image(image);
console.log(base64);
}

 

 

ps：

第一个坑 会报错 说污染画布了

解决方案：imgUrl.setAttribute(‘crossOrigin’, ‘anonymous’);

第二个坑 设置以后提示跨域了

解决方案：地址后面增加时间戳参数绕过缓存
imgUrl.src = url + ‘?tamp=’+(new Date()).valueOf();