jquery guillotine插件与ajax图像更新

Question

我正在使用jquery guillotine插件进行缩放和调整大小，我正在通过ajax调用更新图像src，但在更改时，我没有得到cordinate basicaly guillutine（'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]); }
        });
      });
});

Answer 1

我想您已经阅读了这个答案，但似乎只是粘贴了来自不同来源的冲突代码。

在第三行中，您甚至在拥有插件实例之前就声明要适合该图像，然后在同一图像上实例化三次：

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

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

我想从更简单的东西开始，比如Guillotine自己的例子，只有当你开始工作时，才能转到更复杂的东西，比如通过AJAX加载图像和交换src属性。