Javascript jQuery断头台插件-在何处设置高度和宽度

我正在使用断头台插件

jQuery断头台插件v1.3.1

我正在使用演示代码进行测试，但试图设置宽度和高度。无论我在哪里设置宽度和高度，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')




});

jQuery（函数（）{
var picture=$（“#memberPhoto”）；
//设置宽度和高度会导致GETDATA（）停止工作
//控制面板不更新，GETDATA的输出为空
//图片.断头台（{宽：250，高：300}）；
//在调用插件之前，请确保图像已完全加载
图片一（'加载'，函数（）{
//初始化插件（使用自定义事件）
图片.断头台（{eventOnChange:'guillotinchange'}）；
图片。断头台（“适合”）
//显示初始数据
var data=picture.guillotine（'getData'）；
for（var-key-in-data）{$（'#'+key）.html（data[key]）}
//绑定按钮操作
$（'rotate_left'）。单击（function（）{picture.guillotine（'rotateLeft'）；}）；
$（'rotate_right'）。单击（function（）{picture.guillotine（'rotateRight'）；}）；
$（'fit'）。单击（function（）{picture.guillotine（'fit'）；}）；
$（'zoom#u in'）。单击（函数（）{picture.guillotine（'zoomIn'）；}）；
$（'zoom#u out'）。单击（函数（）{picture.guillotine（'zoomOut'）；}）；
//更新有关变化的数据
图.on（‘断头台更换’）功能（电动汽车、数据、动作）{
data.scale=parseFloat（data.scale.toFixed（4））；
对于（数据中的var k）{$（'#'+k）.html（数据[k]）}
控制台日志（数据）；
});
});
//确保“加载”事件至少触发一次（对于缓存的图像）
if（picture.prop（'complete'））picture.trigger（'load'））
});

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

谢谢

---

Rolf

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

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');
    });

jQuery（函数（）{
变量图片=$（'样本图片'）；
//在调用插件之前，请确保图像已完全加载
//设置宽度和高度会导致GETDATA（）停止工作
//控制面板不更新，GETDATA的输出为空
//图片.断头台（{宽：250，高：300}）；
图片一（'加载'，函数（）{
/*补丁：加载对象后需要传入设置*/
//初始化插件（使用自定义事件）
断头台({
宽度：250，高度：300，//您遇到的问题是在加载图像后需要传入设置

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');
    });

jQuery（函数（）{
变量图片=$（'样本图片'）；
//在调用插件之前，请确保图像已完全加载
//设置宽度和高度会导致GETDATA（）停止工作
//控制面板不更新，GETDATA的输出为空
//图片.断头台（{宽：250，高：300}）；
图片一（'加载'，函数（）{
/*补丁：加载对象后需要传入设置*/
//初始化插件（使用自定义事件）
断头台({
宽度：250，高度：300，//运行此脚本时，开发人员控制台中是否出现任何未定义的错误？完全没有错误…一切仍然正常..即我可以调整大小、旋转等，但数据对象没有任何值。我刚下载了演示。我会看一看，看看是否可以解决问题。我相信我已使用addi解决了此问题正在设置宽度和高度属性值。运行此脚本时，开发人员控制台中是否出现任何未定义的错误？完全没有错误…一切仍然正常..例如，我可以调整大小、旋转等，但数据对象没有任何值。我刚下载了演示。我将查看一下，看看是否可以解决问题。我相信我已修复了I添加宽度和高度属性值。