1

我正在使用cropper.js jquerycropper 裁剪多个图像，但是当我选择图像时，cropper 不允许再次选择相同的图像这是我的cropper 代码。

var result = document.querySelector('.result'),
   img_result = document.querySelector('.img-result'),
   img_w = document.querySelector('.img-w'),
   img_h = document.querySelector('.img-h'),
   options = document.querySelector('.options'),
   save = document.querySelector('.save'),
   cropper = '';

    upload.addEventListener('change', function (e) {
        if (e.target.files.length) {
            var reader = new FileReader();
            reader.onload = function (e) {
                if (e.target.result) {
                    var img = document.createElement('img');
                    img.id = 'image';
                    img.src = e.target.result;
                    result.innerHTML = '';
                    result.appendChild(img);
                    save.classList.remove('hide');
                    options.classList.remove('hide');
                    cropper = new Cropper(img);
                }
            };
            reader.readAsDataURL(e.target.files[0]);
        }
    });

    save.addEventListener('click', function (e) {
        e.preventDefault();
        var imgSrc = cropper.getCroppedCanvas({
            width: img_w.value,
            height: img_h.value
        }).toDataURL();
        cropped.classList.remove('hide');
        img_result.classList.remove('hide');
        switch (imageNo) {
            case 1:
                imageC1 = document.querySelector('.imageC1');
                cropped = document.querySelector('.cropped1');
                imageC1.value = imgSrc;
                $('.removeFirst').show();
                break;
            case 2:
                imageC1 = document.querySelector('.imageC2');
                cropped = document.querySelector('.cropped2');
                imageC1.value = imgSrc;
                $('.removeSecond').show();
                break;
            case 3:
                imageC1 = document.querySelector('.imageC3');
                cropped = document.querySelector('.cropped3');
                imageC1.value = imgSrc;
                $('.removeThird').show();
                break;

            default:
                imageC1 = document.querySelector('.imageC1');
                cropped = document.querySelector('.cropped1');
                imageC1.value = imgSrc;
                $('.removeFirst').show();
        }

    });

当我裁剪图像裁剪器时不会再次裁剪相同的图像。如何在 jquery 中重置裁剪器。当我点击保存按钮时，我想在这里重置裁剪器

$(".save").click(function () {

       //reset cropper here
    });
4

0 回答 0