时间戳

首页 > 解决方案 > Cropper 无法更改cropperjs 中的图像

javascript - Cropper 无法更改cropperjs 中的图像

问题描述

我使用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>

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

标签： javascriptjquerycropperjs

解决方案

要使用不同的图像重新初始化它，首先，您必须调用该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()空值。

推荐阅读