DEfusion.org.uk

Usman: Something is not included properly (maybe script.aculo.us or prototype) as the error is telling you that Draggable (defined by script.aculo.us) is not defined.

How should I implement this to crop the desired image with PHP? I should take advantage of x1×2 y1 y2 somehow?

Anyway, thank you for this marvelous script. Keep up the good work.

Octavian

Octavian: Please see the FAQs (http://code.google.com/p/javascript-image-cropper-ui/wiki/FAQs) for examples using PHP with the JavaScript Image Cropper UI.

If I load it into a dynamically created iframe how should I create the object ( [lang]Event.observe (

window,
‘load’,
function() {[/lang]
) it’s not working.

Octavian, if that code is inside the iframe that you’re loading then I can’t think of any reason why it wouldn’t work.

It is not working. It’s very strange because I tested with a non-modified example page that works in a new window and when showed as a dynamically created iframe, the cropper object it’s not created. Should I use the cropper attach function?

HI,

There is no cropper.php or index file.
How do i implement this?

Andre,

Read the above post or the FAQ for detailed instructions on implementing the cropper.

Yes, the FAQ and detailed documentation are very helpful and have helped me from knowing nothing to full implementation.
amazing script.

Hi,
I have added below scripts as mentioned:

added below Javascript code
// example with a preview of crop results, must have minimumm dimensions
Event.observe(
window,
‘load’,
function() {
new Cropper.ImgWithPreview(
‘testImage’,
{
minWidth: 200,
minHeight: 120,
ratioDim: { x: 200, y: 120 },
displayOnInit: true,
onEndCrop: onEndCrop,
previewWrap: ‘previewArea’
}
)
}
);

I am using ASP.Net MVC pattern for my application.When I tried to run the page I am getting error as
Draggable is not defined
$(”#videopreview”) is null
Cropper is undefined

Please let me know I am doing anything wrong

@Tushar:

$(’#videopreview”) isn’t defined anywhere in my code so that’s not an error from my code. The “Draggable is not defined” is telling you that script.aculo.us isn’t loaded properly for the cropper (e.g. the Draggable module isn’t loaded).

-D

I’m confused, the people asking “why is cropper undefined” they are programmers? seriously? I mean, this issue is explained about 5 times in this page, more than that actually, yet these guys turn up, ask the same stupid question.

Is this really the low quality of programmers today who can’t even fix a simple problem properly? seriously….makes me cry almost…

Well thats just it, a lot of programmers today think they are programmers but all they are, are artists. Like artists do, get some paint and put it on the page where it looks good and works ok, wanna be programmers today who call themselves programmers get ready made scripts and paste them on a page to make it look good and hope it works.
when it doesnt work then they are stuffed, they have no idea what to do and ask stupid questions.

You are right, but they can’t READ as well as can’t program, that’s the sad part, anyone asking why is “cropper is undefined”, please read the comments above before asking the SAME question again.

At least do that for yourself…....

Hello,

I’m using cropper on my website.
Under FireFox and Google Chrome, everything is right.

But under IE 9 , there are problems.
Sometimes it’s works, sometimes not.

This feature is making me crazy.

Someone have solution to resolve my probleme ?

I was trying the examples(the basic example) in cropper and I noticed something weird
I put multiple images in a div(call them image1 and image2)
I wrote a function that would attach a cropper object on the first image when a button is clicked… so far so good
however whenever the cropper was attached to image1(i.e. the button was clicked), the ordering of the images would change i.e. image 2 comes before image1

Is there any way I can avoid this?

Blasting:

The cropper removes the image from the DOM & replaces it with a wrapped image (by appending to the parent of the image). The easiest solution would be wrap each image in its own div.

Oh, I was actually hoping to avoid that..
But i guess thats the easiest way.
Thanks for your help :)

con’t drag on ie9.

First of all – PERFECT SCRIPT. E X A C T L Y what I needed…
That is why when I faced a weird issue I decided to debug…

In case somebody else will come across the same issue.
Everything is fine in Chrome, FF, IE8 (non compatibility view).
But ones switch to compatibility view – everything just stops. I see image, but no manipulation available – click, drag, resize .. nothing.
I see the preview in ‘previewWrap’... though…

After few hours of fighting I realize the following: – creating of div element and assigning CSS class at the same time doesn’t work.
In other words this:
this.handleN = new Element( ‘div’, { ‘class’: cNamePrefix + ‘handle ’ + cNamePrefix + ‘handleN’ } );
doesn’t work.

But this:
this.handleN = new Element( ‘div’ );
this.handleN.addClassName(cNamePrefix + ‘handle ’ + cNamePrefix + ‘handleN’);
works fine.

So I walked through JS file, converted everything to the above syntax, and now everything works just fine.

May be it is my only issue…. (version of prototype or scriptaculous… I do not know)... but may be somebody else experience the same….

I know this is a dumb question, but how can you save the cropped image?

Cropper was a very very good script but…...
it doesn’t work on internet explorer 9 !
Don’t waste your time this script is not supported ( Last updated 6th October 2009 )

@nep

The script is supported, I just didn’t have the ability to test in IE9. Today I did and other than requiring a newer version of Prototype/script.aculo.us (not sure which as upgraded both at the same time) it now works 100% in IE9 for me and required no changes to my script.

The link to the FAQ is dead. It is not working. How can we implement this with PHP please ?

@B and C Hosting:

The FAQ’s are working fine for me: http://code.google.com/p/javascript-image-cropper-ui/wiki/FAQs

IE8 & IE9 work great but I can’t seem to figure out this issue with IE7. Can anybody give me a hint as to what I’m doing wrong or have a solution?

Here is the error message from IE7:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)
Timestamp: Wed, 20 Jul 2011 04:22:11 UTC

Message: Object doesn’t support property or method ‘addClassName’
Line: 1357
Char: 4
Code: 0
URI: http://XXXXXXX.org/assets/js/cropper.uncompressed.js

I included all scripts, but i get the error – Draggable is undefined in cropper.js

I included all .js files including prototype,scriptaculous, etc but still see this error. Is there anything obvious that i am missing here? Please let me know.

thanks,
Jai.

Your code running very very well its really need donate, but i can’t find that how i can store my cropped image in my own folder ?
Any help would be greatly appreciated.

Jessica,

This is just the UI for the cropping in JavaScript, it doesn’t do the saving of the images directly itself. There are details/links to examples in the FAQ page for various languages.

Hope that helps,

-D

First, thanks a lot for Cropper, it’s quite fantastic.

One problem though… I can’t get it to work with mobile devices. I’ve tested on the iPhone (iOS4/5) and a number of Android devices and all fail. On the iPhone the scaling selection centers on a tap, but you can’t slide it around or resize it.

The Android devices are roughly the same, although some seem not to load the script at all, at least no resizing selection appears.

Am I doing it wrong? Or is it possible to improve for mobile devices? I was thinking of using the tap gesture to center the box and adding zoom in/out buttons to rescale?

Thanks for any ideas and thanks again for Cropper.

Thank u for posting.

Great script, integration was easy, until I needed to mess with the image that was displayed for cropping. I need to crop the very large original image, while displaying a smaller version for the crop tool. I found that the transform from the crop tool return data is insufficient to crop the original. The height and width return data is redundant given the two x,y data points. Is there a way I can modify cropper.js to return the image width and height, not the crop box width and height? I can probably figure it out myself, but I also think this would be a very good change to the tool.

Great work… Thank you

@Chris Zegelin: in all seriousness, your best option is merely to stop using Prototype and switch to jQuery, I was once a stanch supporter of Prototype, then I realised their plan for version 2.0 is to drop extending the DOM because it’s a super bad idea and to go with wrapping the DOM instead.

which is basically exactly what jquery does, except you can have jquery today and you most likely will have to wait about 2 years to get prototype 2.0, they have been talking about it for years.

then, even if prototype 2.0 does arrive, which is doubtful, jquery 2.x will be available and will blow the socks off it, prototype just didn’t evolve fast enough and now it’s dead, just waiting for fish to pick it’s bones clean, which is what libraries like backbone and underscore are doing.

save yourself the trouble, invest now in switching to jquery and forget prototype, it’s a dead library and has been for years, although nobody remembered to tell it. I invested the time and now I realise just how much better things are, I don’t look back, you shouldn’t neither.

and before anybody pipes up saying prototype isn’t dead, stop deluding yourself, this, is a dead parrot!

Christopher, with all due respect, when someone asks for advice on how to do something with a tool, telling them to completely change to a different tool is generally not particularly helpful.

I mean, if I ask about ways to tune the fuel injection on my Oldsmobile, telling me Oldsmobile is dead and I need to get a Chevy really doesn’t help me at all.

Great tool!

I’ve got a small problem, though. I use the cropper to crop images, where the actual image cropping is done on the server. The img element is updated with the cropped result without any page reload. The cropper is still visible, though. What I want is to be able to hide and reset the cropper, but the Cropper.reset() method doesn’t seem to do what I want. I also would like the user to click outside the selected area to hide the cropper. This should be possible, right?

@Johan :

Please see the “Dynamically changing image” example/demo for how to remove/reset the cropper. You could use this functionality to remove the cropper when a user clicks outside the image.

Congratulations, great work!
Please help to resolve the following problem:
Cropper works perfect if the is placed in a pure place. If is inserted in a table cell ( ), then the image disappears and cropper works only with background color (no image!). I have tried a lot of variants: with/without own div tags for images, with/without PHP, static/dynamic croppers and other things. The effect is always the same. Please help!

Sorry, I cant see brackets in the previous message. Now I’m posting it without brackets:
If img tag is inserted in a table cell (tag td, tag img, tag td end), then the image disappears …

@Lubo

I’ve had reports before that the cropper doesn’t work within a table cell, but I’ve also had reports that adding the table-layout:fixed style to the table helps.