DEfusion.org.uk

Awesome tool, but I was wondering…is there an easy way for me to clear the crop markers and the translucent overlay after I’ve finished doing what I need to do with the cropping?

In post 117, at the line
imagejpeg($thumb, null,100);
just replace “null” with a path+filename

I love the interface. By far the best I have come across. But has anyone developed the basic version with PHP to load $image then output the cropped image result to a specified directory?

I mean:
$file = “test.jpg”;
header(‘Content-type: image/jpeg’);

$x1 = $_POST[‘x1’];
$y1 = $_POST[‘y1’];
$width = $_POST[‘width’];
$height = $_POST[‘height’];

list($ow, $oh) = getimagesize($file);

$image = imagecreatefromjpeg($file);
$thumb = imagecreatetruecolor($_POST[‘width’],$_POST[‘height’]);

imagecopyresized($thumb,$image,0,0,$x1,$y1,$width,$height,$width,$height);
imagejpeg($thumb, null,100);

imagedestroy($image);
imagedestroy($thumb);

This works fine

How do you actually do something to the image instead of just selecting certain areas?

$t1 = $ow / $width * ‘120’;
$t2 = $oh / $height * ‘160’;

imagecopyresampled($thumb, $big, 0, 0, $x1, $y1, $t1, $t2, $ow, $oh);

This is a fix for that PHP script that mike made… the fix that max posted didnt work for me. I am using a fixed size for my output of 120×160 so replace the 120 and 160 with what you are using. Also my source image was the same ratio as my new one, i haven’t tested for stretching if the ratio is different but i would guess it to be an issue… Thanks for the great tool!

I was looking for a nice way to build avatars for my site users, your solutions looks amazing, can’t wait to implement! The preview box is damn good too! :)

This cropper is absolutly brilliant – far better than anything else I’ve seen!

A feature that would be nice – rotating…

Flipping between portrait and landscape – this can be done already by submitting the current crop area and ratio to a dynamic page which does a bit of maths and then starts the crop again with set postions and reversed ration but it would be nice if this could be handled by js

Rotating by an arbitary degree would also be nice but not sure if this at all possible…

Thanks! Keep up the good work!

Oh and Multiple monitors are aweseom – check out multimon at www.realtimesoft.com – i couldn’t live without it on multi monitor setups!

your’s example test1.html is not working well, after image got small size the cropping is not working well and also after image zooming the cropping is not working will. plz fix the bugs , bcoz i want the test1 solution in my project.

hi,

i couldn’t find setParamsAfterZoom() in crooper.js file. Actually my requirement is we placed image in div, that div in a table. i am unable to get correct cropping area and if i scroll div down, i am unable to do select the area where scrolled area of div.

can u let me know how to solve this problem.

Thanking u,
Ravikiran

Mike Burrell, I resolved this problem!
Replace string:
imagecopyresampled($thumb, $big, 0, 0, $x1, $y1, $x2, $y2, $ow, $oh);
with
imagecopyresampled($thumb, $big, 0, 0, $x1, $y1, $width*2, $y2, $ow, $oh);

Enjoy!

I think I found the problem I was having earlier. Cropper does not do well if the image is less than 100% of the size of the enclosing div and right aligned. I had my image in a floating div of 50% of the canvas, and Cropper got sick when the image was a small one taking up less than the full div.

Dave: if you are working on updates, please consider this case.

Also, please consider parameterizing the location of the cropper.css file instead of assuming it is in the same directory as cropper.js.

Hi Dave
Any chance of that div overflow bug being resolved in the next release?

cheers

Lucas

Due to the way that this library is written you are not able to resize your image and crop it within the same interface.

This is because the image src is written as a background image of a div, sized and positioned accordingly, unfortunatly to my knowledge you cannot resize a background image.

Thanks for the library David, I may end up writing my own implementation of it in order to resize the image in the DOM, I’ll try to remember to post back if I get to it.

I’m not very experienced with Javascipt, but I didn’t think I was a tard. Cropper has me thinking otherwise. I have followed the examples very closely and no matter what I do, the img I pass to Cropper is MOVED to the end of my layout (upon loading the page) and RESIZED slightly. Furthermore, while I can see the callback is being triggered, no selection box is created. It also seems as though the active area becomes the whole canvas -the callback is triggered when I click ANYWHERE on my page.

I have gone so far as to remove all my CSS and pull the img out of the enclosing td. No go. Any ideas? Please? please…

-Chris

Dave,

I’ve been playing around with this some and I figured out the onEndCrop problem. It has to do with the calls to Event.observe. The current implementation is passing in anonymous function refs. I found if I did something like the following, then everything cleaned up.

The other problem I’m having is that I have a routine that changes the cropper to/from a fixed ratio by clicking a checkbox. In Firefox it works fine, in IE, it seems that it takes an extra mouseclick to get the cropper to reset. Here is the function I’m using in my wrapper class. I’m sure there is a better way.