浏览图像未正确裁剪

Question

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

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

谁能告诉我一些解决方案

脚本

  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（既然你这么客气地问了）

浏览图像未正确裁剪

browse image not cropping properly

javascript

jquery

image

crop