DEfusion.org.uk

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.

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

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.

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

cheers

Lucas

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.

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!

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

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.

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 http://www.realtimesoft.com – i couldn’t live without it on multi monitor setups!

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! :)

$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!

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

This works fine

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);

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?

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

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?

Dear me, I just saw the demo and that there is already a way to remove the cropper. I swear I didn’t see that before!!!

Thanks much.

Using the PHP code from post 21 I changed:

imagecopyresampled($thumb, $big, 0, 0, $x1, $y1, $x2, $y2, $ow, $oh);
to
imagecopyresampled($thumb, $big, 0, 0, $x1, $y1, $x2, $y2, $x2, $y2);

A typical image crop results in an image with new content (the selection) and a new width/height (the width and height of the selection). The original PHP code would stretch the crop to be as large as the original image and acted more like a ‘zoom’ effect. Changing $ow to $x2 and $oh to $y2 will create the new images’ width/height based off the selection which is atleast what I was looking for.

Thanks for the great script, it was exactly what I was looking for.

Chad

Whoops:

imagecopyresampled($thumb, $big, 0, 0, $x1, $y1, $x2, $y2, $x2-$x1, $y2-$y1);

Hello.

First off, this is a GREAT piece of code, and I’ve already had great use for it. Many thanks!

I just have a few questions:

1) I’ve had some problems with Internet Explorer timing out on crop requests, but not with anything else on the site. Could this be a problem with the Javascript?

2) Is there a way to change the size of the crop area by putting/changing the values in text boxes, without refreshing the page?

Again, thanks.

Hi ,
Is it possible to have more than one cropper on a page?

Thank You

Mike

David—
Thanks so much for posting a tool that hundreds of people have shown a need for. That’s a very generous gift of your talent…

There seems to be a limit of 640×480 for the images to be manipulated. Larger than that the auto-highlight-within-shadow turns off (at least in Mozilla 2). Is that a scriptaculous limitation?
—John

Hi Dave, awesome work, it’s great in FF now.
I see the overflow: auto problem in IE is still there, what do you think might be causing that?
cheers

Lucas

Hi, can anyone provide me with the PHP code using this javascript GUI.. I saw the code here in PHP, but I don’t know how to implement it :D Like how do you past the variables from js to PHP?

email mastahswabe at gmail.com

DJ, just put form tags around those input fields from the cropper and put a submit button so that you can send them to the PHP page. After you get that working you can set them to hidden or whatever… Then for the PHP page use $_POST[‘var’], or $_GET[‘var’] for each of the variables depending on what method you chose for the form.

Thanks for the new version David!

Justin

E.X.C.E.L.L.E.N.T.
thank you very much for this awesome piece of work

I used the “good old”:

But it turned out that the lines below are very important for the cropper to work correct:

(my picture disappeared now and again)

Just a tip :-)

Ups, here are the lines:

“Bad”:
!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.0 Transitional//EN”

“Good”:
!DOCTYPE HTML PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”

Very cool, Thank you very much.

I was able to get this working easily with Rails.

that’s great!
script works perfectly but what about loading the page WITH MY coordinates of cropping box?

(i want to save a crop result for future demonstration when page is opened again)

thank you and wish a lot of success

seems like I’am dumb
no question at all ;)
thank you again

Awesome work Guys!!

I was wondering if there is a way to add snapping to the selection area. As in as the user selects the desired area, it snaps to either 10 pixel increments or some other predefined value.

again, awesome work. Best of the web as far as image tools I’ve seen.

I guess you have a small glych with roundings (ImgWithPreview).
Example.
I add image 800×600 and specify width 500px (to fit in page), and use JS – new Cropper.ImgWithPreview(‘testImage’, {
previewWrap: ‘previewWrap’,
minWidth: 175,
minHeight: 140,
ratioDim: {
x: 750,
y: 600},
onEndCrop: onEndCrop
});
(I need to resize with ratio 1.25)
Then I get new coords :

[x1] => 32
[y1] => 0
[x2] => 500
[y2] => 375
[w] => 468
[h] => 375
But actually x1 should be 31.25 or rounded to 31.
Besides this, preview area is displayed 187×140 but it should be 175×140

Hi. First of all, Great Work! People like you make the web easier.

About question #125, how can I put multiple croppers in the same page?

I’ve tested with two images, it works fine, except by the fact that one of them actually is not calling the callback function, which is the same for both images. Only the last image calls it.

Thank you.

Just made a quick function for PHP to crop a stored image and save it to a new path. Might be helpfull, hopefully!

Excellent!
here is my realisation in combination with ‘convert -crop’ from Imagemagick.
http://familientagebuch.de/rainer/2006/50.html#5
I looking for a solution to generate USEMAPS.

Rainer

for those who beside jpg also use PNG or gif this a modified version of some code posted here, this version overrides the original picture.

function CropImage($originalImage, $sizes, $imagetype) {
switch ( $imagetype) {
case “image/gif”:
$src = imageCreateFromGIF($originalImage);
break;
case “image/pjpeg” :
case “image/jpeg” :
$src = imageCreateFromJPEG($originalImage);
break;
case “image/x-PNG”:
case “image/png”:
$src = imageCreateFromPNG($originalImage);
break;
}

$newPath = $originalImage;
$thumbImage = imagecreatetruecolor($sizes[‘width’], $sizes[‘height’]); // create thumbnail image
@unlink($imagePath); // unlink destination image if possible

// perform crop (modified from code posted here, eg. this one doesn’t stretch the image)
imagecopyresampled($thumbImage, $src, 0, 0, $sizes[‘x1’], $sizes[‘y1’], $sizes[‘width’], $sizes[‘height’], $sizes[‘x2’]- $sizes[‘x1’], $sizes[‘y2’]- $sizes[‘y1’]);

imagedestroy($src); // destroy image resource
unlink($newPath);
if($imagetype "image/jpeg" || $imagetype “image/pjpeg”){
imagejpeg($thumbImage,$newPath,100);
}
if($imagetype "image/gif"){
imagegif($thumbImage,$newPath);
}
if($imagetype “image/png” || $imagetype == “image/x-PNG”){
imagepng($thumbImage,$newPath);
}

imagedestroy($thumbImage); // destroy thumbnail resource
}

Hi

Very nice cropper.
Is there a way I can make the crop area resize keeping the center of the area the same as the center of the image?

Thanks

Hi

Great script, but how do you reset/remove the crop tool?

What function should i call when i use a button onclick=”” ?

Best regards, Mikkel

here’s the PHP code, someone posted some half working code that distorted the images
this uses the castle demo image but will work with jpg or PNG.

cheers
-Adam

here’s the PHP code, someone posted some half working code that distorted the images
this uses the castle demo image but will work with jpg or PNG.

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

//this must be the same as our basic aspect ratio used on the javascript, modify the js and this to make that dynamic.
$thumb_width = 200;
$thumb_height = 120;

// define image filename
$image_filename = “jscripts/cropper/tests/castle.jpg”;

// find out original width / height
list($ow, $oh) = getimagesize($image_filename);

// setup orig photo
$big = imagecreatefromjpeg($image_filename);
// setup cropped photo
$thumb = imagecreatetruecolor($thumb_width,$thumb_height);
imagecopyresampled($thumb, $big, 0, 0, $x1, $y1, 200, 120, $width, $height);

$imgname = “test1a.jpg”;

// save image to disk
imagejpeg($thumb, ’../photo_album/’.$imgname,100);

// free up resources
imagedestroy($big);
imagedestroy($thumb);

(repost. apaprently the comment system doesn’t like PHP code…)

“31st May 2006 – 7:28 pm” you wrote:

“It is possible to apply a new cropper to a new image (or the same image but replaced) but there are a couple of errors that are related to the fact that the HTML that was added to the DOM for the cropper isn’t been removed.”

When I try to remove a cropper, and attach a new cropper to a new picture, it looks strange. What can I do?

Please help.

When I try to remove a cropper attached to a picture, and then attach a new cropper to the same picture, it looks funny. You can’t se the picture, only a grey box where the picture should be.

Everything else works as a charm :)

what to do??