jQuery plugin to crop images within an area (fully responsive), allowing to drag (touch support), zoom and rotate.
thanks
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
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!
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?
@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);
?>
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...
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
@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.
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.
I do appreciate it though and it seems to be an awesome plugin!
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.
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.
Take a look at #5 and to this answer.
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.
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
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.
@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
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.