Question

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

Answer 1

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

在第三行，您甚至在拥有插件实例之前尝试拟合图像，然后在同一图像上将其实例化三次：

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

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

我很高兴从像Guillotine自己的example这样简单的东西开始，只有当你开始做一些更复杂的工作时，例如通过AJAX加载图像并交换src属性

jquery断头台插件与ajax图像更新

1 个答案: