Question

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

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

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

我试图创建一个小提琴来解释这一点，但我认为由于一些安全原因，外部图像不会使用cropit.js加载。此外，jsfiddle不会允许http：url's所以我无法让小提琴运行起来。但我的代码结构如下：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 img函数中使用变量src。这只能工作一次。

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

有人可以就这个问题提出建议，因为我真的把头靠在墙上。

提前致谢。

Answer 1

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

Answer 2

您已将整个cropit代码封装在$(function() {});块内。我不认为这是你想要的，因为该功能仅在您第一次点击时触发。您可以通过在该函数内部发出警报并单击几次来看到它失败;它只会在第一次点击时触发。

如果您只是删除$(function() {});阻止，则应触发其余代码，这可能会解决您遇到的问题。

jQuery：cropit删除图像数据并替换为新图像？

2 个答案: