Question

我正在使用cropperjs Crooperjs来裁剪图像，我想为裁剪区域指定一个最小尺寸，Cropper为这些图像添加内联样式，以便用户查看，而不用占用整个屏幕的大小。

在此示例http://jsfiddle.net/abp7Lzc4/8中，Original Image的尺寸为835x470，但是在使用Cropper处理图像后，尺寸变为502x282.375，这是Cropper处理后的图像：

<img crossorigin="anonymous" src="https://raw.githubusercontent.com/fengyuanchen/cropperjs/master/docs/images/picture.jpg" class="cropper-hide" style="width: 502px; height: 282.375px; transform: none;">

现在裁剪区域的尺寸已由裁剪器定义，以匹配新的图像尺寸。

我想为裁剪框设置最小尺寸，例如300x300，但是，如果我使用CSS或javascript设置框的样式并为其指定尺寸，则新图像尺寸小于{{1 }}框将超出图像尺寸。

这是代码：

300x300

  window.addEventListener('DOMContentLoaded', function () {
    var image = document.querySelector('#image');
    var result = document.querySelector('#result');
    var cropper = new Cropper(image, {
      aspectRatio: 1,
      initialAspectRatio: 1,
      movable: false,
      scalable: false,
      zoomable: false,
      zoomOnTouch: false,
      zoomOnWheel: false,
      imageSmoothingEnabled: true,
      imageSmoothingQuality: 'high',
      toggleDragModeOnDblclick: false,
      minCropBoxWidth: 300,
      minCropBoxHeight: 300,
      cropBoxResizable: true,
      dragMode: 'move',
      viewMode: 0,
      ready: function () {
        var image = new Image();
        image.src = cropper.getCroppedCanvas().toDataURL('image/jpeg');
        result.appendChild(image);
      }, // ready
    }); // cropper
  }); // onload

.container {
  max-width: 640px;
  margin: 20px auto;
}

img {
  max-width: 100%;
}

如何做到这一点，那么无论图像尺寸是多少，最小裁剪区域尺寸都会裁剪出 <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.4.1/cropper.min.js"></script>  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.4.1/cropper.min.css"> <div class="container"> <h1>Crop a cross origin image</h1> <p>A cross origin image with a <code>crossorigin</code> attribute and an available <code>Access-Control-Allow-Origin</code> response header can be cropped by Cropper. </p> <h3>Image</h3> <div> <img id="image" src="https://raw.githubusercontent.com/fengyuanchen/cropperjs/master/docs/images/picture.jpg" crossorigin> </div> <h3>Result</h3> <div id="result"></div> </div> 尺寸的区域？

还是没有人知道可以实现我所寻求的替代方法或库？

设置裁剪区域的最小宽度和高度

0 个答案: