jcrop прикрепляется только один раз - PullRequest
Новая
       40

jcrop прикрепляется только один раз

1 голос
/ 28 января 2020

Мне нужно выполнить обрезку на стороне клиента.

Для этого я использую jcrop.

Теперь, так как моя поверхность обрезки должна соответствовать модальному режиму, я сделал следующее: (читайте ниже или код напрямую)

При изменении ввода я уничтожаю любой элемент jcrop и удаляю все теги css из моего изображения, кроме max- "width: 100 % ", чтобы изображение не переполнялось.

Тогда файл из входных данных присваивается в теге изображения. После этого отображается модальное значение, так что я могу получить ширину и высоту элемента изображения правильного размера.

Затем я назначаю эти размеры параметрам jcrop boxWidth и boxHeight и прикрепляю их к изображению, чтобы Элемент jcrop также не переполняется. Мне пришлось поместить код вокруг него внутри функции fileReader.onload, чтобы он принимал размеры только после изменения источника изображения. 

$(document).on('change', '#upload', function (evt) {
        var tgt = evt.target || window.event.srcElement,
            files = tgt.files;
        $('.jcrop-holder').remove();
        $('#studentPhoto').css("width", "");
        $('#studentPhoto').css("height", "");
        $('#studentPhoto').css("visibility", "");
        $('#studentPhoto').css("display", "");

        // FileReader support
        if (FileReader && files && files.length) {
            var fr = new FileReader();
            var w;
            var h;
            fr.onload = function () {
                $('#studentPhoto').attr('src', fr.result)
                $('#imgMOD').show('fast', '', function () {
                    w = $('#studentPhoto').width();
                    h = $('#studentPhoto').height();
                    $('#studentPhoto').Jcrop({
                        onSelect: showCoords,
                        aspectRatio: 667 / 500,
                        boxWidth: w,
                        boxHeight: h
                    });
                });


            }
            fr.readAsDataURL(files[0]);
        }

        function showCoords(c) {
            $('#x').text(c.x);
            $('#y').text(c.y);
            $('#x2').text(c.x2);
            $('#y2').text(c.y2);
            $('#w').text(c.w);
            $('#h').text(c.h);
        };
    });

Проблема в том, что, хотя отладчик показывает, что. Часть jcrop достигнута, она не создаст элемент jcrop после второго изменения. Первый раз работает отлично.

1 Ответ

0 голосов
/ 31 января 2020

Хорошо, так что Jcrop Я не знаю, чем это отличается, но этот способ удаления Jcrop решает проблему. 

if ($('#studentPhoto').data('Jcrop')) {
                    $('#studentPhoto').data('Jcrop').destroy();}
...