html image blob to base64

Question

私はfileinputjs.Theイメージのsrcはblobですが、私は何かをするためにイメージのsrcを使用したいです。私はbase64.Butを得るためにreadAsDataURLを使用して問題がありますそれについて

<script type="text/javascript"> 
    $("#last").click(function(){ 
     var blob=document.querySelector(".file-preview-image").src; 
     var reader = new FileReader(); //通过 FileReader 读取blob类型 
    reader.onload = function(){ 
    this.result === dataURI; //base64编码 
    } 
    console.log(reader.readAsDataURL(blob)); 
}) 
    </script> 

次に、Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'があります。

Answer 1

ここに多くの誤解があります。

• あなたの変数blobはBlobますが、文字列、.file-preview-imageのURLではありません。
  FileReaderはこの文字列から何もできません。 （または少なくともあなたが望むものではない）。 FileReaderのonloadコールバックで
• 結果は未定義の変数dataURIに等しい場合、あなたはをチェックするだけでです。それは何もしません。
• への呼び出しはundefinedになるので、このメソッドは非同期です（コールバックでconsole.logにコールする必要があるため）console.logしようとしています。その後、

しかし、私は、あなたが持っていることはobject url（blob://）であることを推測するので、その後、あなたのソリューションは、実際のBlobオブジェクトを取得し、FileReaderに渡し、またはキャンバス上でこの画像を描画するためにいずれかであり、かつそのtoDataURLメソッドを呼び出して、base64でエンコードされたバージョンを取得します。

あなたはブロブ得ることができる場合：

そう

var dataURI; 

var reader = new FileReader(); 

reader.onload = function(){ 
    // here you'll call what to do with the base64 string result 
    dataURI = this.result; 
    console.log(dataURI); 
    }; 

reader.readAsDataURL(blob); 

：

var dataURI; 

var img = document.querySelector(".file-preview-image"); 

var canvas = document.createElement('canvas'); 
canvas.width = img.width; 
canvas.height = img.height; 
canvas.getContext('2d').drawImage(img, 0,0); 
dataURI = canvas.toDataURL(); 

しかし、その後のために、あなたはあなたのイメージは、実際にできるようになる前に、ロードされたことを待たなければならないことに注意をそれをキャンバスに描きます。
また、デフォルトでは、画像をpngバージョンに変換します。元の画像がJPEG形式の場合は、toDataURL('image/jpeg')の最初のパラメータとしてimage/jpegを渡すこともできます。
イメージがsvgの場合は、<object>要素を使用する他の解決策がありますが、本当に必要な場合を除いて、私は他の回答のために残します。