0 Replies - 508 Views - Last Post: 14 April 2018 - 12:52 PM

#1 Foobarer   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 269
  • Joined: 28-March 17

Problem with Guillotine jQuery plugin - image won't load correctly

Posted 14 April 2018 - 12:52 PM

**Update: I edited the code, it was looking messy
I am using the following jQuery plugin: Guillotine jQuery

It is meant to place an image to a div and let you drag it inside so that you can crop it (basically used for profile images thumbnails, etc)

I thought everything was working fine, until, it got buggy.

I am testing on the demo file: Guillotine demo from Github

But, since I need to load my own image from selected file input, I add the following code:

<form id="form1" action="/upload/upload_image.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="fileToUpload[]" id="fileToUpload">
    <input type="hidden" name="xval" id="xval">
    <input type="hidden" name="yval" id="yval"> // inputs to send to PHP GD library
    <input type="hidden" name="wval" id="wval">
    <input type="hidden" name="hval" id="hval">
    <input type="hidden" name="scale" id="scaleval">
    <input type="hidden" name="angle" id="angleval">                                   
    <input type="submit">
 </form>

<div class='frame'>
    <img id="myImg" alt="No Image Found" src='/images/initial_image.png'>            
</div>
    



<script>

picture.on('guillotinechange', function (ev, data, action) {
    data.scale = parseFloat(data.scale.toFixed(4)); //this part is already in the demo
    for (var k in data) {                          //this part is already in the demo
        $('#' + k).html(data[k]);                 //this part is already in the demo
    }
    $('#xval').val(data.x); // this part is additional to dynamically change form values
    $('#yval').val(data.y);
    $('#wval').val(data.w);
    $('#hval').val(data.h);
    $('#scaleval').val(data.scale);
    $('#angleval').val(data.angle);
    });
});

//Function to update the <img> tag every time user selects new image (preview the selected image)
 function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
        $('#myImg').attr('src', e.target.result);
        }

    reader.readAsDataURL(input.files[0]);
    }
}

    $("#fileToUpload").change(function () {
    readURL(this);
});
</script>



When you simply copy-paste the code you see the big image loads there, and only a portion of it is visible, and you can drag it around the div(which is what it is what this plugin intended for)
But the problem is when I load my own images: The image won't load as intended: It tries to fit itself to the div without saving aspect ratio, instead of simply loading the entire image there to let you move it around. and the "scale" value will change too instead of staying at '1'
I hope this long post made sense to you, I just really can't find out why it gets so buggy

Thank you!

This post has been edited by Foobarer: 14 April 2018 - 11:35 PM


Is This A Good Question/Topic? 0
  • +

Page 1 of 1