DEfusion.org.uk

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:

....

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

@Me:

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

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!

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

JungleCoder:

Do you have a working example that I can view.

-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

Rob,

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

-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

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,

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?

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.

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

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

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

[HTML][/html]

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

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

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

}
);

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

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

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.