javascript - jQuery:cropit 删除图像数据并替换为新数据？

Question

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

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

第一个图像加载良好，一切正常。但是，如果我单击第二个图像或任何其他图像，它不会加载到裁剪区域，并且第一个图像由于某种原因总是卡在裁剪区域中。

我尝试创建一个 Fiddle 来解释这一点，但我认为由于某些安全原因，外部图像不会使用cropit.js 加载。另外，jsfiddle 不允许 http: url，所以我无法启动并运行 fiddle。但我的代码结构是这样的: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
              });
         });
     });
});

正如您在我的代码中看到的，我尝试在cropit src 函数中使用变量img。这有效，但只能一次。

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

有人可以就这个问题提出建议吗，因为我真的在用头撞墙。

提前致谢。

Answer 1

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