[解決済み】データURIをファイルに変換してFormDataに追記する。

質問

HTML5の画像アップローダーを再実装しようとしています。 Mozilla Hacksに掲載されている というサイトがありますが、これは WebKit ブラウザで動作するものです。このタスクの一部は、画像ファイルを canvas オブジェクトに追加し、それを フォームデータ オブジェクトをアップロードします。

問題は canvas には toDataURL 関数を使って画像ファイルの表現を返しますが、FormData オブジェクトは、File オブジェクトまたは Blob オブジェクトを ファイルAPI .

Mozilla のソリューションでは、以下の Firefox 専用の関数を canvas :

var file = canvas.mozGetAsFile("foo.png");

...これは WebKit ブラウザでは利用できません。私が思いついた最善の解決策は、Data URI を File オブジェクトに変換する方法を見つけることです。これは File API の一部ではないかと思ったのですが、それを行う方法がどうしても見つかりませんでした。

可能ですか？できない場合、何か代替案はありますか？

ありがとうございます。

解決方法は？

いろいろと遊んでいるうちに、なんとか自分で解決することができました。

まず、これはdataURIをBlobに変換するものです。

function dataURItoBlob(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], {type:mimeString});
}

ここから、データをファイルとしてアップロードするようなフォームに追記するのは簡単です。

var dataURL = canvas.toDataURL('image/jpeg', 0.5);
var blob = dataURItoBlob(dataURL);
var fd = new FormData(document.forms[0]);
fd.append("canvasImage", blob);