DEfusion.org.uk

Hey,

nice work, thanks!
I’m trying it by myself, but it doesn’t work. I copied the code and my site is looking like this:

But I get the error “Cropper ist not defined”. What’s wrong?

Greetings,
Breanna

Breanna,

Please make sure that you are including the required JavaScript files (Prototype, script.aculo.us and the cropper.js—in that order) and that they are all loading sucessfully (e.g. not returning 404’s).

-D

Hey Dave,

thanks for answering that fast. In Firebug it seems that they are loaded correctly and in the correct order.

Greetings,
Breanna

Breanna,

Please can you try the tests and ensure they are working, then compare with your implementation. This is one of those issues that is pretty much impossible for me to debug blind.

I downloaded v1.2.1 .tar.gz archive and it seems like the cropper.js (compressed version) is missing some code!

It ends like this:
{b=docum
EOF

I downloaded the cropper.js from the demo page and that’s working fine.

P.S. Dave, thanks for the update!

Seppo:

Thanks for pointing that out. I have no idea why the file was truncated in the archives the compressed file in the build directory was fine. Anyway I have updated the archives and ensured they contain the full compressed file.

Breanna:

That will be the cause of your problem, I apologise for that.

Thanks, now it’s working. And sorry for my unhelpful answer.

Hello,
Great UI! I’m currently trying to implement it into my website.
Although is seems as if something doesn’t work correctly in IE7. It works fine when I refresh the complete page every time after cropping an image. But when I do not refresh the page and load the next image to crop, the crop values do not change, all the crop values (coordinates etc) from the previous image I cropped are used again.
This only happens when using IE 7, it works fine in FF and Chrome without refreshing the page every time between images.
Is there something I can do to make it work in IE as well?
Grtz, Riss

Riss:

Can you please explain how you are loading the new images to crop, and if possible provide an example – please can you do this on the bug list: http://code.google.com/p/javascript-image-cropper-ui/issues/list

Awesome script! All functionality is working using your samples on my side. When attempting to start and stop cropper via form buttons (rather than at window load, I’m having a bit of trouble.

Example:

function startCropper() {
new Cropper.ImgWithPreview(
‘testImage’,
{
minWidth: 180,
minHeight: 96,
ratioDim: { x: 720, y: 386 },
onEndCrop: onEndCrop,
previewWrap: ‘previewArea’
}
)
};

Then later:

Results:

When hitting the Crop button, Cropper starts for one frame, and then dies. I’m new to Javascript, so I’m sure its something totally boneheaded on my end.

Any insight is totally appreciated.

Sean

This does not works in web vpn mozilla.
any idea?

Chetali: What’s web vpn mozilla I can’t really find any info on it.

web vpn – it is virtual private network to access intranet sites on web (outside lan).
We are using Juniper network.
for IE, the cropping tool works fine. but not for Mozilla 2.0

Chetali: Well I don’t think that’s something that I’m able to debug not having access to Mozilla 2.0 over VPN. Unless you can provide more details of what actually doesn’t work (e.g. do you get JS errors, are you sure all JS & stylesheets are loaded correctly?) then I doubt I can help further.

Dave,
I have checked this. all the JS files are loaded.
the cropping tool does not appear.
The preview area (where we show cropped image) shows the complete picture. and drag tool to select a part of the picture is not available.

Dave,

Can you just let me know which functions in JS i need to check which actually displaye the croppping tool on the pic?
I wil try to debug it then

Chetali: If the JS is loading and it’s still not working that usually means the CSS isn’t being automatically included properly. There is a new option to disable this, so disable that and include the CSS yourself. If that doesn’t work please continue this discussion on the google group: http://groups.google.com/group/javascript-image-cropper-ui

Great code, will hopefully do what i need…however i do have a question.

I have managed to upload an image from the local machine, and then crop it, but what i now want to send the cropped image to a remote file server. IM still fairly new to VB.net and very new at js so i really dont have any ideas about how to grab the cropped result and maybe save it as a file and the local mahine? I would greatly appreciate any help…

Matt:
This is just a cropping UI it doesn’t give you a cropped picture. Please check the FAQ’s, there is a link to a .net example listed in there.

Thanks for the quick reply…i should of looked in FAQ….hopefully this will work well.

Implementation is neat. But, I could not get it to work since the “object is null” error occurs when cropper is initialized using new cropper(..). I am using Basic implementation as is but no luck.

Magdelin,

Do the tests provided in the download work ok for you? If you can give me more details then I might be able to help. However can you do that on the Google group please.

Thank you Dave for the great javascript.

Something that I would like to share with you all (this may have been posted before but I couldn’t find it)

I had a problem with this cropper showing with black image and the cropper border and that problem was caused by the document type

changing it to [lang][/lang] solved my problem

hope it solves yours too

woops I did that wrong (tried to copy and paste the whole doc type declaration)

changing the doctype to XHTML 1.0 solved my problem with IE

Great work you did.

I changed some code to my needs but now I’m stuck.
I need to display another rectangle like the cropping rectangle.
This new rectangle ist centered within the cropping rectangle. The distance from this new rectangle to the croppingline must change dynamic, i.e. when resizing the outer rectangle, the inner rectangle must resize too.
This new rectangle has to be shown only. No need to get the position, size, etc. at the end of dragging.
And it would be very nice if the space between the two rectangles is displayed like 50% alpha of white.

Anyone can help? Dave?

Thanks for your advice.
Jens

Jens:

Find the code that creates the draggable area in the cropper.js and insert another div for your inner rectangle. Then style it using CSS similar to and your other styling requirements:

postion: absolute;
top: 0px;
left: 0px;
margin: 10px;

That should do (totally un-tested), as long as you always want a consistent gap around your inner box. Otherwise you’ll have to resize it as the cropper resizes.

I have the same problem as 594. JungleCoder (25th Aug 2009). But I’m using ImgWithPreview. I’ve tried using the remove and reset options as well but both throw errors in IE. Has this issue been solved by anyone?

Ian

Ian:

Yeah that’s not possible with the ImgWithPreview, it doesn’t hook into the removal/reset parts. You should be able to add the hooks yourself though following the same pattern as the other hooks.

This tool is so impressive! I really love it

Unfortunately my PHP knowledge isn’t so good, so I was looking for an example of an PHP implemantion of this script. I’ve been searching in these comments and this site’s FAQ and google, but the few results are no longer online.
Is there anyone who wants to share his PHP implementation?

Greets

Doesn’t work in IE 7. ‘Event’ is undefined.

well Alex, in that case, go back and find out what YOU did wrong so you can make it work in IE7.

Hi,

IM using FF 3.0.5 on Ubuntu Hardy, prototype 1.6.0.3 and scriptaculous 1.8.2 (i have checked prototype.js, scriptaculous.js and cropper.js are included ).

I have a file with this code:

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

I can see the image on the page, but when i put the cursor on the image i don’t see anything about the cropper…

Any idea?

Javi

Hi Timothy..

I’ve made a tutorial about this excellent script with PHP for saving images, you can read it http://www.londatiga.net/it/how-to-crop-image-using-javascript-and-PHP/

Hello Readers,

I have a website which is helpful for the people across uk, and mainly situated in Cardiff, so that i want to share it with all of you, please visit:
driving schools in Cardiff
http://www.andy1st.co.uk/areas/wales/driving-lessons-cardiff.php
Driving Lessons in Cardiff, Driving schools Cardiff, learn to drive 4 just £15 Cardiff driving instructors

Lorenz, you can’t imagine how happy i’m with your guide.
This has helped me so much. I’ve been coding for half a day, and I am pleased with the result: http://www.conix.be/www

I do notice a strange problem: unless I use pictures that have a width of exactly 500pixels and a height of less than 500pixels, the js cropper stretches every picture which results in a misorientation of the cropped area. Is there a easy solution for this or should I resize all pictures to this format before using js cropper? If anyone wants to see what I mean:
http://www.conix.be/www/

thanks,

Timothy:

Resizing the image using the tag attributes (width/height) is not taken into account within the cropper code (I believe this is mentioned in the docs). You can either leave that in and do a calculation on the ratio of your original to translate the values that the cropper gives you or you can physically resize the image before you give it to the cropper (although this will result in less quality for your crops).

Hope that helps,
-D

Really great cropping tool. Thanks a lot!

However, I face some issues with IE6. Running the demos in my IE6 gives the ”+” cursor, but most of the times, after a moment IE6 displays the image toolbar (save, print, send via e-mail) and when trying to drag I get the cursor telling me I cannot drag. Things work after typing “ENTER” in the address bar or clicking the “Load Demo” button, though I do not understand what difference this makes.

No need to mention that my own app shows 99% of the time the first behaviour and does not have a magic “Load Demo” button. I already tried various scriptaculous versions but that does not seem to change anything.

Has anyone else seen such strange behaviour or am I (again) the only one running into trouble? As this happens too with the demo pages and the test files included I assume it’s not my misunderstanding the API.

Thanks a lot for any advice!
Tom

Ok, IE6 seems to be completely happy if cropper.css is explicitly loaded in the head rather than to rely on the autoIncludeCSS feature. I do not have an explanation why this happens and it seems that autoIncludeCSS works sometimes, possibly when cropper.css is already in the browser cache. However, adding a link tag to the heads of my own app and the examples distributed with jsCropperUI make cropper repeatably work with IE6.

Kind regards,
Tom

Dave,
Great piece of code. I was hoping maybe you could point me in the right direction…
Got a basic instance working using PHP and ImagMagick to do the cropping stuff after your UI does its work. I am storing the co-ords of the crop and creating a new image each time its cropped so the original image in not destroyed or edited.

I wish to display the last crop size over the original image so that a user can see where the last crop took place. Is this possible with the existing script? I have tried using minWidth and minHeight and ratioDims to display a crop as soon as the image is loaded but this is not exactly what I want to do.

Any help appreciated.
Robert.

Robert: You want to use onloadCoords & displayOnInit (they are documented above) to do what you need.

-D

Dave,

I think I could implement a recalculation of the crop based on the ratio ‘picture size’ ‘width 500pixels’. But then you still have to make your crop on a stretched picture. Wich isn’t easy. Is there no way to prevent js cropper of stretching pictures? For my site it doen’t matter if that results in different layouts depending on the uploaded image’s size.

Thanks for all the help I get here

Timothy:
I’m not sure what you mean, the cropper doesn’t stretch images – in fact doesn’t actually do anything to the image tag but wrap it in the HTML for the cropper.

If you’re having problems can you please post to the google group the comments are not really useful for having conversations to fix issues.

Dave,

Thanks for that! Never seen that onloadCoords and now I’m flying! Will certainly be implementing this in my personal site and I’ll even make a lil donation to help you out.

Cheers,
Rob (N Ireland)

Hi

Just found this site and think its awesome, I have been playing around with it and so far implemented a small application where I have an AJAX image upload to call back and display the uploaded image on page where I then use this cropper to set a fixed size for user to crop. At this point I am stuck. Can anyone point me in the right direction to then save this newly croped image before leaving the page?

Thanks in advance.
Steven

Steven: Please see the FAQ’s the cropper is only the UI part and you need to save the cropped image in your appropriate server-side language.

I understand this Dave, but can’t find your FAQ page anywhere. I am using PHP at the server end, just looking to know how to use the saved coordinates of cropped image.

It’s up in the box on the left at the start of the post, but here it is again: http://code.google.com/p/javascript-image-cropper-ui/wiki/FAQs

Steven,

If you need help with PHP cropping using this tool I can send over a basic version of my script (e: info at ninetyone degrees dot com)

Dave,
I’m sure you have enough on your plate but I was just wondering.. I have 4 fields that are populated whenever I perform a crop (x1,y1,x2,y2). I am looking to apply a multiplier to these values before they are set as the original image and scaled down image are different sizes. I realise I could just do the multiplier after I submit but could you tell me where in your code the fields are set.

Everything else is perfect (so far)

Rob (N Ireland)

Rob: The cropper doesn’t set any fields in your form you have to explicitly provide a callback that takes the co-ordinates and puts them in a form (or does whatever else you want with them) so just do your scaling in the callback that you’ve setup. See the callback section in the above documentation for more details.

Hi,

i want to operate defusion cropper inside a modal box. I have tried it with Lightbox2 and ModalBox but it doesnt work..(it just doesnt show the cross when you put the mouse cursor over the image).

Do you know any library for modal box that works with this cropper?

Regards

Javi