獲取圖像的base64

Question

我試圖通過使用HTML FileReader在HTML中獲取圖像的base64，但是由於某些原因，它無法正常工作。 我的html是：

<div></div>

腳本是：

var file = "http://mw2.google.com/mw-panoramio/photos/medium/23830229.jpg";
var reader = new FileReader();
reader.onload = function (e) {
    iconBase64 = e.target.result;
    $('div').append(iconBase64);
}

有誰能夠幫助我？

Answer 1

我必須反對大多數，並告訴您實際上可以在沒有畫布的情況下得到它。

FileReader無法讀取外部文件的說法並不完全正確：
您可以給它一個blob作為源。
因此，您可以使用XMLHttpRequest將外部資源轉換為Blob對象
_{使它在本地計算機上可用，因此上述聲明也不是完全錯誤的} ，
然后從FileReader獲取其dataURL。

 var file = "http://mw2.google.com/mw-panoramio/photos/medium/23830229.jpg"; var xhr = new XMLHttpRequest(); xhr.onload = function(e) { getDataURL(this.response); }; xhr.open('GET', file, true); // the magic part xhr.responseType = 'blob'; xhr.send(); function getDataURL(blob) { var reader = new FileReader(); reader.onload = function(event) { var dataURL = this.result; document.querySelector('img').src = dataURL; document.querySelector('p').innerHTML = dataURL; }; var source = reader.readAsDataURL(blob); } 

 <img/> <p></p> 

Answer 2

您不能使用FileReader解決此問題，因為您沒有嘗試讀取本地文件（這是FileReader的目的）

只需使用類似以下答案的內容轉換從Web鏈接獲取的圖像即可：https://stackoverflow.com/a/20285053/912450