jQuery:用于删除图像数据并替换为新的数据？

Question

我正在使用cropit.js jquery插件在浏览器中裁剪图像。插件网站是这里。

我遇到的问题是，我正在根据单击的图像动态加载图像。

第一个图像装载很好，一切都很完美。但是，如果我单击第二个图像或任何其他图像，它不会加载到裁剪区，第一个图像总是由于某种原因被卡在裁剪区域。

我尝试创建一个Fiddle来解释这一点，但是我认为由于一些安全原因，外部映像不会使用cropit.js加载。而且，jsfiddle不允许http: url，所以我无法启动和运行小提琴。但是我的代码的结构是：https://jsfiddle.net/hhshgeed/

您只需在一个简单的html文件中本地运行这个文件，并将所有可用的图像都放在与html文件相同的文件夹中。此外，您还需要包括cropit.js。

这是我的全部代码：

$('.position').live('click', function(){
    var img = $(this).attr('src');
    alert(img);

    // Re-enables the cropper.
    // Does the opposite to `disable` method.
    $(function() {
        $('.image-editor').cropit({
            imageBackground: true,
            imageBackgroundBorderWidth: 20,
            imageState: {
                src: ''+img+'',
            }
         });

         $('.rotate-cw').click(function() {
             $('.image-editor').cropit('rotateCW');
         });

         $('.rotate-ccw').click(function() {
              $('.image-editor').cropit('rotateCCW');
         });

         $('.export').click(function() {
             var imageData = $('.image-editor').cropit('export', {
                 type: 'image/webp',
                 quality: .9,
                 originalSize: true
              });
         });
     });
});

正如您在我的代码中所看到的那样，我正在尝试在img函数中使用变量src。这很管用，但只有一次。

imageState: {
    src: ''+img+'',
}

有人能在这个问题上提出建议吗?因为我的头撞到墙上了。

提前谢谢。

Answer 1

您需要使用-- $('.image-editor').cropit('destroy');销毁当前的实例

Answer 2

您已经将整个cropit代码包装在一个$(function() {});块中。我不认为这是您想要的，因为该函数只在您第一次单击时触发。通过在该函数中抛出一个警报并单击几次，您可以看到它失败了；它只在第一次单击时触发。

如果您只是删除$(function() {});块，那么您的其余代码应该会触发，这可能解决了您所遇到的问题。