Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    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.
    ronytesler
    @ronytesler
    How do I save the cropped image?
    ronytesler
    @ronytesler
    I get this error when trying to run:
    var ctx = canvas.getContext("2d");
    ctx.drawImage(picture, 0, 0);
    error:
    Uncaught TypeError: CanvasRenderingContext2D.drawImage: Argument 1 could not be converted to any of: HTMLImageElement, SVGImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap.
    ronytesler
    @ronytesler
    anyone has a code for saving the cropped image?
    ronytesler
    @ronytesler
    someone is here?
    ronytesler
    @ronytesler
    hello