Question

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

Answer 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/

Answer 2

可下载的替代下载方式：

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));

将图像加载到FileReader中

2 个答案: