如何使用FileReader（）将远程图像URL读取为DataURL？ [英] How can I read remote image URL as DataURL using FileReader() ?
问题描述
如何使用FileReader（）读取远程图像URL作为DataURL？
我试过但结果总是如下：
请帮忙！
数据：image / jpeg; base64，W29iamVjdCBIVE1MSW1hZ2VFbGVtZW50XQ ==
贝娄是我的代码：
< script>
函数loadFileAsURL（）{
var x = new Array（）;
var img = x [0];
img = new Image（）;
img.src =https： //dl.dropboxusercontent.com/s/2z1e5pcopb2g4vl/raima.jpg;
if（img）
var myFILE = new Blob （[img]，{type：'image / jpeg'}）;
var target = myFILE;
var fileReader = new FileReader（）;
fileReader.onerror = function（）{
document.getElementById（encoded）。value =文件已损坏。所以转换不可能！试试另一个。好的！; };
fileReader.onprogress = function（）{
document.getElementById（encoded）。value =转换正在进行中......; };
fileReader.onload = function（event）{
var textArea = document.getElementById（encoded）;
textArea.innerHTML = event.target.result;};
fileReader.readAsDataURL（target）;
}
< / script>
< button type =button>转换文件作为Base64 DataURL< / button>
< textarea id =encodedrows =85cols =100％wrap =soft>< / textarea>
How can I read remote image URL as DataURL using FileReader() ?
I have tried but the result is always as bellow:
Please help !
"data:image/jpeg;base64,W29iamVjdCBIVE1MSW1hZ2VFbGVtZW50XQ=="
Bellow is my code:
<script>
function loadFileAsURL() {
var x = new Array();
var img = x[0] ;
img = new Image();
img.src = "https://dl.dropboxusercontent.com/s/2z1e5pcopb2g4vl/raima.jpg" ;
if (img)
var myFILE = new Blob([img], {type:'image/jpeg'});
var target = myFILE ;
var fileReader = new FileReader();
fileReader.onerror = function() {
document.getElementById("encoded").value = "Corrupted file. So conversion is not possible !!! Try another one. Ok ! "; };
fileReader.onprogress = function() {
document.getElementById("encoded").value = "Conversion is in progress... ..."; };
fileReader.onload = function(event) {
var textArea = document.getElementById("encoded");
textArea.innerHTML = event.target.result;};
fileReader.readAsDataURL(target);
}
</script>
<button type="button" >Convert File As Base64 DataURL</button>
<textarea id="encoded" rows="85" cols="100%" wrap="soft" ></textarea>
推荐答案
不，FileReader不能通过URL读取远程资源。请参阅：
https://developer.mozilla.org/en -US / docs / Web / API / FileReader [ ^ ]，
http://www.javascripture.com/FileReader [ ^ ]。
要读取远程资源，您需要使用Ajax： https://en.wikipedia.org / wiki / Ajax_％28programming％29 [ ^ ]。
一个非常方便的方法是使用jQuery Ajax。例如，请参阅本文： http://www.henryalgus.com/reading-binary- files-using-jquery-ajax [ ^ ]。
但是，最重要的是，请看我对这个问题的评论。这完全取决于你想要用你所阅读的资源做什么。
-SA
No, FileReader is not designed to read remote resources via URL. Please see:
https://developer.mozilla.org/en-US/docs/Web/API/FileReader[^],
http://www.javascripture.com/FileReader[^].
To read remote resource, you will need to use Ajax: https://en.wikipedia.org/wiki/Ajax_%28programming%29[^].
One very convenient way to do so would be using jQuery Ajax. See, for example, this article: http://www.henryalgus.com/reading-binary-files-using-jquery-ajax[^].
But, most importantly, see my comment to the question. It all depends on what you want to do with the resource you read.
—SA
这篇关于如何使用FileReader（）将远程图像URL读取为DataURL？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
