javascript - 将图像加载到 FileReader

Question

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

Answer 1

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

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

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

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

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/