Как запустить Cropper после выбора файла, не получая 404 на img?

Я пытаюсь реализовать обрезку изображений на своем веб-сайте, но у меня возникают некоторые проблемы, от которых я не знаю, как избавиться.

Ожидаемое поведение: когда пользователи выбирают изображение с диска через ввод файла, отображается модальное окно, в котором вам нужно обрезать изображение (с заранее заданным соотношением сторон), а затем они должны нажмите кнопку «Обрезать», чтобы подтвердить, что у них есть обрезка, чтобы отобразить обрезанное изображение в теге img.

Что происходит. Выбранное изображение появляется на миллисекунду в модальном окне, затем исчезает и выводит на консоль ошибку 404.

На самом деле я использую Cropper

Вот моя попытка:

    var image = document.getElementById('imageToCrop');
    document.getElementById("customFile").onchange = function (e) { // customFile is the id of my input file !
        if (typeof FileReader !== "undefined") {
            let size = e.target.files[0].size;
            if (size > 2048000) {
                $('#fileTooBigErrorModal').modal({
                    show: true
                })
                this.value = "";
                document.getElementById("customFileLabel").innerHTML = "Choose file";
            } else {
                document.getElementById("customFileLabel").innerHTML = e.target.files[0].name;
                image.src = ""
                var reader = new FileReader();
                var cropBoxData;
                var canvasData;
                var cropper;
                reader.onload = function (evt) {
                    image.src = evt.target.result;
                };
                reader.readAsDataURL(e.target.files[0]);
                $('#cropModal').on('shown.bs.modal', () => {
                    image.setAttribute('src', e.target.files[0].name);
                    cropper = new Cropper(image, {
                        viewMode: 3,
                        aspectRatio: 4 / 1,
                        ready: function () {
                            //Should set crop box data first here
                            cropper.setCropBoxData(cropBoxData).setCanvasData(canvasData);
                        },
                        crop: function (event) {
                            //test
                        }
                    });
                    $('#cropBtn').click((e) => {
                        cropper.getCroppedCanvas({ width: 800, height: 200 }).toBlob((blob) => {
                            $('#result').append('<img src="' + blob + '" alt="Result picture">');
                        });
                        $('#cropModal').modal('hide');
                    })
                }).on('hidden.bs.modal', function () {
                    cropBoxData = cropper.getCropBoxData();
                    canvasData = cropper.getCanvasData();
                    cropper.destroy();
                });
                $('#cropModal').modal('show');
            }
    
        }
    };
        <div class="modal fade" id="cropModal" tabindex="-1" role="dialog" aria-labelledby="cropModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="cropModalLabel">Crop</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div>
                            <img id="imageToCrop" src="#" alt="Picture to crop">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" id="cropBtn" class="btn btn-primary">Crop</button>
                    </div>
                </div>
            </div>
        </div>

Я искал решение около 3 дней. Все еще не могу понять. :/


javascript jquery ajax bootstrap-4 cropper
person elias54    schedule 06.02.2019    source источник
comment
Мне все еще некому помочь? :/   -  person elias54    schedule 08.02.2019

Ответы (1)


arrow_upward
0
arrow_downward

Создайте экземпляр объекта обрезки после загрузки изображения.

Вот как я решил:

reader.onloadend = e => {
    this.imgTarget.attr("src", (e.target as any).result);
    this.cropperObj = new Cropper(this.imgTarget[0] as HTMLImageElement, { // option attibutes here
    });
}
person Walter Schweitzer    schedule 16.10.2019