DEfusion.org.uk

thnx

If you want to crop and resize from image.jpg to obtain a 70px X 30pxthumb in php:

$tt1=”path_to_image/image.jpg”;
$tt2=”path_to_image/image70X30.jpg”;
$tama = getimagesize($tt1);
$wi = $tama⁰ ;
$he = $tama¹ ;
$image_p = imagecreatetruecolor(70, 30);
$image = imagecreatefromjpeg($tt1);
imagecopyresized ( $image_p , $image , 0 , 0, $_POST[‘x1’] , $_POST[‘y1’] , 70, 30 , $wi , $he );
imagejpeg($image_p, $tt2);
imagedestroy($image_p);
imagedestroy($image);

I didn’t know that was enough to send the x1 data. I was asking for the input value.

From POST 130.
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…
Sorry my ignorance, coul you be more specific please? How to put form tags on those vars. Thank you

Hi,

This is really a good lib. I gave this a try. I found a problem which is because of line 507 which says:
Event.observe( document, ‘mouseup’, this.endCropBind );
Due to this callback function called each mouseup event, no matter where it occurred. Means click any portion of page this callback will be execute.

Instead you can replace this line with:
Event.observe( this.imgWrap, ‘mouseup’, this.endCropBind );
It works fine for me.

Akhil

To Sune Kjaergaard (regarding post – 1st Sep 2006).
Apologies if this has already been answered, there are lots of posts in this thread!

I recently came across the cropper transparency not working correct in ie6 when it was placed in a table (making it look like the image dissapears). I have found a fix as follows:

In cropper.cs

Remove the addition of the click area in the onLoad function.
i.e. the line:
this.dragArea.appendChild( Builder.node( ‘div’, { ‘class’: cNamePrefix + ‘clickArea’ } ) );

Then add it back after the imgWrap has been resized in the setParams functions:

i.e.

$( this.imgWrap ).setStyle( { ‘width’: this.imgW + ‘px’, ‘height’: this.imgH + ‘px’} ); // Existing line – set the size
var cNamePrefix = ‘imgCrop_’; // new inserted line
this.dragArea.appendChild( Builder.node( ‘div’, { ‘class’: cNamePrefix + ‘clickArea’ } )); // new inserted line

I can only assume this is a bug with ie6 as there is no reason why it shouldn’t work the original way.

Hi

I want to pass COORDS to asp.net to crop an image.
Please suggest for how to do it.
prabhat {at) gmail (dot} com

Also, the problem with using the CropImageManager object is that I also need to pass different “onloadCoords” and “ratioDim” values each time as well as the different imageID.

Hi, I appreciate your help. I’m really just calling each one with this:
“new Cropper.Img(theImageID, { onEndCrop: onEndCrop });”

I’m then removing a DOM node that contains my image and all the new nodes created by Cropper, and then recreating the node and the various bare images in it, and applying the above line for each image ID.

I have changed the onEndCrop function in your cropper.js to return the ID its referring to (in addition to the coordinates/dimensions), so I can keep track of the co-ordinates of more than one image at a time…

I’d use the example if I could, I just can’t seem to find a way to get my varying imageIDs into the “new Cropper.Img” call in attachCropper…. I must seem silly but I feel I’m so close, and there are other people on this forum who also seem to long for a way to easily remove the cropper…. I see the “remove:function()” in “cropper.js”, if only I could pass my imageID to it!!

I almost have this wonderful tool doing magic… the only problem is that no matter what I do, I can’t seem to remove the onEndCrop co-ordinates/dimensions from images once they’re removed from the DOM. In other words, once I’ve loaded a second image called with an ID the same as the first (though the first is removed from the DOM) I get all the old dimensions followed by the new ones when onEndCrop is called; I think this is the same thing that is referred to in the comments in the script as ”#00015” (onEndCrop callback gets called multiple times when removed and then reapplied). Everything on my page is pretty AJAX-y, and I simply cannot get the my cropper to remove() itself. I’ve looked at the dynamic-image example but can’t grok it; my case is pretty different. Tips??? THANKS!

If I get this doing what I need it to in my project, I’m donating..

Looks great.. thanks

Hi i would like know if it’s possible disable the resize option. I need to pass coords on load, but without resize the crop. Is it possible?

Tks a lot! ;-)

Hi, very nicely done

But I have a question though. Do you keep track of all the area’s that get highlighted? I tried to use the script in combination with an ajax script that loads the image.
When the image is loaded, I call a method to initialize the events. I got that working. When I select an area and onEndCrop is loaded, I reload the image via the server (It’s a map where I try to zoom in).
But here it goes wrong. When I do it again, the script is called twice, with the coordinates from the first time and the ones from now.

I tried a lot, but could not find a solution.
Thanks anyway

Awesome job! This is exactly what I was looking for. I only wish you had a jQuery version.

And there was little problem with absolutly white image. After refresh of the page everything is ok. But with new image for crop the same picture. Fixed with:
.imgCrop_handle {
position: absolute;
border: 1px solid #333;
width: 6px;
height: 6px;
background: URL(tr.gif) fixed;
opacity: 0.5;
filter:alpha(opacity=50);
z-index: 4;
}
I don’t know. May be this problems mine only.
FF and Opera work ok.