jQuery:裁剪以删除图像数据并替换为新数据

jQuery: cropit to remove image data and replace with a new one?

本文关键字：数据 新数据 替换 裁剪 删除 图像 jQuery      更新时间：2023-09-26

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

我

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

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

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

您只需要在一个简单的html文件中本地运行它，所有可用的图像都与html文件位于同一文件夹中。此外，您还需要包括裁剪.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+'',
}

有人可以就这个问题提供建议，因为我实际上是在用头撞墙。

提前谢谢。

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

您已将

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

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

相关文章：