js将图片转换成base64
之前有个需求是把页面绘制成图片,上传到服务器中,我使用的html2canvas。但是html页面当中含有图片的话,在截图时存在跨域问题,导致截图失败。经过多方查找,发现把页面中的图片转换成base64,可以避免这个跨域问题。......
·
之前有个需求是把页面绘制成图片,上传到服务器中,我使用的 html2canvas 。但是html页面当中含有图片,如果图片地址非本页面域名,在截图时就会存在跨域问题,导致截图失败。经过多方查找,发现把页面中的图片转换成base64,可以避免这个跨域问题。
下面记录一下图片转换成base64的方法:
function getBase64(imgUrl) {
window.URL = window.URL || window.webkitURL;
var xhr = new XMLHttpRequest();
xhr.open("get", imgUrl, true);
xhr.responseType = "blob";
xhr.onload = function(){
if(this.status == 200){
//得到一个blob对象
var blob = this.response;
console.log("blob", blob)
// 至关重要
let oFileReader = new FileReader();
oFileReader.onloadend = function(e){
// 此处拿到的已经是base64的图片了,可以赋值做相应的处理
console.log(e.target.result)
}
oFileReader.readAsDataURL(blob);
}
}
xhr.send();
}
更多推荐
已为社区贡献4条内容
所有评论(0)