javascript - 浏览图像未正确裁剪

Question

我已经使用 cropper.js 创建了一个应用程序 用于裁剪图像。应用程序正在运行并且图像正在裁剪，这可以在预览中看到。

第一张图片裁剪后，如果您加载第二张图片，我将无法裁剪。此外，当我双击图像然后再次单击进行拖动时，图像发生了一些意想不到的移动。

谁能告诉我一些解决办法

Plunker

脚本

  var $image = $('.img-container > img'),
      options = {
        modal: true,
        guides: true,
        autoCrop: false,
        dragCrop: true,
        movable: true,
        preview: '.preview',
        crop: function(data) {
        }
      };

Answer 1

我对你看到的问题有点困惑，但这是我所看到的:

我第二次将图像加载到您的 Plunker 时，裁剪区域消失了，但我仍然可以单击并拖动裁剪区域。

这是因为裁剪框元素是 display:none。这是因为您的旧裁剪器已被隐藏，您需要对其进行reset() 和clear() 才能与新图像一起使用。您已经拥有以下内容:

$image.one('built.cropper', function () {
              URL.revokeObjectURL(blobURL); // Revoke when load complete
            }).cropper('reset', true).cropper('replace', blobURL);

但是你缺少clear()

$image.one('built.cropper', function () {
              URL.revokeObjectURL(blobURL); // Revoke when load complete
            }).cropper('reset', true).cropper('clear').cropper('replace', blobURL);

Plunker (既然你这么客气地问了)