jquery - 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

個人的に私はこれが好きで、indexOf や substring のようなものを使用するよりもはるかにクリーンで高速であることがわかります