无法看到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;
}

还分叉your plunk和your updated plunk。