Getting data from jQuery Guillotine Plugin

Question

I'm using the jQuery Guillotine Plugin ( https://github.com/matiasgagliano/guillotine#jquery-guillotine-plugin ) to let users crop their image. Afterward I need that data to go into a form, however I can't figure out for the life of me how to do it! I've been able to get the data into this just by using the right ids: * This is the corrected code *

<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>

but that doesn't seem to be working :( Any ideas? :D

Answer 1

The getData method returns an object with the x , y , w and h properties you need:

You can get the instructions at any point by calling 'getData':

data = picture.guillotine('getData');
// { scale: 1.4, angle: 270, x: 10, y: 20, w: 400, h: 300 }

You can then access the properties of this object by name, not by index, and set the text() of the required elements. Try this:

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

In my case. I changed text (from @Rory) into val . And move those line in the //update data on change:

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

So whenever the form is submited. The update data is sent asap.

<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">