文章/答案/技术大牛

发布

社区首页 >问答首页 >Cropper不打算用cropperjs改变图像。

问Cropper不打算用cropperjs改变图像。
EN

Stack Overflow用户

提问于 2020-06-05 14:55:01

回答 1查看 2.7K关注 0票数 2

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

这里是我的完整代码：

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>

任何人在这个问题上都能帮我，谢谢。

cropperjs

javascript

jquery

回答 1

Stack Overflow用户

发布于 2020-10-14 10:33:23

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

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

注意:如果您使用的是Bootstrap模式，请确保在下面的方法中初始化它

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

在模态显示的事件处理程序中使用one而不是on，因为它只被调用一次，它将正确地为您初始化cropper实例。但是，当用户可能已经使用了模式，并且可能已经拒绝使用模式时，on会被调用两次。使用on，您将获得getCroppedCanvas()为null。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62218247

复制

相似问题

问Cropper不打算用cropperjs改变图像。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Cropper不打算用cropperjs改变图像。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Cropper不打算用cropperjs改变图像。
EN