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。

＆＃13;

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

＆＃13;

<img/>
<p></p>

＆＃13;

Answer 2

您不能使用FileReader来解决此问题，因为您不是在尝试读取本地文件（这是FileReader的目的）

只需使用此答案https://stackoverflow.com/a/20285053/912450

之类的内容转换从网络链接中获取的图像

获取图像的base64

2 个答案: