Canvasに描かれた画像をアップロードする方法です。
※dataスキームURIを使用する手法で、通常の
multipart/form-data形式とは異なります。
DEMO
<script type="text/javascript">
var canvas,ctx;
window.onload=function(){
canvas = document.getElementById('curCanvas');
ctx = canvas.getContext('2d');
}
function imgLoad(e){
var curImage = new Image();
curImage.src = document.forms['testForm'].elements['testURL'].value;
curImage.onload = function(){
ctx.drawImage(curImage, 0,0,400,300);
}
}
function dataUrl(e){
try{
var imgData = canvas.toDataURL();
document.forms['testForm'].elements['toDataURL'].value = imgData;
}catch(e){
document.forms['testForm'].elements['toDataURL'].value = e.message;
}
}
function showImg(){
imgData = document.forms['testForm'].elements['toDataURL'].value;
var img = new Image();
img.src = imgData;
img.onload = function(){
document.getElementById('imgDiv').appendChild(img);
}
img.onerror = function(){
alert('画像の読み込み失敗');
}
}
</script>
canvas.toDataURL()を使用してdataスキームURIを取得します。
※dataスキームURIとは？
data:image/gif;base64,[base64でエンコードされた画像データ]のように表します。
これをこのままIMGタグのsrc属性で指定しても画面に表示可能です。
この値をhidden値に入れてサーバーにPOSTすることで、サーバー側で処理できます。
サーバーでは、データ部をbase64でデコードし、ファイル化すれば画像ファイルが作れます。
※phpの場合
$data =explode(',',$_POST['DataURI']);
file_put_contents ('./test.png',base64_decode($data[1]));
・toDataURLについて
デフォルトではpng形式で変換されます。
引数でデータ形式を指定可能。
canvas.toDataURL("image/jpeg")
※注意
クロスドメイン対策でキャンバス内に他サイトの画像を組み込んでいる場合、セキュリティのためエラーになります。
画像サイトの外部APIを使って大量に処理されるのを防ぐためではないかと思います。
ユーザに入力されたURLから画像を自サイト経由で取り込む形にしなければなりません。
※バイナリ(base64でデコード)に変換してアップロードするというのはどうか？
I.E.9がFIleReader未サポートなので、Canvasに関してはこっちの方がラクだと思います。
PR
