js将图片转换成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();
}