HTML5 Canvasをファイルに変換してアップロードするには？

質問

標準的なHTMLファイルのアップロードは、以下のように動作します。

<g:form method="post" accept-charset="utf-8" enctype="multipart/form-data"  
     name="form" url="someurl">

    <input type="file" name="file" id="file" />

</form>

私の場合、html5 のキャンバスに画像を読み込んで、それをファイルとしてサーバーに送信したいのです。 私はできます。

var canvas; // some canvas with an image
var url = canvas.toDataURL();

これでbase64でimage/pngが得られます。

入力タイプのファイルと同じように、base64の画像をサーバに送るにはどうしたらよいでしょうか？

input type="file"の中にあるbase64ファイルが、ファイルと同じタイプでないことが問題です。

サーバーのために型が同じであるbase64をどうにかして変換できないでしょうか？

どのように解決するのですか？

セキュリティ上の理由から、file-input要素に直接値を設定することはできません。

file-input要素を使用したい場合。

1. キャンバスから画像を作成する(行ったように)。
2. その画像を新しいページに表示する。
3. ユーザーに右クリックでローカルドライブに名前を付けて保存させる。
4. その後、ユーザーは file-input 要素を使用して、新しく作成されたファイルをアップロードすることができます。

あるいは、Ajax を使用して canvas のデータを POST することもできます。

blobについて質問されました。

var blobBin = atob(dataURL.split(',')[1]);
var array = [];
for(var i = 0; i < blobBin.length; i++) {
    array.push(blobBin.charCodeAt(i));
}
var file=new Blob([new Uint8Array(array)], {type: 'image/png'});


var formdata = new FormData();
formdata.append("myNewFileName", file);
$.ajax({
   url: "uploadFile.php",
   type: "POST",
   data: formdata,
   processData: false,
   contentType: false,
}).done(function(respond){
  alert(respond);
});

注意：blobは最新のブラウザで一般的にサポートされています。