将图像加载到 FileReader答案

【问题标题】：Load image into FileReader将图像加载到 FileReader
【发布时间】：2014-01-15 12:01:27
【问题描述】：

我想将图像从 url 加载到 filereader 中，以获取该图像的数据 url。我试图在谷歌上搜索解决方案，但我只能找到从本地计算机上的文件输入中读取它们的解决方案。

【问题讨论】：

【解决方案1】：

如果您想要图像的可用数据URI 表示，那么我建议将图像加载到<img> 标记中，将其绘制在<canvas> 上，然后使用画布的.toDataURL() 方法。

否则，您需要使用XMLHttpRequest 来获取图像blob（在XMLHttpRequest 实例上设置responseType 属性并从.response 属性中获取blob）。然后，您可以照常使用FileReader API。

在这两种情况下，图像都必须托管在同一来源，或者必须启用 CORS。

如果您的服务器不支持 CORS，您可以使用添加 CORS 标头的代理。在以下示例中（使用第二种方法），我使用CORS Anywhere 来获取我想要的任何图像上的 CORS 标头。

var x = new XMLHttpRequest();
x.open('GET', '//cors-anywhere.herokuapp.com/http://www.youtube.com/favicon.ico');
x.responseType = 'blob';
x.onload = function() {
    var blob = x.response;
    var fr = new FileReader();
    fr.onloadend = function() {
        var dataUrl = fr.result;
        // Paint image, as a proof of concept
        var img = document.createElement('img');
        img.src = dataUrl;
        document.body.appendChild(img);
    };
    fr.readAsDataURL(blob);
};
x.send();

可以将之前的代码复制粘贴到控制台，您会在页面底部看到一个带有 YouTube 网站图标的小图片。演示链接：http://jsfiddle.net/4Y7VP/

【讨论】：

是否有不启用 CORS 的解决方案？
@user 使用 CORS 代理。请参阅我的更新答案，并举例说明。
这太棒了，谢谢！我一直在尝试从远程图像的 exif 中获取方向，但由于我使用画布获取 base64 以便我可以将其转换为 blob/文件，因此一直失败。但是这样我就可以直接从服务器获取 blob，然后从 blob 获取方向。
@RobW，在生产中使用代理服务器方法有什么注意事项吗？
@OksanaRomaniv 是的。如果它是第三方的，则存在可用性风险（不能保证您的请求将始终按预期处理）。如果是自托管的，那么您需要确保只允许您的应用程序使用代理，并且只允许使用有限的已知目标集。

【解决方案2】：

使用 fetch 的替代下载：

fetch('http://cors-anywhere.herokuapp.com/https://lorempixel.com/640/480/? 
    60789', {
    headers: {},
}).then((response) => {
   return response.blob();
}).then((blob) => {
    console.log(blob);
    var fr = new FileReader();
    fr.onloadend = function() {
       var dataUrl = fr.result;
       // Paint image, as a proof of concept
       var img = document.createElement('img');
       img.src = dataUrl;
       document.body.appendChild(img);
    };
    fr.readAsDataURL(blob);
}).catch((e) => console.log(e));

【讨论】：

尽可能使用 https。使用URL.createObjectURL 而不是使用 FileReader 来显示图像。