Get crop coordinates on original image

[rafaponieman]

Hello! Thank you for making and sharing cropit!!

For a project, I needed to only get the cropping coordinates on the original image. I needed to know the two (x1, y1) (x2, y2) points on the original image that would give me the selected part of the image. However, I couldn't manage to do this with the methods available in cropit by itself. It would be great to have a method that would give you these values because otherwise they're kind of tricky to obtain.

This is what I ended up doing (its not perfect and probably will only work with the settings I'm currently using):

var zoom = imgCropper.cropit('zoom');
var offset = imgCropper.cropit('offset');
var previewSize = imgCropper.cropit('previewSize');

var exportzoom = 1 / zoom;
var xstart = Math.abs(Math.floor(offset.x * exportzoom));
var ystart = Math.abs(Math.floor(offset.y * exportzoom));

var xend = Math.floor(exportzoom * previewsize.width) + xstart;
var yend = Math.floor(exportzoom * previewsize.height) + ystart;

Well, I guess that's all, let me know if you'd like to add a feature like this to cropit and I'd be happy to contribute.

[Naph]

This solution works well with the PHP ImageMagick crop method if you require compatibility with older versions of IE. Thanks for posting this snippit!

[michaeldprice]

I wanted to use this solution, with a php backend, but it took me a while to figure it out. If anyone is looking how to apply this to a php backend using gd ... When you submit the form, you need to pass the xstart,xend,ystart,yend.

` // Original File $imgLocation = 'pathtoyourfile.jpg'; $srcImg = imagecreatefromjpeg($imgLocation);

// Get dimensions of original file. list($width, $height) = getimagesize($card->imgLocation);

//Final Image Dimensions $width2 = 600; $height2 = 315; $newImg = imagecreatetruecolor($width2, $height2);

// Set custom dimensions $x1 = $fbSpecs->customOffset->xstart; $y1 = $fbSpecs->customOffset->ystart; $x2 = $fbSpecs->customOffset->xend; $y2 = $fbSpecs->customOffset->yend;

// Set Custom Image Source Size // This is what allows you to use the custom ending points $customX = $x2 - $x1; $customY = $y2 - $y1;

//Build the new image imagecopyresampled($newImg, $srcImg, 0, 0, $x1, $y1, $width2, $height2, $customX, $customY);

//Save the new image imagejpeg($newImg,'newimage.jpg');

`