Cropper 无法更改cropperjs 中的图像答案

【问题标题】：Cropper is not working on changing the image in cropperjsCropper 无法更改cropperjs 中的图像
【发布时间】：2020-06-05 14:55:01
【问题描述】：

我使用cropper.js 作为cdn 链接。我可以在第一次上传图像时完全使用裁剪器功能，但是当我上传新图像时，现有图像在裁剪部分没有改变。如何使用新数据重新初始化裁剪器。

这是我的完整代码：

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>

任何人都可以帮助我解决这个问题，在此先感谢。

【问题讨论】：

可能只是你的第二张图片的文件格式不对不会有坏处如果你检查一下因为我自己没有使用cropper.js 我用的是Jcrop.js
我使用了相同的文件格式，也尝试过使用 png 和 jpg 文件格式。无论如何我会尝试使用 Jcrop.js，谢谢
我也尝试过使用 Jcrop.js，但这也有同样的问题..
他们有destroy() 方法，然后再次初始化插件

标签： javascript jquery cropperjs

【解决方案1】：

要使用不同的图像重新初始化它，首先，您必须调用cropper.destroy() 方法

然后您可以像以前一样使用 cropper = new Cropper(image,{}); 初始化它

注意：如果你使用的是 Bootstrap modal，请确保你用下面的方法初始化它

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

在模态显示的事件处理程序中使用one 而不是on，因为它只被调用一次，它会为您正确初始化裁剪器实例。但是on 会在用户可能已经使用模态并且可能已经忽略它的情况下被调用两次。使用on，您将得到getCroppedCanvas() 为空。

【讨论】：