アスペクト比を固定した画像アップローダ

以前JavaScriptで画像をリサイズしてから画像をアップロードするを試しましたが、
CMS等で使用する画像アップロード類は最終的に画面に出力するためにアスペクト比が重要になることが多そうなので試してみました。

CroppieとBootstrap4（主にモーダルとファイルセレクタ）を使いました。

作ってみたところズームしたくなったから最大ズームサイズを設定したいんだけど？
https://github.com/Foliotek/Croppie/issues/232

まだないのでとりあえず動的にスライダーのminとmaxが変わるのでファイル選択時に設定する。

document.addEventListener('DOMContentLoaded', function() {

    // bootstrap input file
    $(document).on('change', '.custom-file-input', function(){
        $(this).next('.custom-file-label').html($(this)[0].files[0].name);
    });

    setFileEventListenner();
    var element = document.getElementById('demo-croppie');
    croppie = new Croppie(element, {
        enableExif: false,
        viewport: {
            width: 1050,
            height: 600,
            type: 'square'
        },
        boundary: {
            width: 1150,
            height: 700
        },
        showZoomer: true,
        enableResize: false,
        enableOrientation: true,
        mouseWheelZoom: 'ctrl',
        url: '/dummy_1150_700.png'// default image
    });
    document.getElementById('demo-result').addEventListener('click', function (){
        croppie.result('blob').then(function(blob) {
            var formData = new FormData();
            formData.append('file', blob, 'filename');

            // input type file の 値はjavascriptで上書き出来ないのでajaxで送信する
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState === XMLHttpRequest.DONE) {
                    if (xhr.status === 200) {
                        // success
                    } else {
                        // error
                    }
                    $('#croppieModal').modal('hide');
                }
            }
            xhr.open('POST', '/upload');
            xhr.send(formData);
        });
    });
});

function setFileEventListenner() {
    document.getElementById('demo-upload').addEventListener('change', loadCroppie);
}

function loadCroppie(event) {

    var fileObject = event.target.files[0];

    if (typeof fileObject === "undefined") {
        return;
    }

    if (fileObject.type.match(/^image\/(jpeg|png)$/) === null) {
        // jpegとpng以外の場合はクリアして終了
        var fileArea = document.getElementById("file-input");
        fileArea.innerHTML = fileArea.innerHTML;
        setFileEventListenner();
        return;
    }

    var reader = new FileReader();

    reader.onload = function(event) {
        croppie.bind({
            url: event.target.result// base64
        }).then(function(){
            var slider = document.querySelector('.cr-slider');
            slider.setAttribute('max', parseFloat(slider.getAttribute('min')) + 5);
        });
    };

    reader.readAsDataURL(fileObject);
}

バックエンドが無いので失敗しますが、ローカルではきちんとトリミングされた画像が保存できました。

full

See the Pen Croppie File Uploader by horikeso (@horikeso) on CodePen.