Question

我正在使用jQuery Guillotine插件（https://github.com/matiasgagliano/guillotine#jquery-guillotine-plugin）让用户裁剪他们的图片。之后我需要将这些数据转化为表格，但是我无法弄清楚我的生活如何去做！我只是通过使用正确的ID来获取数据： *这是更正后的代码*

<form id="coords" action="includes/php/activation/s3b.php" method="post" enctype="multipart/form-data" id="data">
<!-- Create Password -->
    <div class="col s12">
        <h4>Looking good, '.$firstName.'!</h4>
        <p>Time to crop your photo!</p>
    </div>
    <input type="hidden" name="u" value="'.$staffID.'">
    <input type="hidden" name="a" value="'.$actCode.'"> 


    <div id="theparent" class="col s12">
        <img src="includes/php/activation/tempAvatars/'.$tempAvatar.'.jpg" id="sample_picture" alt="Image to crop" class="responsive-img />
    </div>
    <div class="col s12" id="controls">

        <button id="rotate_left"  type="button" title="Rotate left"><i class="material-icons">&#xE419;</i></button>
        <button id="zoom_out"     type="button" title="Zoom out"><i class="material-icons">&#xE900;</i></button>
        <button id="fit"          type="button" title="Fit image"><i class="material-icons">&#xE3C2;</i></button>
        <button id="zoom_in"      type="button" title="Zoom in"><i class="material-icons">&#xE8FF;</i></button>
        <button id="rotate_right" type="button" title="Rotate right"><i class="material-icons">&#xE41A;</i></button>
    </div>
    <div class="input-field col s6">
        <input id="x" type="text">
        <label for="x">X</label>
    </div>
    <div class="input-field col s6">
        <input id="y" type="text">
        <label for="y">Y</label>
    </div>
    <div class="input-field col s6">
        <input id="w" type="text">
        <label for="w">W</label>
    </div>
    <div class="input-field col s6">
        <input id="h" type="text">
        <label for="h">H</label>
    </div>
    <div class="input-field col s6">
        <input id="scale" type="text">
        <label for="scale">Scale</label>
    </div>
    <div class="input-field col s6">
        <input id="angle" type="text">
        <label for="angle">Angle</label>
    </div>


</form>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="includes/js/jquery.guillotine.min.js"></script>
<script src="includes/js/materialize.min.js"></script>          <!-- MaterializeCSS -->
 <script type='text/javascript'>
    jQuery(function() {
      var picture = $('#sample_picture');

      // Make sure the image is completely loaded before calling the plugin
      picture.one('load', function(){
        // Initialize plugin (with custom event)
        picture.guillotine({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'); });

        picture.guillotine({
          onChange: function(data, action){
            data = picture.guillotine('getData');
          }
        });

        // 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]); }
          data = picture.guillotine('getData');

          var data = picture.guillotine('getData');
            $('#x').val(data.x);
            $('#y').text(data.y);
            $('#w').text(data.w);
            $('#h').text(data.h);
            $('#scale').text(data.scale);
            $('#angle').text(data.angle);
        });
      });

      // Make sure the 'load' event is triggered at least once (for cached images)
      if (picture.prop('complete')) picture.trigger('load')
    });
  </script>

但这似乎不起作用:(任何想法？：D

Answer 1

getData方法返回一个包含您需要的x，y，w和h属性的对象：

您可以通过调用'getData'随时获取说明：

data = picture.guillotine（'getData'）;
  // {scale：1.4，angle：270，x：10，y：20，w：400，h：300}

然后，您可以按名称而不是索引访问此对象的属性，并设置所需元素的text()。试试这个：

var data = picture.guillotine('getData');
$('#x').text(data.x);
$('#y').text(data.y);
$('#w').text(data.w);
$('#h').text(data.h);
$('#scale').text(data.scale);
$('#angle').text(data.angle);

Answer 2

就我而言。我将text（从@Rory）更改为val。并在//更新数据中移动这些行：

    // 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]); }
        $('#x').val(data.x);
        $('#y').val(data.y);
        $('#w').val(data.w);
        $('#h').val(data.h);
        $('#scale').val(data.scale);
        $('#angle').val(data.angle);
    });

所以每当提交表单时。更新数据尽快发送。

<input type="hidden" name="x" id="x" value=""/>
<input type="hidden" name="y" id="y">
<input type="hidden" name="w" id="w">
<input type="hidden" name="h" id="h">
<input type="hidden" name="scale" id="scale">
<input type="hidden" name="angle" id="angle">

从jQuery Guillotine插件获取数据

2 个答案: