问Cropperjs固定裁剪区域高度/宽度到裁剪图像
EN

Stack Overflow用户

提问于 2019-09-25 22:00:29

回答 1查看 1.3K关注 0票数 0

我在MVC5Razor页面上使用cropper.js，我不想让用户用鼠标选择裁剪区域，我想初始化裁剪对象的预定义裁剪(选定)区域，用户无法调整大小，但用户可以移动裁剪区域的图片裁剪的一部分。

我没有找到任何选项来禁用剪辑，我检查了他们的Git page，它看起来没有能力，而且我在Git page上发布了我的请求，但没有得到任何回应。我需要帮助，我怎样才能解决这个问题。

        window.onload = function() {

            var Cropper = window.Cropper;
            var URL = window.URL || window.webkitURL;
            var container = document.querySelector('.img-container');
            var image = container.getElementsByTagName('img').item(0);
            var download = ''; 
            var actions = document.getElementById('actions');
            var dataX = 128; 
            var dataY = 72; 
            var dataHeight = 1024; 
            var dataWidth = 576; 
            var dataRotate = 0;  
            var dataScaleX = -1; 
            var dataScaleY = 1;  
            var options = {
                aspectRatio: 16 / 9,
                preview: '.img-preview',
                ready: function (e) {
                    console.log(e.type);
                },
                cropstart: function (e) {
                    console.log(e.type, e.detail.action);
                },
                cropmove: function (e) {
                    console.log(e.type, e.detail.action);
                },
                cropend: function (e) {
                    console.log(e.type, e.detail.action);
                },
                crop: function (e) {
                    var data = e.detail;

                    console.log(e.type);
                    dataX.value = Math.round(data.x);
                    dataY.value = Math.round(data.y);
                    dataHeight.value = Math.round(data.height);
                    dataWidth.value = Math.round(data.width);
                    dataRotate.value = typeof data.rotate !== 'undefined' ? data.rotate : '';
                    dataScaleX.value = typeof data.scaleX !== 'undefined' ? data.scaleX : '';
                    dataScaleY.value = typeof data.scaleY !== 'undefined' ? data.scaleY : '';
                },
                zoom: function (e) {
                    console.log(e.type, e.detail.ratio);
                }
            };

            var cropper = new Cropper(image, options);
        }

    .img-container {
        min-height: 497px;
        max-width: 497px;
        margin-bottom: 1rem;
        background-color: white;
        text-align: center;
        width: 100%;
    }

    .img-container > img {
        max-width: 100%;
    }

    img {
        vertical-align: middle;
        border-style: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.5/cropper.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.5/cropper.css" rel="stylesheet"/>

<div class="img-container">
    <img src="https://images.pexels.com/photos/266011/pexels-photo-266011.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" id="croppr" />
</div>

javascript

cropperjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-10-01 15:11:16

参考@Chris W.的帮助，我能够使用固定的裁剪区域进行设置。

        var image = document.getElementById('croppr');
        var cropper = new Cropper(image, {
            dragMode: 'move',
            aspectRatio: 16 / 9,
            autoCropArea: 0.65,
            restore: false,
            guides: false,
            center: false,
            highlight: false,
            cropBoxMovable: true,
            cropBoxResizable: false,
            toggleDragModeOnDblclick: false,
        });

    .img-container {
        min-height: 497px;
        max-width: 497px;
        margin-bottom: 1rem;
        background-color: white;
        text-align: center;
        width: 100%;
    }

    .img-container > img {
        max-width: 100%;
    }

    img {
        vertical-align: middle;
        border-style: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.5/cropper.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.5/cropper.css" rel="stylesheet"/>

<div class="img-container">
    <img src="https://images.pexels.com/photos/266011/pexels-photo-266011.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" id="croppr" />
</div>