Javascript：从图片网址获取Base64字符串

Question

假设我只有图片的URL，并且我想从跨域脚本中获取图片的BAse64字符串值，而不使用DOM或Canvas或jQuery。这可能吗？...仅使用纯Javascript？

Answer 1

如果该图像是跨域资源，则除非服务器使用适当的CORS标头提供该图像，否则您将无法读取该图像。浏览器从不允许脚本读取跨域资源的内容（这是跨域策略的核心），除非跨域服务器通过CORS明确允许这样做。

假设您确实有一个带有适当CORS标头的图像（或者只是一个同源图像），则可以将其作为来获取Blob（使用responseType），然后将其作为文件读取以获取base64编码的data:URL：

var xhr = new XMLHttpRequest()
xhr.open("GET", "myimg.png");
xhr.responseType = "blob";
xhr.send();
xhr.addEventListener("load", function() {
    var reader = new FileReader();
    reader.readAsDataURL(xhr.response); 
    reader.addEventListener("loadend", function() {             
        console.log(reader.result);
    });
});