GAEにcanvasで描画した画像をアップロードする方法

GAEを利用してcanvasで編集した画像をblobStoreにアップロードする方法がかなり難儀だったので、ここに掲載する。

jquery ajaxを利用

var canvasUpload = function(url){

    var fileUrl = $("#canvas").get(0).toDataURL("image/png");//文字列に変換
    var blobBin = atob(collage.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 multipart = new FormData(); 

    multipart.append('key', 'value');
    multipart.append('image', file, "filename.png");

    //送信
    $.ajax({
        type: 'POST',
        url: url,
        data : multipart,
        processData : false,
        contentType : false,
        success: function (data) {
            alert("画像アップロード完了 \n" + data.message);
        }
    });
}