createObjectURL（）によって作成された画像を投稿します。

Question

生成された画像を読み込んでサーバーに送信します。

<img id="image" src="blob:null/31070c0f-23c0-44b0-945f-57ed1e623350"> 

このコードは画像を生成しました。

var xhr = new XMLHttpRequest(); 
xhr.onreadystatechange = function(){ 
    if (this.readyState == 4 && this.status == 200){ 

     var img = document.getElementById('image'); 
     var url = window.URL || window.webkitURL; 
     img.src = url.createObjectURL(this.response); // this one created the image. 

私はそれを投稿するためにデータを読んでいます。ファイル（作業ではない）に添付しようとしました。イメージからバイナリを読み込もうとしましたが、イメージはローカルBLOBです）、イメージのsrcをファイルに設定しようとしました（作業していません）

イメージのレンダリング方法です。私はそれをサーバーに送りたい。

私はいくつかの方法を試しましたが、答えられませんでした。 POSTを通して、あなたの画像を送信するために

Answer 1

var xhr = new XMLHttpRequest(); 
xhr.onreadystatechange = function(){ 
    if (this.readyState == 4 && this.status == 200){    

     var reader = new FileReader(); 

     reader.onload = function (e) { 
      var dataURL = reader.result; 
      $("#image").attr("src", dataURL); 

      alert($("#ImageTwo").attr("src")); 
     } 

     var read = reader.readAsDataURL(this.response); 

    } 
} 
xhr.open('GET', 'http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=http://www.cognation.net/profile'); 
xhr.responseType = 'blob'; 
xhr.send(); 

Answer 2

は、dataURIにブロブを変換FileReader
を使用しますが、あなたのケースでいるFormDataアプローチが好まれるべきに直接FormData API
のおかげでブロブを送信します。

キャンバスの使用に関する注記：画像をデコードし、別のアルゴリズムで再エンコードします。出力は同じ画像ではありません。