javascript - 无法看到 cropper js 的预览

Question

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

谁能告诉我一些解决办法

Plunker

脚本

 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;
}

也 fork 了 your plunk和 your updated plunk .