无法看到 cropper js 的预览

Question

我使用 cropper.js 创建了一个用于裁剪图像的应用程序，该应用程序正在运行并且正在裁剪图像，但我无法看到预览，我的预览 div 在裁剪时没有正确填充任何内容。我的代码如下

谁能告诉我一些解决方案

脚本

 var $image = $('.img-container > img'),
    $dataRotate = $('#dataRotate'),
    options = {
       modal: true,
       guides: true,
       autoCrop: false,
       dragCrop: true,
       movable: true,
       resizable: true,
       zoomable: false,
       touchDragZoom: false,
       mouseWheelZoom: false,
       preview: '.preview',
      crop: function (data) {
        $dataRotate.val(Math.round(data.rotate));
      }
    };

Answer 1

您需要使用 css 设置 .preview 元素的大小。同时将溢出设置为隐藏，例如

.preview {
  overflow: hidden;
  width: 50px; 
  height: 50px;
}

也分叉了 your plunk and your updated plunk。

无法看到 cropper js 的预览

not able to see the preview for cropper js

javascript

jquery

image

crop