將圖像載入FileReader

Question

我想從url加載圖像到filereader以獲取該圖像的數據url。我試圖在谷歌搜索解決方案，但我只能找到解決方案，從本地計算機上的文件輸入中讀取它們。

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/