DEfusion.org.uk

Thanks Dave, that works great
I would donate to version 2, but Pledgie is saying “Campaign has ended”

Cool utility, but you should probably mention in the Usage section that the cropper.css is required for this to work. The sample HTML pages don’t refer to that file, and there’s no reference to it in the instructions either!

I finally figured it out by making my server output an identical file as the sample, and mine still didn’t work so then I knew I must be missing a file somehow.

How could i save cropped image by JavaScript Image Cropper UI, using Prototype & script.aculo.us.

This is awesome. I am implementing it in my WordPress theme panel. But I am facing problem with putting two or more image on the same page. Anybody can direct me to the right direction for this… Implementing the cropper on two or more images in one page.

Hey, this thing rocks! I got it working, multiple images on a single page. I even got into the JQuery Thickbox in the WP’s admin. WP has JQuery built it. The only problem is that when we scroll the page down and then display the thickbox, well, the cropping doesn’t work too well. Was trying out your position Absolute example—no luck yet.

Some other things that I am thinking about are this…

Can I make any of the sides fixed to specific location? For example, the bottom cropper fixed to the bottom of the page.

Can I make one side of the cropper matches the other side on the opposite direction? Like if I pull the right side 10 pixels to the right, the left side follows 10 pixels to the left.

Actually I want to make a fixed centered crop area, fixed to the bottom of the page. Using it to allow WP users define their own content area and sizes.

And I’ve been reading a few comments about multiple croppers in an image. Can you point me out to the right direction?

I am trying to get the code working. But I am getting this error “Event.observe is not a function” on firefox and on IE “Event is not a function”. Please suggest.

Hmm… I need some customization/enhancement. Can you do this Dave? Or know anybody who can help me? Things like multi-cropper in a single image and some extra behavior coding… I can do server side programming but JS/JSON/freakinly-awesome frontend interface is not my strong-side.

Dave, I replied to your email. Maybe you can also check the Spam/Junk folder too. :)

I tried to use this in Joomla! but it doestn’t work… I suppose, there is some conflict with mootools.js integrated in Joomla. Can someone help?

I’m facing the same problem that Nitesh (post n#536 – page 27).
He wrote: “I have tried this control using Ajax ModalPopupExtender. The Crop Box is not getting displayed. Can any one please help me.”

If we remove the style=”display:none” of the referenced panel by the PopupControlID ModalPopupExtender, the cropper works perfectly!
Now the problem is that the the panel is showed as soon the page starts to load. Seconds after the load, the ModalPopupExtender hides it.

How to solve this?
Maybe a timeout? I don’t know… I’ll continue to research…

Note: this problem only occurrs on IE, on FF everything is fine.

Hi , Thanks for such a good article. Is there any possibilities to save the preview image using asp.net .. Thanks in advance

Mahesh,
ASP.NET (C#) version here: http://geekswithblogs.net/SanjayU/archive/2008/09/08/asp.net-image—photo-cropper-in-c.aspx

multiple croppers in an image (allow multiple croppers on a single iamge). Can you please email me the solution? I’ve read a few comments here, but no luck. I thought it had been solved. Thanks So much.

multiple croppers in an image (allow multiple croppers on a single iamge). Can you please email me the solution? I’ve read a few comments here, but no luck. I thought it had been solved. it is kind of urgent. Thanks So much.

Hello all,

I’m looking for to make a fixed dimension result (x:160px and w:210px) and save the result in a folder with another name .

Thanks a lot,

L

can any one let me know how can we save the crop image in any named folder…?
i m using asp.net 2.0 with VB.netlanguage..
will wait for reply
thanks regard
vik

Great work! thx so much :) :)

Great work! But there is one bug,i can’t us this cropper while i haven’t resolved it. When i use ratio(on small preview user can select crop area,and then on original image crops area,that is needed),the crop area is jumping… Does anyone know,is it possible to fix this bug? Thanks.

Amazing tool which is so simple to implement and use.

Leonard:

We’re doing exactly the same thing at work, we accept the upload, resize it to a maximum size for the display of the cropper (say 600px wide) and then also put the scale value of the original to the resized cropper image in a hidden form field. Then when you submit the cropper you just apply the scale value to the values the cropper supplied. If you’re using the preview one (so you have a fixed-size result) then all you need to do is crop the image applying the scale then resize to your fixed dimensions.

Hope that makes sense,
-D

Leonard,

I see what you mean, if you really want to use the preview version then you’ll have to try and apply your factor to the min & max dimensions you are setting for the cropper.

Finally you gave us the script we are seeking for from very longer.

Hi, I wanted to see if anyone else was having problems with the Cropper not working in Firefox 3.5.

Tim:

I’ve just try the demo/test files in FF 3.5 and everything is working fine for me so it could be an integration issue. Do you get any errors in the console?

Thanks for the quick reply. I don’t get any errors. When the page loads I am not getting the crop box over the image and the preview isn’t being show correct. I checked it in other browsers and it was working fine in them.

Hi! I experienced the same problem in Firefox 3.5

All healed when I explicitly added cropper.css to the head tag :)
(not kidding, somehow i forgot to do it, or hoped that the javascript will do the job, and it worked for many months under everything, except this new FF3.5)

Hope it helps

regards,
lori

Thank you that fixed it. It looks like cropper.js is not adding the include for the CSS file in FF 3.5 as it was in FF 3.0.

Good work done..Many ppl would be looking for such a great source for cropping the image..
I added all the necessary js file as defined above and also included them in my asp.net webpage… Also i added the code defined above to make a particular functionality of crop working .. but it is not working … it just displaying the image

Help !!!

Hi, I have found a solution for compatibility in Firefox 3.5, you need add :

head = document.getElementsByTagName(‘head’)[0];
CSS = document.createElement(‘link’);
CSS.setAttribute(‘rel’, ‘stylesheet’);
CSS.setAttribute(‘type’, ‘text/css’);
CSS.setAttribute(‘href’, ’/cropper/cropper.css’);
CSS.setAttribute(‘media’, ‘screen’);
head.appendChild(CSS);

In the top of the cropper.js

Enjoy

Another fix for the Firefox 3.5 thing is to simply add the following to the pages that use cropper.js:

(obviously, changing the path if it’s not correct)

You can also remove the following section in cropper.js as simply adding the stylesheet to the page does the same thing. Here’s the section you can remove from cropper.js:

// include the stylesheet
$A( document.getElementsByTagName( ‘script’ ) ).each(
function(s) {
if( s.src.match( /cropper\.js/ ) ) {
var path = s.src.replace( /cropper\.js(.*)?/, ‘’ );
// ‘’;
var style = document.createElement( ‘link’ );
style.rel = ‘stylesheet’;
style.type = ‘text/css’;
style.href = path + ‘cropper.css’;
style.media = ‘screen’;
document.getElementsByTagName( ‘head’ )[0].appendChild( style );
}

}
);

Sorry, didn’t like my HTML, this should work:

This is what you put in any page that calls cropper.js

This fixes Firefox 3.5, just add the following to the page where you call copper.js:

[HTML][/html]

good idea….........

Too bad none of my HTML would display, even after using textile and coding it as HTML as instructed.

I love this and it does exactly what i want, but I cannot get it to work at all.

Here is my sample htm

[lang]

function onEndCrop(coords, dimensions) {
$(‘x1’).value = coords.x1;
$(‘y1’).value = coords.y1;
$(‘x2’).value = coords.x2;
$(‘y2’).value = coords.y2;
$(‘width’).value = dimensions.width;
$(‘height’).value = dimensions.height;

}

Event.observe(window, ‘load’, function() {
new Cropper.Img(
‘testImage’,
{ onEndCrop: onEndCrop }
);
});

[lang]

but it does nothing, other than I know it’s firing the onEndCrop method.

Can anyone help me out.

Hi,

Is it possible to inject options into the cropper once it is created?

I would like to be able to select an option from a list and have that selection change the ratio (and or width/height) without having to reload the page.

For example, by default our page should allow a free crop with no constraints, but on selecting an option from a menu, the cropper should be reset and any new crops should obay the selected ratio (without reloading the page as we are currently doing.)

I suspect this is fairly simple and I am just not seeing something.
Thanks

Any news on v2?

Jim:

Check out the dynamic example in the tests folder, it has a manager that allows you to change croppers on the fly. It’s not a perfect solution but it should do what you need.

-D

Hi. Does anyone know if it is possible to modify the code so it can capture a web-page crop, rather than just the image that the page contains.

The area outside the image and texts and or including the image.

Thanks
PS. Excellent script

Rob,

No it’s not possible, the image cropper is designed for use with images only.

-D

This script has been really great and I’m feeling like leaving a tip … but I’ve got one issue that’s nagging me:

I loaded cropper.js script in the main page, but the crop interface (image to be cropped) is uploaded and then displayed via AJAX. And thus I may crop multiple images using the original Cropper.Img.prototype ={...} definition that was loaded in the window.somevar / top.somevar scope.

In Firefox everything works fine, but in IE, onEndCrop will not supply new coords and dimensions, instead they are the coords and dimensions from the last image cropped. No matter how I move the crop tool, onEndCrop gives the same data from the last image. And when I continue to try multiple images, the data is still from the first cropped image.

I tried to destroy the Cropper object and it’s sub objects and redefine them with each image uploaded to be cropped, but I couldn’t get that to work.

Has anyone had this experience or can anyone point me to the solution? Any help would be much appreciated.

Thank you very much,

JC

JungleCoder:

Do you have a working example that I can view.

-D

We just had a similiar problem in IE8 only, the fix we applied temporarily was to supply the meta tag to make IE8 behave like IE7

Basically the text fields being populated by onEndCrop started out blank but on entry to the image they got set to a set of coords and then didn’t shift no matter what.

After a shirt amount of debug with basic alerts every shift of the cropper calls onEndCrop twice, the first with the correct coords the second with these static ones

Continuing to look into it

Hi,

I want to have a line that would always vertically divide the cropper in two halves like that: http://img36.imageshack.us/i/dvder.jpg/

Could you give me a hint as to how to accomplish this?

Thanks!

@Me:

Simply set the divider image as the background of the crop area with it centred and repeating vertically in your CSS.

Thanks Dave. That was indeed an elegant solution and it works great!

Draggable not defined bug:

I’ve been messing around trying to get rid of the ‘draggable not defined’ error message. I found out that when putting the scriptaculous and prototype in the header of the page, and the cropper.js in the body the error is no more.

so like this:

....