带有 ajax 图像更新的 jquery guillotine 插件

Posted 2023-02-25

【中文标题】带有 ajax 图像更新的 jquery guillotine 插件

【英文标题】：jquery guillotine plugin with ajax image update

【发布时间】：2015-02-26 09:59:43

【问题描述】：

我正在使用 jquery guillotine 插件进行缩放和调整大小，并且我正在通过 ajax 调用更新图像 src，但是在更改时我没有得到坐标，基本 guillotine('getData') 没有返回任何内容，下面是我正在使用的代码。

jQuery(document).ready(function()
       picture = jQuery('#sample_picture');
       picture.guillotine('fit');
       picture.on('load', function()
        picture.guillotine(eventOnChange: 'guillotinechange');
        var img = jQuery(this);
        img.guillotine(eventOnChange: 'guillotinechange');
       // Remove any existing instance
       if (img.guillotine('instance')) img.guillotine('remove');
               img = jQuery('#sample_picture');
               img.guillotine(width: 387, height:594);
               img.guillotine('fit');
       if (! img.data('bindedBtns')) 
               img.data('bindedBtns', true)
               jQuery('#fit').click(function() img.guillotine('fit'); );
               jQuery('#zoom_in').click(function(  img.guillotine('zoomIn'); );
               jQuery('#zoom_out').click(function() img.guillotine('zoomOut'); );
       
       var data = img.guillotine('getData');
        if(data)
               for(var key in data) alert(data['key']); jQuery('#'+key).html(data[key]); 
        
        // Bind button actions
        jQuery('#rotate_left').click(function() img.guillotine('rotateLeft'); );
        jQuery('#rotate_right').click(function() img.guillotine('rotateRight'); );
        jQuery('#fit').click(function() img.guillotine('fit'); );
        jQuery('#zoom_in').click(function() img.guillotine('zoomIn'); );
        jQuery('#zoom_out').click(function() img.guillotine('zoomOut'); );
           // Update data on change
           img.on('guillotinechange', function(ev, data, action) 
          data.scale = parseFloat(data.scale.toFixed(4));
          for(var k in data)  jQuery('#'+k).html(data[k]); 
        );
      );
);

【参考方案1】：

我猜您已经阅读了this answer，但您似乎只是粘贴了来自不同来源的冲突代码。

在第三行，您甚至在拥有插件实例之前就尝试适应图像，然后您在同一个图像上实例化它三次：

picture.guillotine(eventOnChange: 'guillotinechange') img.guillotine(eventOnChange: 'guillotinechange') img.guillotine(width: 387, height:594)

您还可以将按钮绑定到操作（旋转、缩放等）并解析两次数据。

我会尝试从 Guillotine 自己的 example 之类的更简单的东西开始，并且只有当您开始进行更复杂的工作时，例如通过 AJAX 加载图像并交换 src 属性。