DEfusion.org.uk

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 want to pass COORDS to asp.net to crop an image.
Please suggest for how to do it.
prabhat {at) gmail (dot} com

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,

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

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

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

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

thnx

Absolutely fantastic code!! Will definitely be donating.

In reply to 454. Jonny Muir post – I get the same bug but the fix almost does it … just the mouse pointer and resize handles don’t match up.

Also it would be great for extra paramaters for the width/height of the preview window instead of min width/height as I may want to crop smaller than that but still have the preview window a certain size.

Thanks again!

Jonathan

how can I save crop image?

@ram,

Your answer, SEARCH!!!!!! been answered here before.

How do I displayoninit without having the ratio defined? I need to do this because alot of the users don’t understand that they need to click on the picture to begin cropping so it will be better if i can specify a startcoords on the picture and then immediately load the overlay when the page finishes loading. It will be much easier if the user enters the page and then sees the handlers and he will understand he can just drag and then crop.

This looks so great. I need it to run with multiple images, though.
The code that Dave Schlaegel posted is incomplete, unfortunately.
It is missing the initialization of the individual Cropper.img objects.

new Cropper.Img(
‘testImage’,
{
ratioDim: { x: 220, y: 124 },
displayOnInit: true,
//onEndCrop: onEndCrop
}
)

How can I adjust this code to show the cropper on multiple images?
I don’t know how to write that.

Okay, so I found out that I can just repeat the quoted code and all the images get a cropping overlay.

So how do I need to adjust the x1 / x2 and y1 / y2 values in the script and the HTML, so that I can thumb multiple images?

John:

I modified the onEndCrop (handler?) in “cropper.js” to return the imageID that the particular cropper instance is referring to as the first thing returned… look for the line with:
“this.options.onEndCrop(this.areaCoords,{width:this.calcW(),height:this.calcH()});”
and change it to:
“this.options.onEndCrop(this.img.id,this.areaCoords,{width:this.calcW(),height:this.calcH()});”

So, when your crop ends, you know the image that the returned x1/x2/etc refers to.

With Dave’s help, I also have a “manager” to keep track of which items are being cropped: http://pastie.org/179269

Then, to add/remove croppers at will, its something like:
CropImageManager.attachCropper(theImageID,{ratioDim: {x: myX,y: myY}, onloadCoords:{x1:theX1,y1:theY1,x2:theX2,y2:theY2},displayOnInit:true, onEndCrop:onEndCrop});

Hope that helps!

Jimmy:

When I add the img.id to the line in the cropper.js, the image cropper behaves strangely. The cropping area jumps to the border of the image when you try to increase the cropping area.

Also, just duplicating the “new Cropper.img { ... }” functions to have multiple cropping areas does not work in Internet Explorer. (I am using Opera)

Hi,
I am using the latest version of scriptaculous/Prototype (v1.8.1). Does Cropper work with the latest version?

(I apologize if the question has already been answered before. I was unable to search the full comments list).

thanks much.
Don.

@Don R
Yes it has been asnwered before, search the entire list, i dont see why u cant, just hit Ctrl + F and it brings up a search box once the entire listing is bought up, thats what i do.

As it seems no one has posted a visible solution to the problem with the onEndCrop function always beeing called when mouse is clicked somewhere, I checked it myself. The solution is very simple, it’s just to change “document” to “this.dragArea” on line 116 and 118 in the compressed file, so it becomes:
116: Event.observe(this.dragArea,”mousemove”,this.onDragBind);
118: Event.observe(this.dragArea,”mouseup”,this.endCropBind);
instead of:
116: Event.observe(document,”mousemove”,this.onDragBind);
118: Event.observe(document,”mouseup”,this.endCropBind);

kacior:

I disabled that in my implementation. See here:

http://gattomatto.net/work/jsCropperUI/

download the source here:

http://gattomatto.net/work/jsCropperUI.zip

var CropImageManager = {
curCrop: null,

init: function() {
this.attachCropper();
},

attachCropper: function() {
if (this.curCrop == null) {
this.curCrop = new Cropper.ImgWithPreview(
‘event_image’,
{
onEndCrop: onEndCrop,
(all the other args u choose)
}
);
}
else {
this.curCrop.reset();
}
}
};

// the cropper calls this function on the end of each resize or move
function onEndCrop( coords, dimensions ) {
$(‘cropForm’)[‘x1’].value = coords.x1;
$(‘cropForm’)[‘x2’].value = coords.x2;
$(‘cropForm’)[‘y1’].value = coords.y1;
$(‘cropForm’)[‘y2’].value = coords.y2;
}

function loadCropper() {
CropImageManager.init();
}

Event.observe( window, ‘load’, function() { loadCropper(); } );

by the way you don’t have to save the coordinates like i’m doing. i do that to post to a PHP script which crops the image. you could just have an empty function which does nothing…

Awesome job on the cropper i love it!

I have a slight problem that popped up and searched some of the results but didn’t see a solution to it.

I have the script working on a page perfectly if i go directly to that page, but if i load that page via AJAX then I get 3 errors and it blanks the entire page.

• “Event.observe is not a function” – and its pointing to a CSS file.
• “Class is not defined
  var CropDraggable=Class.create();” – cropper.js
• Class is not defined
  var Draggable = Class.create(); -dragdrop.js

  Thanks again!

  -Corey

I think i solved the table problem:
if you place the image in a div with a absolute height, it works.
So what you do is as follow:

Well, i have read all the comments but my question is can i upload an image with one size and instead of cropping image on server side while uploading the images can i will be able to do upload original size of my image and display in different size like image gallery usually shows on the client side because recently i am facing problems while uploading images and then crop them on server side so it make server slow and if we talking about millions of people uploading bunch of file so server will kneel down can any body suggest me best possible approach i will be thank full to him
thank you all in advance :)

No,my scenario is different like
1.user upload images
2.server crop it and make a multiple copies in different sizes.
3.Then it will be shifted to amazon S3.

Now,i have a question which is , my server will be slow when dozens of people upload images so idea is can i able to upload images like normal and cropping process is done by client side by this Js library or any other way out so let me know like how facebook and orkut allow people to upload images on server and they do image processing and then display a photo gallery of users.same thing i want to implement at my site .Kindly advise me because now i am stuck at this stage
:) and thanks for your interest

yes that i was thinking about but what you suggest how orkut,facebook application handles this kind of probleam are they having their own dedicated server for image processing or they are using EC2 service what you think because i have to justify these things to my CEO you know what i mean :)

Is there a way or does anyone have sample code on how to set the crop x, y, width and height from form fields in the cropperUI script? The onEndCrop() routine works great to update form fields. I want to go the other way and set the crop from entries in the form fields if possible.

how do you see the final cropped image and save it ?
please excuse my lack programing skill

this is a great tool dave..but i’ve encountered a problem.
like westy, my cropper is returned from an ajax call so i also used new Cropper.ImgWithPreview(...) instead of calling it on load. it works fine in firefox but never in safari. i tried putting it inside a function but still it does not work. could you please help me? thank you

freak

Does anyone have this working in IE7.0 with the latest version of prototype and scriptaculous? It works fine for me in FF3 but gives me a ‘Class’ is undefined error in IE.

Hi,

Can I load the cropping area after window loading? Not after clicking on the image

Thanks

Hi,
First thanks for an awesome script! I’ve had it bookmarked for over a year, waiting for a chance to fiddle with it. I have now successfully implemented and customized the tutorial at:
http://mondaybynoon.com/2007/12/17/crop-and-resize-images-with-gd-or-imagemagick-v11/

I “customized” it by not giving an option for the crop type, but instead just including the “ratio.js” file only.
I modified the X and Y to 21/8, so images can be cropped and resized to 420×160px.

Unfortunately, the Cropper is stuck at a different ratio (one that, after cropped and resized to a width of 420, generates a 420×131px image).

So, is it possible that the CropperUI is messing up my ratio? If not, where might I look to find what’s causing the problem?

Thanks!

Can we crop and resize the image other then the side we use this script.

Can we use crop tool for other site . Mean it will work only for the image of script site or for other site also.

I am trying to test this script but there is some issue with IE7.0. If I am moving the mouse in the browser area, it throws an error and automatically close. Please check and fix.

@Malwinder, we aint got crystal balls, unless you give us a URL how are supose to check and fix YOUR coding problem?? we know it a problem with your site but unless we see it we cant see what you’ve stuffed up now can we??

Hi,
I want to crop the image and store it in a database.Can you explain me how to do it?clearly?