之前有个需求是把页面绘制成图片,上传到服务器中,我使用的 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();
}

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐