Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

以前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.

horikeso
個人的な備忘録ばかりですが、よろしくお願いします。難しいことはよくわかりません!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away