DEfusion.org.uk

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

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:

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

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…

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

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

@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.

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.

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)

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!

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?

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.

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.

@ram,

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

how can I save crop image?

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