by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Matías Gagliano
    @matiasgagliano
    The canvas is a relatively new feature that won't be present in many older browsers. Guillotine aims to do only one thing, get the cropping information from the user. It's up to the developer to decide how to crop the image and whether you support older browsers or not.
    Pablo
    @rochapablo
    yep
    Mari garchagudshvili
    @mgarchagudashvili
    @matiasgagliano Thank you for your time! This time it resizes too much. I think scale is not calculated accordingly . If I click zoom in , twice, it gets higher (17, 31) and the picture after applying width*31 gets huge
    Did anyone here used server side cropping? I would be thank full, if you share code sample .
    Because I have very limited time and I tried every possible solution
    Mari garchagudshvili
    @mgarchagudashvili
    This message was deleted
    Matías Gagliano
    @matiasgagliano
    @mgarchagudashvili the problem is no longer at the back-end. On zoom in Guillotine applies a 10% scale by default (multiplies by 1.1), if the scale increases so fast then you have an issue on your JavaScript. Please make sure that you are not binding the action buttons more than once and are experiencing something like issue #5.
    Mari garchagudshvili
    @mgarchagudashvili
    Issue was in my javascript code. Thank you very much! :)) Your plugin is very helpful ! :+1:
    Matías Gagliano
    @matiasgagliano
    You're welcome, I'm glad that you got it to work.
    martingg88
    @martingg88
    any hint to implement slider to scale the image?
    Matías Gagliano
    @matiasgagliano
    Hi @martingg88 , take a look at #4, it might give you some ideas.
    martingg88
    @martingg88
    thnks
    thanks
    Donna
    @naglalakk

    Hi is there a way to update a guillotine instance? I try doing

    var picture = $('#image');
    picture.guillotine('remove');
    picture.guillotine({width:300, height:400, init: {x: 10, y:10}})

    but this gives very strange results, the height/width becomes a lot bigger then the values I put in.
    I'm working on a cropper that should be able to crop in multiple sizes so I need to be able to switch the cropper size dynamically

    Matías Gagliano
    @matiasgagliano
    Hi @enkitosh, what you're doing should work, removing and re- creating the guillotine is the way to go. Add some details of exactly what you see, a demo, fiddle or some example to better understand what's going on.
    MF Haqqi
    @haqqi
    Hi @matiasgagliano , i just want to say thanks for the plugin. You created much simpler implementation that can be used in my startup https://pictalogi.com. What i need is only the coordinate, scale, and percentage of the cropped image. You did great!
    Matías Gagliano
    @matiasgagliano
    Hi @haqqi , I don't know why I didn't get an email notification for your message but better late than later... thanks for the support, I really appreciate it!!
    MF Haqqi
    @haqqi
    Hi @matiasgagliano, i just happened to face this issue matiasgagliano/guillotine#54. Is there any idea how to fix it? It is not a big bug, but it will reduce the UX for the users.
    VCardWEb
    @VCardWEb
    Hi everyone
    VCardWEb
    @VCardWEb
    I have a bit of trouble, I'm not familiar with imagemagick I have manage to do the rotation and cropping but I have no idea how to do the scale, so first I have to scale the image with the data from the guillotine, but in imagemagick I have no idea how to do that, and the examples are for command line which I have no idea how to apply that to php.. if guillotine is sending scale: 2.1743 how do I apply that to imagemagick for scaling the image before rotating?
    Matías Gagliano
    @matiasgagliano
    Hi @haqqi, you're right, it's not a big bug but can be annoying in certain circustances. It requires a major rewrite that I've had in the inkpot for a while now but work haven't allowed me to finish.
    Matías Gagliano
    @matiasgagliano
    @VCardWEb, I've never used ImageMagick through PHP but according to PHP docs this should do the trick:
    <?php
     $img = new Imagick('example.jpg');
     $img->scaleImage($imgWidth * $scale, 0);
    ?>
    VCardWEb
    @VCardWEb
    Hi again, @matiasgagliano nop, that didn't worked, what I mean is that, adding the scale works but not for the final result... say that, what I need as final result is an image of, 676 x 459px with cropping, scale and rotation already applied, so, the "original" image on screen is 1036 x 615, the space when the image is begin display is div with 676x459px, so when I send the information for final result, the with of the image is 1036 $data['scale']... doesn't work.. then I change it to 676 $data['scale'] ... didn't work either... so then I manage to capture the 64base code of the image by using html2canvas to whatever is on the div.frame, this almost work, the problem with that is that if the image is rotated I get a transparent space all around the final image...
    Matías Gagliano
    @matiasgagliano
    1036 * $data['scale'] should work to set the scaled width, we need to see how you are applying the rotation and cropping after that. Write me a private message and I'll try to help you with this one.
    VCardWEb
    @VCardWEb
    I think I know what the problem is... after image has been manipulated the user hits "save' and the image gets resized before anything else, which this function was on another class that I didn't know existed, I just find it, i was looking line by line on my controller... I'm gonna make some changes and see if that fix it, thank you @matiasgagliano
    Matías Gagliano
    @matiasgagliano
    OK, you are welcome.
    Jonathon Terry
    @Maverick1872
    @matiasgagliano i'm running into an issue with subsequent initializations not taking a new height/width for the crop size. the following gist should include all the necessary code https://gist.github.com/Maverick1872/fc6e48671c0fa7b4104a34611b5f9bf0.
    as you can see I remove instances in two locations, once at the modal dialog close action, and again before initialization if there is still one (someone clicks the x-button on the modal). I have verified with console.log statements that the height and width is getting passed but they don't seem to be updating.
    Jonathon Terry
    @Maverick1872
    nvm looks like it was a stray quote on line 27. if you see anything wrong or if you suggest I do something a different way though I would be more than happy to hear
    Matías Gagliano
    @matiasgagliano
    At first sight the picture.on('load', ... part seems to be fine. Could you provide a jsFiddle or CodePen that shows the issue?
    Jonathon Terry
    @Maverick1872
    Ahh it's been fixed now. One of those issues that just seems to sort itself out, aren't they the best?
    I do appreciate it though and it seems to be an awesome plugin!
    Matías Gagliano
    @matiasgagliano
    Indeed they are, as long as they don't come back!
    Thanks, I'm glad it all works now.
    Jonathon Terry
    @Maverick1872
    so not to be a buzzkill or anything, but I've got an interesting issue and not sure what could be causing it. I have three file input buttons that initialize and open the toolkit in a jquery modal dialog. Everything works as expected for the first image, but any subsequent images (e.g. second and third file upload buttons) the rotate/zoom functionality gets to be very inconsistent. it seems to be in a cycle. second image rotations flip direction, and the step size for the zoom seems to be increasing. on the third photo, rotations are then 180 and step size seems to have increased yet again. then sometimes rotations don't even work. I'm at a complete loss as to what's causing it though.
    Matías Gagliano
    @matiasgagliano
    Most likely the cause of that issue is that you're binding the actions to buttons more than once.
    Take a look at #5 and to this answer.
    Jonathon Terry
    @Maverick1872
    wouldn't removing any guillotine instance with .guillotine('remove') prevent that though?
    Matías Gagliano
    @matiasgagliano

    No. Removing Guillotine's instance doesn't unbind events from your buttons.

    For example, if you binded the zoom in button like this:

    picture.on('load', function(){
      $('#zoom-in-button').click(function(){
        picture.guillotine('zoomIn');
      });
    });

    Doesn't matter if you removed and recreated the instance, picture.guillotine('zoomIn') calls wichever Guillotine instance is present over picture.

    Then if you also swaped/reloaded images over the same element (changed picture's src attribute), each time an image is loaded you bind a new onclick event to the same button.
    If you load the image 3 times, then picture.guillotine('zoomIn') will be called 3 times every time you click the zoom-in button.

    Jonathon Terry
    @Maverick1872
    Ahh okay well i looked at the links you posted briefly but haven't had a chance to mess with my source code. Looks pretty similar to my issue though. I'll let you know how it goes. Thanks Matias!
    Matías Gagliano
    @matiasgagliano
    Great, you're welcome.
    Jonathon Terry
    @Maverick1872
    Yea just removed the event handlers with jquery's .off function ideally i would use a static variable but can't figure out how to get one in javascript. still fairly new to it.
    Matías Gagliano
    @matiasgagliano
    Instead of adding and removing event handlers each time it would be a much better aproach to bind just once.
    If you're binding buttons with the picture's onload event like above, use jQuery's one instead of on. That will call the handler only the first time, not each time the picture loads.
    ChrisRibe
    @chrisribe
    Hi, I am trying to handle images in portrait and landscape. Landscape works well, but in portrait I only see a portion of the image... How do I allow users to simply fit the full image in the view ?
    Matías Gagliano
    @matiasgagliano
    Hi @chrisribe, the plugin doesn't allow any empty areas within the area of the Guillotine, so if the height/width ratio of the image is different from the ratio of the window or cropping area you'll always end up with portions of the image left out.
    Jonathon Terry
    @Maverick1872
    @matiasgagliano you are probably tired of hearing from me but is there any way to set the size of the guillotine-window to be that of the dimensions we pass when we instantiate the plugin? allows for the user to see a more accurate representation of what they will receive. I guess i could just set the parent of the guillotine window to the size that it is being cropped to as well?
    but that presents issues with it being displayed outside the modal if larger than such... hmm
    Matías Gagliano
    @matiasgagliano
    @Maverick1872, exactly. The "guillotine" or window is responsive, it takes 100% of its parent so by setting the size of the parent you'll achieve what you want. Keep in mind that by doing that the guilotine will no longer be responsive.
    Jonathon Terry
    @Maverick1872
    will no longer be responsive in what sense? everything seems to be acting the same
    Matías Gagliano
    @matiasgagliano
    The guillotine's width is 100% the width of its parent, if its parent has a fixed size then the guillotine is fixed too.
    Jonathon Terry
    @Maverick1872
    yea it will still be 100% of the parent. I see what you mean now.
    Omar Mokhtar Al-Asad
    @omarqe
    Hi, how can I use range element for zooming instead buttons?
    tfarmer00
    @tfarmer00
    Hi all. Is there a full example that shows how to call ImageMagick to do the cropping from start to finish? I've only been able to find bits and pieces of how to get this to work.