Javascript 浏览未正确裁剪的图像

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

在第一个图像被裁剪后，如果您加载第二个图像我将无法裁剪。此外，当我双击图像，然后再次单击拖动时，图像会发生一些意外的移动

谁能告诉我一些解决方法吗

脚本

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

---

我对你看到的问题有点困惑，但我看到的是：

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

原因是裁剪框元素是

display:none

。这是因为您的旧裁剪器已被隐藏，您需要将其

重置（）

和

清除（）

才能与新图像一起使用。您已经获得以下信息：

$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);