Cropper is not working on changing the image in cropperjs

user_7702021 0
Viewed 2543

I am using cropper.js as cdn link. I can use cropper functionality completely fine on first image upload but when I upload new image, the existing image is not getting changed in cropping section. How can I re-initialise cropper with new data.

Here is my full code:

function readURL(input) {
    globalImage = document.querySelector('input[type=file]').files[0];
    const reader = new FileReader();
    reader.onload = function readerOnload(e) {
        $('#previewImage').attr('src', e.target.result);
    };
    reader.readAsDataURL(document.querySelector('input[type=file]').files[0]);
    reader.onloadend = (function () {
        initCropper()
    });
}

function initCropper() {
    const image = document.getElementById('previewImage');
    var imgSrc = $('#previewImage').attr('src');
    var cropper = new Cropper(image, {
        dragMode: 'move',
        preview: '.preview',
        aspectRatio: 12 / 12,
        minContainerWidth: 400,
        maxContainerWidth: 400,
        minContainerHeight: 350,
        maxContainerHeight: 350,
        viewMode: 2,
        responsive:true,
        autoCrop: true,
        ready: function() {
            $('#crop_button').trigger('click');
        }
    });
    document.getElementById('crop_button').addEventListener('click', () => {
        var imgurl = cropper.getCroppedCanvas({ 
            width: 160,
            height: 160,
            minWidth: 256,
            minHeight: 256,
            maxWidth: 4096,
            maxHeight: 4096,
            fillColor: '#fff',
            imageSmoothingEnabled: false,
            imageSmoothingQuality: 'high'
        }).toDataURL();
        $('#croppedImage').attr('src', imgurl);
    })
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.7/cropper.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.7/cropper.css"></link>
</head>
<body>
<input required id="custom_photo" type="file" onchange="readURL(this);" name="properties[Your Image]" class="product-form__input">
<button id="crop_button">Crop</button>
<table>
    <tr>
        <td>
            <div>
                <img style="width:450px;height:400px;display: none;" id="previewImage" src="">
            </div>
        </td>
        <td>
            <div>
                <img style="display: inline-block; height: auto;" id="croppedImage" src="">
            </div>
        </td>
    </tr>
</table>
</body>
</html>

Anyone help me out in this issue, thanks in advance.

cropperjs jquery javascript
1 Answers

To reinitialize it with a different image, first, you will have to call the cropper.destroy() method

You can then initialize it like before with the cropper = new Cropper(image,{});

Note: If you are using it with Bootstrap modal, make sure you initialize it in the following method

$('#modal').one('shown.bs.modal', function () {
    btnUpload.setAttribute("disabled", "disabled");
    cropper = new Cropper(image,{});
});

use one instead of on in the modal shown event handler, as it only gets called once, and it will properly initialize the cropper instance for you. But on gets called twice in cases when users may have used modal and may have dismissed it. With on you will get getCroppedCanvas() as null.

user_32359590
Related