Javascript：从图像 URL 获取 Base64 字符串

【问题标题】：Javascript: Get Base64 string from an image URLJavascript：从图像 URL 获取 Base64 字符串
【发布时间】：2016-02-24 17:59:36
【问题描述】：

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

【问题讨论】：

不，这是不可能的，除非您使用 Node.js 并对返回 Base64 的服务器执行 XMLHttpRequest，这样您将使用 only javascript，并且没有 DOM、Canvas 或 jQuery
不使用canvas、dom或jquery？我认为这是不可能的。为什么你不使用画布？
您可以使用btoa(…) 转换为Base64，但您仍然需要弄清楚如何从不同的域获取图像。
@Xufox CORS CORS CORS :P

标签： javascript base64

【解决方案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);
    });
});

【讨论】：