html5、jquery、javascriptで画像バイト文字列（base64）を取得するには？

Question

iPhoneまたはAndroidに画像があり、そのファイルストリームまたはバイト文字列をjQuery AJAXからWebサービスに渡して、サーバーにファイルを保存したいとします。

HTML5では、イメージファイル（jpg、gifなど）バイト文字列を取得して、サーバーに送信する方法はありますか。

Answer 1

canvas.drawImage(image, 0, 0)を使用して同じサイズのキャンバスにイメージをコピーし、キャンバスの.toDataURL('image/TYPE')メソッドを使用してイメージのbase64表現を取得できます。 'TYPE'はjpg、gif、pngのいずれかになります

例：現在のページと画像が同じドメイン、サブドメイン、プロトコル上にあることを確認してください。そうしないとセキュリティエラーが発生します。また、キャンバスが

HTML

<img src="whatever.jpg" id="myimage" /> 
<canvas width="300" height="300" id="mycanvas" style="display: none;"></canvas> 

Javascriptが

var myImage = document.getElementById('myimage'); 
var myCanvas = document.getElementById('mycanvas'); 

var ctx = myCanvas.getContext('2d'); 

ctx.drawImage(myImage, 0, 0); 

var mydataURL=myCanvas.toDataURL('image/jpg'); 

Answer 2

形式でなくて生データを分離するためのコード例に追加した画像と同じ幅と高さを持っていることを確認してください文字列の先頭...

Javascript：

var myImage = document.getElementById('myimage'); 
var myCanvas = document.getElementById('mycanvas'); 
var ctx = myCanvas.getContext('2d'); 
    ctx.drawImage(myImage, 0, 0); 

var myDataURL = myCanvas.toDataURL('image/png');// could also be 'image/jpg' format 

/* to remove the 'data:image/jpg;base64,' later from using the toDataURL() function (or PNG version data:image/png;base64,') and have only the raw base4 data string, split the result string from the ctx.drawImage() function at the comma and take the second half, and the remaining data will be in tact like so: */ 

var myBase64Data = myDataURL.split(',')[1];// removes everything up to and including first comma 

個人的に私はこれが好きで）それはjqueryの `小道具を（使用してのindexOfのようなものを使用し、サブ