Question

裁剪器在引导模式弹出窗口中打开，每次我们尝试将图像添加到裁剪时，弹出内部会显示多个图像。此问题仅在safari浏览器中被注意到。每次我们上传新图像时，裁剪器都附加'cropper-container'div，它是裁剪器容器。

cropperjs链接：https://github.com/fengyuanchen/cropperjs/

请在下面找到初始化代码：

$('#message-item-popup').on('show.bs.modal', function (e) {
    setTimeout(function() {
        var cropImage = $('#message-item-popup .img-container > img');
        cropImage.cropper("destroy");
        $('input[type="file"]').val('');
        cropImage.cropper({
            aspectRatio:1,
            strict:true,
            background:false,
            guides:false,
            rotatable:true,
            autoCropArea: .6,
            cropBoxResizable: false,
            cropBoxMovable:false,
            dragMode:'move',
            minCropBoxWidth: 350,
            minCropBoxHeight: 350
        });
    },500);
});

附上问题的屏幕截图：

找到此问题的解决方案：在模态隐藏方法中销毁cropperjs和清空src属性。

$('#message-item-popup').on('show.bs.modal', function (e) {
    setTimeout(function() {
        var cropImage = $('#message-item-popup .img-container > img');
        cropImage.cropper({
            aspectRatio:1,
            strict:true,
            background:false,
            guides:false,
            rotatable:true,
            autoCropArea: .6,
            cropBoxResizable: false,
            cropBoxMovable:false,
            dragMode:'move',
            minCropBoxWidth: 350,
            minCropBoxHeight: 350
        });
    },200);
});
$('#message-item-popup').on('hidden.bs.modal', function (e) {
    var cropImage = $('#message-item-popup .img-container > img');
    cropImage.cropper("destroy").removeAttr('src');
    $('input[type="file"]').val('');
});

在safari问题cropperjs

0 个答案: