如何使用FileReader（）将远程图像URL读取为DataURL？

问题描述

如何使用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读取为DataURL？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！