jQuery 断头台插件 - 在哪里设置高度和宽度

jQuery Guillotine plugin - where to set height and width

本文关键字：高度 设置 在哪里 断头台 插件 jQuery      更新时间：2023-09-26

我正在使用断头台插件;

jQuery 断头台插件 v1.3.1 http://matiasgagliano.github.com/guillotine/

我正在使用演示代码进行测试，但尝试设置宽度和高度。无论我在哪里设置宽度和高度，getData 方法都会失败。如果我删除宽度和高度声明（默认为 400 x 300 像素），getData 将再次工作，并且在您单击缩放等时控制面板会更新

<script type='text/javascript'>
jQuery(function() {
var picture = $('#memberPhoto');
//SETTING THE WIDTH AND HEIGHT CAUSES GETDATA() TO STOP WORKING
//THE CONTROL PANEL DOES NOT UPDATE AND THE OUTPUT OF GETDATA IS EMPTY
//picture.guillotine({width: 250, height: 300});

  // Make sure the image is completely loaded before calling the plugin
  picture.one('load', function(){

    // Initialize plugin (with custom event)
    picture.guillotine({eventOnChange: 'guillotinechange'});
    picture.guillotine('fit')

    // Display inital data
    var data = picture.guillotine('getData');
    for(var key in data) { $('#'+key).html(data[key]); }
    // Bind button actions
    $('#rotate_left').click(function(){ picture.guillotine('rotateLeft'); });
    $('#rotate_right').click(function(){ picture.guillotine('rotateRight'); });
    $('#fit').click(function(){ picture.guillotine('fit'); });
    $('#zoom_in').click(function(){ picture.guillotine('zoomIn'); });
    $('#zoom_out').click(function(){ picture.guillotine('zoomOut'); });
    // Update data on change
    picture.on('guillotinechange', function(ev, data, action) {
      data.scale = parseFloat(data.scale.toFixed(4));
      for(var k in data) { $('#'+k).html(data[k]); }
      console.log(data);
    });
  });
  // Make sure the 'load' event is triggered at least once (for cached images)
  if (picture.prop('complete')) picture.trigger('load')


});

如果我直接在源代码中设置高度和宽度，一切都很好。谁能帮忙..？

谢谢罗尔夫

您遇到的问题是需要在加载图像后传入设置。

JavaScript：

     jQuery(function() {        

var picture = $('#sample_picture');
 // Make sure the image is completely loaded before calling the plugin
 //SETTING THE WIDTH AND HEIGHT CAUSES GETDATA() TO STOP WORKING
//THE CONTROL PANEL DOES NOT UPDATE AND THE OUTPUT OF GETDATA IS EMPTY
 //picture.guillotine({width: 250, height: 300});

      picture.one('load', function(){
          /*PATCH: Settings need to be passed in after the object has loaded*/
        // Initialize plugin (with custom event)
        picture.guillotine({
            width: 250, height: 300,//<- Add plugin properties here.
            eventOnChange: 'guillotinechange'

        });
        // Display inital data
        var data = picture.guillotine('getData');
        for(var key in data) { $('#'+key).html(data[key]); }
        // Bind button actions
        $('#rotate_left').click(function(){ picture.guillotine('rotateLeft'); });
        $('#rotate_right').click(function(){ picture.guillotine('rotateRight'); });
        $('#fit').click(function(){ picture.guillotine('fit'); });
        $('#zoom_in').click(function(){ picture.guillotine('zoomIn'); });
        $('#zoom_out').click(function(){ picture.guillotine('zoomOut'); });
        // Update data on change
        picture.on('guillotinechange', function(ev, data, action) {
          data.scale = parseFloat(data.scale.toFixed(4));
          for(var k in data) { $('#'+k).html(data[k]); }
        });
      });
      // Make sure the 'load' event is triggered at least once (for cached images)
      if (picture.prop('complete')) picture.trigger('load');
    });
相关文章：