浏览图像未正确裁剪答案

【问题标题】：browse image not cropping properly浏览图像未正确裁剪
【发布时间】：2015-06-29 21:04:50
【问题描述】：

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

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

谁能告诉我一些解决方法

脚本

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

【问题讨论】：

标签： javascript jquery image crop

【解决方案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（因为你问得这么客气）

【讨论】：

你能不能给我一个plunker