JavaScript Canvasに描画した画像をサーバーへ送るには

Question

Canvasに描画した画像をサーバーに送りたいです
formdata.append("canvas",c.toDataURL());
このような形で送る事自体が間違ってるんでしょうか？
どのような中身でnew FormDataにappendするのでしょうか？

<script>
window.onload=function(){

canvas=document.createElement("canvas");
canvas.id="c";
document.body.appendChild(canvas);

can=document.getElementById('c');
can.width="300";
can.height="300";
ctx=can.getContext('2d');
img=new Image();
ctx.drawImage(img, 0,0);

var formdata = new FormData();
formdata.append("canvas",c.toDataURL());
xmlhttp = new XMLHttpRequest();
xmlhttp.overrideMimeType("text/plain; charset=utf-8");
xmlhttp.addEventListener('loadend', function(){
if(xmlhttp.status === 200){
}
});
xmlhttp.open("POST", ".", true);
xmlhttp.send(formdata);

}
</script>

Comments

[yambejp]

jpegやpngに変換してはいけないのでしょうか？

Answer 1

以下の記事が参考になりませんか？

canvas の画像をアップロード
http://surferonwww.info/BlogEngine/post/2015/07/02/upload-image-drawn-on-html5-canvas.aspx

不明点があればコメント欄で聞いてください。

Answer 2

toBlobでBlobオブジェクトを取得して、それをappendしてください。

Comments

[eraqw]

回答ありがとうございます

var formdata = new FormData();
can.toBlob(function(result) {
formdata.append("canvas",c.createObjectURL(result));
});

こちらでいいでしょうか？
これをサーバーで送ると単にblobのURL文字列を送る事になると思いますが
受信側はそのURL文字列を
$img=file_get_contents($_POST["canvas"]);
file_put_contents("a.jpg",$img);
のような形で保存するんでしょうか？

[maisumakun]

＞ こちらでいいでしょうか？

そのままBlobをappendすれば、PHP側では$_FILES経由で受け取れます。

[eraqw]

BlobをそのままappendしてもURLがはいるだけで$_FILESはnullとなってしまうのですが・・・

[eraqw]

$_POSTにはblob:https～の文字列が入っています

[maisumakun]

どのようなコードを書きましたか？

（「BlobをそのままappendしてもURLがはいるだけ」になるのは、なにか手順がおかしいような気がします）

[eraqw]

このようになっています
console.logを見るとちゃんと画像サイズも表示されてるので読み込まれてると思うのですが、
受信側でvar_dump($_FILES["canvas"]);とするとnull
$_POST["canvas"]だとblob:https～が入ります

Ajaxリクエストヘッダには
Content-Disposition: form-data; name="canvas"
blob:https～

var formdata = new FormData();
can.toBlob(function(result) {
formdata.append("canvas",URL.createObjectURL(result));
console.log(result);
xmlhttp = new XMLHttpRequest();
xmlhttp.overrideMimeType("text/plain; charset=utf-8");
xmlhttp.addEventListener('loadend', function(){
if(xmlhttp.status === 200){
}
});
xmlhttp.open("POST", ".", true);
xmlhttp.send(formdata);
}, 'image/jpeg');

[maisumakun]

> このようになっています

「formdata.append("canvas",result)」と「そのまま」appendしてください。URL.createObjectURLは余計です。

[eraqw]

無事入りました。
どうもありがとうございました。