JavaScript-Load-Imageを使って画像をリサイズし、jquery AjaxでPOSTする

こちらを利用させていだだきます。感謝。
https://github.com/blueimp/JavaScript-Load-Image

input="file"にて、iPhoneでカメラを撮影した時、横に向いてしまい困っていました。
そんな時にJavaScript-Load-Imageを見つけて助かったのでメモ。
JavaScript-Load-Imageを使って画像をリサイズし、AjaxでPOSTさせました。

CDNを読み込む(jqueryも読み込む)

<script src="https://cdn.rawgit.com/blueimp/JavaScript-Load-Image/v2.6.2/js/load-image.all.min.js"></script>

こういうhtmlを記述する,サムネイルが入る箇所の初期値は好きにデザインする。

prevに対して、背景でプレビューを表示させる

<div id="file_upload" class="file-upload">
    <div id="prev" class="prev" data-file-image></div>
    <label class="imgfile btn" for="imgfile">
        <input class="imgfile__input" type="file" id="imgfile">
        <div class="imgfile__button">画像選択する</div>
    </label>
</div>

背景にプレビューを表示させる。
optionsで、画像のサイズを入れておく。

    $('#imgfile').on('change', function (e) {
        displayInputFilePreview(e)
    });

    function displayInputFilePreview(e) {
        const file = e.target.files[0];
        loadImage.parseMetaData(file, function (data) {
            var options = {
                maxHeight: 1024,
                maxWidth: 1024,
                canvas: true
            };
            if (data.exif) {
                options.orientation = data.exif.get('Orientation');
            }
            loadImage(file, function (data) {
                var dataUri = data.toDataURL('image/jpeg');
                $('#prev')
                        .attr('data-file-image', dataUri)
                        .css('background-image', 'url(' + dataUri + ')');
            }, options);
        });
    }

jquery ajaxにて、formDataを使って画像を送信する。

$('さぶみっとぼたん').on('click', function () {

    if (!$('#imgfile').val()) {
        alert('画像が選択されていません');
        return false;
    }

    //submit連打禁止
    $(this).prop("disabled", true);

    var imageFile = setCanvasImageData($("#prev"));

    var formData = new FormData($('#form').get(0));
    formData.append('imgfile', imageFile);
    formData.append('text', $('#text').val()); //textareaなど。

    $.ajax({
        url: //url,
        type: 'POST',
        data: formData,
        ~~~~
    });
});


/**
 * 画質落とさずバイナリ化
 * @param base64
 * @returns {{}}
 */
function setCanvasImageData(elem) {
    var image = elem.get(0);
    var originalBinary = image.dataset.fileImage;
    return base64ToBlob(originalBinary); //canvasのblobデータをアップロード用blobに設定
}

/**
 * 引数のBase64の文字列をBlob形式にする
 * @param base64
 * @returns {{}}
 */
function base64ToBlob(base64) {
    try {
        var separetedDate = base64.split(',');
        var mimeTypeData = separetedDate[0].match(/:(.*?);/);
        var mimeType = Array.isArray(mimeTypeData) ? mimeTypeData[0] : '';
        var decodedData = atob(separetedDate[1]);
        var dataLength = decodedData.length;
        var arrayBuffer = new ArrayBuffer(dataLength);
        var u8arr = new Uint8Array(arrayBuffer);

        for (var i = 0; i < dataLength; i += 1) {
            u8arr[i] = decodedData.charCodeAt(i);
        }
        return new Blob([u8arr], {type: mimeType});
    } catch (errors) {
        return new Blob([])
    }
}

iphoneやandroidで画像とテキストなど、一緒に送るときは formData.append で１つづついれていかないとダメだったような気がします。
jqueryを使ってformのデータをAJAXで送る時にFormDataを使うならappendに気を配る - Qiita

関数や変数名はざっくりだから、調整を行う！