javascript - base64文字列の代わりにHTMLImageElementオブジェクトを取得

Question

これは私の以前の質問に続きますが、問題は新しく、その質問からの解決策は役に立たなかった。これは新しい質問です。ここで

は、私がイメージにキャンバスを変換する方法を尋ねた私の前の質問へのリンクです：javascript- unable to convert canvas to image data

そして私は、私は経由でPHPサービスに送信できる画像のbase64でエンコードされた文字列を取得するために願っていますAJAX呼び出しとPHPサービスは画像に変換し、指定されたディレクトリに移動します。

function convertCanvasToImage(canvas) 
{ 
    var image = new Image(); 
    image.src = canvas.toDataURL("image/png"); 
    return image; 
} 

画像にキャンバスを変換

機能は、これは私が作成したフォームである：

var url = 'url to php service'; 
var file = dataURL; //this is the image url that i'm sending 
console.log(file); 

var formdata = new FormData(); 
formdata.append("base64image", file); 
formdata.append('csrf_test_name',csrf_token); 
var ajax = new XMLHttpRequest(); 
ajax.addEventListener("load", function(event) { 
    uploadcomplete(event); 
}, false); 
ajax.open("POST", url); 
ajax.send(formdata); 

私はキャンバスが返さconsole.log()画像を試してみましたが、これは私が得たものです：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAHgCAYAAAA10dzkAAAgAElEQVR4nGzbZ3Mba5au6fqvJ2JiTs/pPtVV20j0sOm9T3iARqI3IOi9SIoGHqATJe29q/v8jXs+QMWeHT0fnkgGyUgCiRfIi2ut9y9OqYGZ3yKqHWHlttFiCz1nE8Q+XuDiuSb5XEBccYgrDv6si5ZTMOZMzHkLMS6gFspI8TxiOEfkfCS0P1AM1lmcPaJYPcbyNvDDHUqVU5zdTaS1j4hFm3Erg5bxCK0KxXiWUm6OcLaAW46xCzZBNcAOF3FzK8TBIoG7QC7v4AUalqdRquVQZxeQa/PYc2vYc2uUnWUCuYovR+TMEoEVY8oOnhES2jlKVo2au0DZXiVSF/DciDDMUyjOEuerGGqJYm6VaG6DhBahOyW8eB4rrBGVl5BmZ5FmZ1HyLlrJZ37ep1jUyXseOdel7FWpBrMUgwXy3ixGJGLlZLRIxipoh...Hd7sRkseD2ebFF/Bj9btUYEnDzGHRy57XgcDiw2WyYDPdYzFp0dgvXBh0XeiPmYBit2YzBbufR4uDR4kBrd3BtNHHvs6ty3HJru+beoUXn0vPgNaD1Gbl1udFYbWhMFlU2E7du+zTmRWt75MGqw+axYvNYebRpMbmNaF0OzEE/+nQAXcrHpeBAk7BzJTm4zXg4Kdq4afq4nGS4fslyO85x1IizEbWwJzo5Lzu4bfk560Y5agY57SfYawS57sS4akfRFJxc5B1cl7XcVh85Gfo47HvYaFvY6ds5Hvg5GQY4bUY5rofQtAUumgk0XVXXozSXQxX+rnsSt20nmrqFG+URbdHMVSOGphbmrCNw1hG46Dg4aaoxP0c1B0dVD7sFO0cFG0cFG+fKNSeyhjPhBI10zmnqnPP0xRQAD1Pqs7CSV7VV3mCztM5Rbpnz8joXHSPXfQuXPQ9XAy9noxgXE4HT/8pz8X/L/D+QyAVhXuteXgAAAABJRU5ErkJggg=="> 

画像タグがあります。多分それはそのためです。私はそれをPHPサービスに渡すと、それを変換することはできません。私は

object HTMLImageElement 

をデバッグするときに、それは私に返さ私は、下記のような関数を使用してbase64でに上記の画像タグを変換しようとしているが、それは失敗しました。

function encodeImageFileAsURL(cb) { 
    return function(){ 
     var file = this.files[0]; 
     var reader = new FileReader(); 
     reader.onloadend = function() { 
      cb(reader.result); 
     } 
     reader.readAsDataURL(file); 
    } 
} 

誰も私が私がここで行方不明です何を理解するのに役立つことはできますか？どうもありがとう！

参考： https://davidwalsh.name/browser-camera

https://davidwalsh.name/convert-canvas-image

Answer 1

あなたは既に変数imageで<img>要素のsrcでdata URIを持っています。 <img>要素のsrcの値をhtml<img>要素ではなく、phpに渡します。

var file = image.src; //this is the image url that i'm sending