将图像加载到FileReader中

Question

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

Answer 1

如果你想要一个可用的图像数据URI表示,那么我建议在一个<img>标签中加载图像,然后在a上绘制它,<canvas>然后使用.toDataURL()画布的方法.

否则,您需要使用XMLHttpRequest获取图像blob(responseType在XMLHttpRequest实例上设置属性并从.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/