resize.js

// 参考サイト，http://blog.sarabande.jp/post/30694191998
// 引数のBase64の文字列をBlob形式にしている
var base64ToBlob = function(base64){
    var base64Data = base64.split(',')[1], // Data URLからBase64のデータ部分のみを取得
        data = window.atob(base64Data), // base64形式の文字列をデコード
        buff = new ArrayBuffer(data.length),
        arr = new Uint8Array(buff),
        blob, i, dataLen;

    // blobの生成
    for( i = 0, dataLen = data.length; i < dataLen; i++){
        arr[i] = data.charCodeAt(i);
    }
    blob = new Blob([arr], {type: 'image/png'});
    return blob;
}

//ファイル名の取得
//参考サイト，http://write-remember.com/program/javascript/input_type_file/
function getFileName() {
    var bufstr = document.getElementById("imgfile").value;
    var regex = /\\|\\/;
    var array = bufstr.split(regex);
    return array[array.length - 1];
}

function send(formElem){
    var canvasElem = document.getElementById('imgcanvas');
    var canvasblob = base64ToBlob(canvasElem.toDataURL());
    var formData = new FormData(formElem);
    formData.append('imgfile', canvasblob, getFileName());
    $.ajax({
        type: 'POST',
        url: 'upload.php',
        data: formData,
        contentType: false,
        processData: false,
    }).done(function(responseData, status, jqXHR) {
        alert(responseData);
        location.reload();
    }).fail(function(responseError, status, errorThrown) {
        alert(responseError);
        location.reload();
    });
}

//フォームが送信される時に実行する処理
document.getElementById('postform').addEventListener('submit', function (e) {
    //フォームの要素を取得
    formElem = this;
    //フォームの送信をキャンセル
    e.preventDefault();
    //POST
    send(formElem);
}, false);