DEfusion.org.uk

WOW, thanks! Been looking for a free version of a online cropper that looks nice. Kudos!

GREAT!!
looks very good :D
add a slider (timeline) with some markers, and you have a great tool for a JS-driven kenburns-creator :)

one question about the script:
is it possible to redraw the crop-box from outside?
i tried to call “setAreaCoords, cloneCoords, drawArea”, but no success…
(working on the timeline-”project” see above)
chris

The cropper is great! Thanks.

There is only one thing that I can’t figure out. I need to change image’s src attribute using javascript. And when image changes, i need to setup cropper for new image with its new size and contents. How can i disable an existing cropper to be able to create a new one for a new image?

TIA, kiwo

but I’d like to know if this is feature that people would like to see added: to dynamically change the image within the cropper without reloading the page.

Yes, it would be nice to add a ‘zoom’ feature.

It seems that area selection is not as smooth in IE as in Mozilla. IE recalculates something constantly and the ‘hour-glass’ appears at dragging.

Just great !!!!! That’s going to be a killer app !! Unique interface and features, no such analog for JS on the web !!! I’ll integrate it in the CMS I’m just working on.
Hope Dave is going to continue the development – adding new features and removing bugs.

Hello Dave !!!
‘Zoom’ is wrong, I meant to fit the selected area to the image area, as it were ‘crop to mask’ (photoshop). On some software the cropped image is resized to the original image size, so it looks it’s ‘zoomed’.
These days I’ll intergate this nice app of yours with phpthumb, I could host a demo if someone wishes.

1.1.0 – More tha good News. I’ll add a link to this site everywhere I use this tool from now on.

Remove/reset cropper didn’t work on Firefox for me.
On IE – click ‘remove cropper’ and then ‘reset cropper’. The drag the select area – the crop values (co-ordinates) do not refresh.

All works great, thanks for the quick fix. I’ll report the bugs if I find any.

I would like to repeat for all those who read this post- I have been searching for crop tool for months, this is the best solution, really the finest one ever- it works in Mozilla and IE ( the most used browsers) and it can be easilly integrated. There is only one other such feature-rich and bugfree tool, but it’s in Java and it is not free.

Howdy and thanks for the great tool! I am struggling with the ratios (when GCD is too low it breaks completely) and about to work up a patch.

Dave, if you already have something in the works please let me know.

I have a modified version of applyRatioToAxis that handles ratios more smoothly, without the jumping effect I was seeing, regardless of their common divisors. It alleviates the need for GCD calculation. Hopefully the resultant ratio is within an acceptable margin of error. Now we can push this feature out on WordPress.com! ;-) Thanks again for the great work.

“I’d like to know if this is feature that people would like to see added: to dynamically change the image within the cropper without reloading the page.”

Yes please! I’m working on a PHP web app with a form where a user uploads several jpegs, and I want to immediately let the user crop them to a 150×150 square – before submitting the final form.

What I’ve done (tell me if I’m doing this all wrong) is made a page with several input type=’file’ form elements, hooked up the submit button to submit to an invisible iframe that moves the file into place after upload, updates the src=’’ of the image tag, then tells the parent document to display the div containing the cropper. Thus, you upload, crop, save, and move on to the next image, all on the same page.

Anyway, to do this I need to be able to change the img src=’’ of the cropper on the fly.

First off, great script!!

I setup your cropper GUI onto my dev site, and am passing the x1, y1, x2, y2, width, height vars to hidden form fields which are then passed to my PHP script below when the form is submitted.

The final photo is cropped, however I am obviously off somewhere as the cropped image isn’t exactly correct. (It appears slightly smooshed and is off a few pixels possibly.)

Any ideas on what I am doing wrong here would be greatly appreciated!!

My PHP script below:

Do you have an idea why do I can’t see the image

(sorry for my bad english)

Thx

Can you tell me why I can’t see the image?? It was working well before…

http://eleves_tim.cmaisonneuve.qc.ca/e0368657/help.jpg

Great work! Thanks!

Take a look also on my JS “ModalBox” component here: http://okonet.ru/projects/modalbox/

Maybe you’ll have some suggestions too. Thanks again!

This is the coolest script on the web since…, well, probably ever! It works so smoothly and beautifully and has saved me hours and hours of time.

Thought you should know, the cursor for the western handle is set to “e-resize” when you probably want “w-resize”.

Very good code. I’m really impressed. I need to use it and I’m concerned about the license for using the code as it will probably go into a commercial app.

Has anyone made a ASP or C# script that actually crops the image?

I see the PHP script above, I may just make the .net version.

Nice work!
well, if you could add two buttons to zoom in/out background image, it would be perfect!

Great work. I wonder how did you manage to do this in 1 and 1/2 weeks…
Here is my problem: I am trying to implement your cropper in C# .NET. My image (to be cropped) is inside Panel object (which is actually DIV element 400×400px) and if image is bigger then DIV element then I have scroll bars. If I move these scrollbars then drawing of the crop area doesn’t work properly. And error is actually the offset for which I moved the scroll bar. I guess I need to compensate for this movement. Where in your code I need to add these values: vertical and horizontal offset? Is there quick solution to my problem?
Second question is… what is the minimum required for cropper UI to work. Are all those JS files necessary. I am asking because I deleted some of them and everythig was still working fine. (I only need basic cropping functionality)
Thanks.

OK, I did some reading on script.aculo.us. Please, disregard my second question. :-)

Press the ‘Remove Cropper’ buton twice on IE and the image dissapears !
I want also to reset the coordinates on ‘Cropper Remove’ how to do that ?

Is it possible to define default selected area (wich appears oninit), without using area ratio ?

I looked at the cropper.js until my head hurt. :) I need to know how to do this… Let’s say I have an image that is 1000×1100… what I would like to do is set the width attribute of the testImage to 500px and crop by aspect ratio with a minimum width and height of 120px. How can I accomplsh this using this cropper? Can I get some help with this? I would greatly appreciate it.

Image Cropper features are good, but i need dynamic feature to upload and crop and update the server image with crop image. How I will do this? Guide me

Stunning. Well done Dave. You’ll be getting a donation from me for sure!

A few more examples would be good, including a bit on resetting and removing a previous crop region.

Sorry… I wasn’t trying to say anything bad about the javascript. :) It’s awesome… I just haven’t been working with javascript for awhile.

What I asking about is using aspect ratio for the cropper when the cropper UI has a maximum width of 500px (as an example) but the image is 1000px. handling the thumbnail isn’t an issue. If I am using a minimum width and height (say 120×120) then when I crop the image I can just crop the selected area and then resize the thumb to 120×120. What I noticed is that the preview window is actually showing the correct representation of what I have selected but the cropper UI is showing the large image in the selection. I suppose I could resize the image first before it’s displayed in the cropper UI, but I was hoping that it could just be done without resizing. I think the key is to use the image from the preview area inside of the selection but I am a PHP developer and haven’t worked with javascript in years… and your javascript isn’t simple… it would take me a month to know it intimately enough to modify it to do what I need… lol.

On the other side of that… I am more then willing to chip in the PHP to crop the images. :) I have a sweet class I put together from a couple of different sources. You can see it here. http://php.amnuts.com/forums/viewtopic.php?t=253

This is really great and usefull tool!
I have just one question, if you set minimum height and width than crop area is constrained to that ratio. Is it possible to set both minimum height and width without having constrained crop area?

I tried to call cropper.setAreaCoords(...), and cropper.drawArea(...) as mentioned above, but I end up getting $( this.overlay ) has no properties. Any ideas? I need to draw the cropping box based on previously saved cropping coordinates.

...or better yet, can I pass in starting coordinates for the cropping box when creating the cropping obj?

I’ve taken the example and thrown a wrapper div around it, gave it a width, relative position and margins and the selector goes a bit wacky.

http://www.susan-deaux.com/z/cropper/tests/example-Preview.htm

After playing a bit more it seems that the wrapper’s position: relative is giving the cropper the most problems.

Hey this is a great script. Just wondering when the image gets so large (say above 2000), it would be nice if I could instead crop a zoomed version of the image. I just tried with this cropper and , however, it doesn’t seem like the zoomed one. Instead, the script displays the original size image in the cropper window.

Can you tell me how to upload that cropped image into the server in ASP?

I’d like to set another callback when I double click on the cropping area (which would then make the AJAX call to the server). Does the cropper currently support this functionality? Might it?

New issue…

I’m using the cropper in a lightbox-style POP-up (absolutely positioned). If the page is scrolled (that is, the veritcal scrollbar is not at the top) then the crop selection is off by the height of the scroll.

I’m getting around this by scrolling the window back to 0,0 when the lightbox is displayed, and then back to the correct position after the crop. It’d be cool if the cropper could be aware of this, however.

I’m still having trouble with IE’s callback… after the first crop the coordinates are always 0. I’ve attempted to do a cropper.remove(); cropper.reset(); in 100 different orders and then re-initializing a cropper object on demand… with no success. How does your IE fix work??

On the dynamically changable image demo the layout isn’t udpated between image selections.

This is an excellent script, exactly what I was looking for.
Here is an ASP function I just wrote that works with this. Grabbing the variables is handled elsewhere, but should be easy enough to figure out.

using System.Drawing;
using System.Drawing.Imaging;
using System.Drawing.Drawing2D;
// img is defined earlier in the Picture class
// I created, and is just a System.Drawing.Image
// x/y1 and width/height are the same as in
// cropper resWidth/Height are the resulting
// image dimensions, so I can resize the crop too.
// You probably just want to remove the Picture
// types and just use Image or Bitmap types
public Picture crop(int x1, int y1, int resWidth, int resHeight, int width, int height)

{
Picture res;
Bitmap bm = new Bitmap(resWidth, resHeight, PixelFormat.Format24bppRgb);
bm.SetResolution(img.HorizontalResolution, img.VerticalResolution);
Graphics grPhoto = Graphics.FromImage(bm);
grPhoto.InterpolationMode = InterpolationMode.HighQualityBicubic;
grPhoto.DrawImage(img,
new Rectangle(0, 0, resWidth, resHeight),
new Rectangle(x1, y1, width, height),
GraphicsUnit.Pixel);
grPhoto.Dispose();
res = new Picture((System.Drawing.Image)bm);

return res;
}

Hi! Firstly I’d like to say what an absolutely fantastic piece of coding. You truly are amazing at what you do!

Could someone point me in the right direction about what to research to learn how to get this to save the cropped image on my server after hitting a crop button? I don’t really have the first idea, but i’m pretty good at learning if someone can tell me where to look for a starting point. Although at the same time the easiest and fastest method would be better as if someone has already made a cropping script then theres no point in me recreating it (and badly as i don’t really know what i’m doing).

Am i right in guessing that i can feed in the ingoing_filename, ingoing_width, ingoing_height, crop_topleft, crop_botright, outgoing_width, outgoing_height, outgoing_filename to some kind of PHP script (that possibly uses GD library or something) to save the cropped version of the picture. I know i’m probably insulting all of you guys intelligence but am i along the right lines at least?

Any help is greatly appreciated, but i’m not looking for someone to hold my hand. And if you guys are all too busy then thats no problem – i’ll completely understand and i’m sorry for wasting your time reading this.

Oh keep up the good work Dave. If i end up using this for any of my projects at all then i will definately donate.

Cheers

If you use CakePHP you will notice that including this in your script will break the CSS layout. This is due to the CSS rule

form div{
vertical-align: text-top;
margin-left: 1em;
margin-bottom:2em;
overflow: auto;
}

A simple workaround is to add another rule directly after this like so:

form div.no_cake, form div.no_cake div {
margin:0;
overflow:hidden;
}

and then in your code surround the img tag with a div with the class name of no_cake.

Cheers

Finally got around to sending that paypal payment. Well done on a very good bit of coding.

I have to say that your cropperui has added panache to an almost completed www.paint-that.com. Thanks!

Hi! What a great tool!
Is it possible to have more than one cropper on a page?

cheers

Lucas

Hello

It is super brilliant!

I would like to know if it possible to have fixed size or fixed a maxheight and/or maxwidth.

Thank you

Dave:
You can do whatever you want with the ASP code. I don’t have a public site, I’m using it on an intranet site.

This is undoubtedly a really great script.
I was already using my own cropper but it is nothing compare to this one. I’ll definitely switch.

Thank you, Dave, for this work.

Anyway there is something I’ve miss…
Why are we passing through the EndCrop function at any click on the document? It may seems obvious for you but for me it isn’t. Actually I even don’t understand how does it happen and when is this function called.

Thanks again.

nathan

Honestly, this is truely awesome! I am sooo jealous of your JS abilities. I thought about writing a simple JS cropper for an upcoming project (it would have been no where near the level of this) but I decided to take a look at what was out there first. I’m sure glad I did, because you are a genious.

I work for a university and was designing a new administration with an image upload section in which they would select the most interesting area to crop out for thumbnails. I looked around the net for a good crop tool and did not find what I was looking for, so I threw together my own. I just recently stumbled across this one and was absolutely amazed! I will definitely throw out my horrible code and use this one! Thanks Dave!

Hi,

on you feature list I can see that 0008 is checked. Does that mean that it is already implemented – and if so – how do I use it?

Thanks in advance

This is a really great script.
But how to save a cropped picture? Or just in Demo ist is not possible?
And i would like to know if it possible to have fixed cropped picture size?
Thanks!

Firstly I have to say what a really neat bit of coding – very cool! I am having one prob though – I’m trying to change the image dynamically using ImgWithPreview but can’t seem to get it to work, despite whether i use remove(), reset() or setParams() – it either displays the last image or the current one distorted or a mixture of both! Yet it works fine with the standard Img object – the code i’ve found to use for this is:

if (curCrop != null)
{

curCrop.remove();
$(‘upimg’).src = tempFileName;
curCrop.setParams();

}
else
{
$(‘upimg’).src = tempFileName;

curCrop = new Cropper.Img(
‘upimg’,
{previewWrap: ‘previewWrap’,minWidth:96, minHeight:96, displayOnInit:1, ratioDim: { x: 1, y:1 }, onEndCrop: onEndCrop }
);
}

Any ideas?

Cheers

James

How are you supposed to crop the image to save it? I’ve looked around and couldn’t find anything… Thanks!

TJ:

You’ll need to pass back the values to a server-side form and use something such as .NET, PHP etc to do the cropping…

First of all – you are the man!
This js is exactly what I’ve been looking for. Very very nice work and very generous of you to give it away. If I ever profit from it I will be sure to donate to your paypal.

Its working perfectly for me in IE, However in Firefox I’m noticing some interesting behavior – it seems that if I have an image thats actually 1600×1200 but I have displayed it onscreen as 400×300 the crop area shows the a ‘zoomed in’ area – i.e. if I am cropping x1:100, x2:300, y1:90, y2:210 with a width of 200 and a height of 120 the crop window shows the capture from the area of the original image. Its not scaling the coordinates. Does this make sense? I’m only seeing this in Firefox.

I’m wondering if this behavior is expected and if so is there a setting I should look into? Anyone else seeing this?

Thanks again for the great script.
Alex

Congratulations!
This script is wonderful!
But i’m have a problem in IE.
I’m using the basic mode.
Sometimes, the image doesn’t appears. Then, i press F5, to refresh the page, and then, the image appears.
This problem doesn’t happen in Opera.
What is this?

Thanks

Julio Romano

Before I start, some more flattery; you’ve saved me quite a few hours’ work, thanks!

I am currently writing a control panel extension to enable colour channel changes and other image processing functions to be called on the preview image. I came accross a bit of a DOM problem in that you clone the image node for the preview pane. This only becomes a real problem when you try to access it via the DOM to make changes. Rather than just tell you about it I have fixed it for you and post a diff here for you to check/integrate/laugh at.

This is a diff against the latest version of cropper.uncompressed.js (internally labelled as “v. 1.1.0 – 2006-06-02”)

The backend I am using is RoR but if anyone is interested in the js code I am producing to do the calls to refresh the preview and/or any of the ruby, I could easily be pursuaded. ;)

Thank you so much! This is just what I needed. It runs smoothly and looks wonderful in Firefox and IE6. Has it been tested in IE7? (When I install IE7, it somehow resets my internet connection and I can’t access the internet…which kind of defeats the purpose of the darn thing.)

Hi Dave

First of all: what an excellent tool you’ve created. You’ve saved me loads of development time.

I’m integration your cropper into a CMS, but I have a bug, which as far as I can tell, only occurs in IE (ver 6.0.2900.2180). When the page with the cropper is first loaded, and I click inside the image to start selecting an area, the image disappears. I’m still able to select an area, but the image disappears beneath the overlaying div’s. If i reset the cropper, that is reinitializing it, the image is still gone. I am however able to load it in an object via javascript, meaning it exists somewhere in the DOM. Also I am able to see it in the DOM explorer of IE developer toolbar.
When I refresh the page the cropper will usually work without problems.
Any ideas as to where to start looking?

Regards
Sune

Hi again.

You’re probably right about the CSS bug. My initial suspicion was that the overlaying div’s lost their transparency. Having looked into the way the cropper is drawn in IE along with the fact that the image doesn’t reappear when resetting the cropper, tells me that this isn’t the problem.

The cropper is nested inside a div wich is again nested inside a td. Neither of those have any CSS positioning. Along with the cropper there is another div which is positioned with float:right, in the same parent div.
I’ll try to illustrate it:
[td]
[div]
[div style=”float:right;”][/div]
[div id=testWrap]the cropper[/div]
[/div]
[/td]

In case it’s an IE-CSS bug… Any ideas as for how to test for it and deal with it.

Regards
Sune

Is it somehow possible to create multiple previews? I have to crop a picture and want output a thumbnail of the cropped picture and the cropped picture itself.

Great tool!

Just an FYI – one of the people in my test group has IE7 installed. He said he had no problem with the Cropper UI. Yay!

Excelent script!

I just want to save the cropped file in the server. How can I do that??
Thanks

Hi Dave
The cropper works great for me except when I stick it inside a DIV tag. I have a page where the content is inside a tag so the page doesnt extend too high and break. All the cropping is done inside this div. What happens in Firefox/Mac is that the selection area works fine except for the bottom right corner handle – when that’s clicked, the selection box jumps upwards and shrinks…
In IE the image being cropped extends way off the bottom of the div, behind some other page elements, and has the same bottom-right corner handle problem.
Could I do something to fix or prevent this?

many thanks

Lucas

Great, great and great!
Any news with regards to rendering of the selection image when zooming?
How does it handle multiple images on same page, all inline for cropping?

Hi Dave
Yes, my tag is

is there a better way to do this that will prevent the problems with the cropper?

cheers

Lucas

Hi Dave

I have not been able to pinpoint the exact cause of the bug mentioned earlier, however I do believe it has got something to do with the way the cropper is positioned inside the rather complex table structure. If I move it outside the table the bug doesn’t occur, and similar if I position the containing div absolutely it doesn’t occur either, though of course the known positioning bugs do.
As I am intregrating into an aleready existing CMS, it is not an option to change the layout, or the way it is built (in HTML). Therefore my solution was simply to open the cropper in a new window. Almost to easy huh!?

I’ve also not been able to replicate the bug outside the CMS.

Regards
/Sune

Hi Dave,

First off, great job on this script. You’ve done some good work here! I’m playing with some code where I want to be able to put the cropper inside of a javascript (virtual) dialog. I’ve played with a couple (iBox, Prototype Window Class) and haven’t had much luck. I finally pulled a dialog library that I’ve been playing with out of mothballs and am starting to have marginal success. In Firefox, the handles for the selected area end up in a different position that where you click. IE has the same problem with the addition if I clear the dialog, then redisplay it, the image disappears. I’m looking into anything that the dialog code is doing that may be causing these problems but I was wondering if you had any thoughts from your side.

You can check out the example

TIA,
Bill

What about an added feature, so If you absolutly need to crop on scaled images, you can apply the cropper without an image preview, just the cut drag frame? Will this be possible?

Hi Dave,

I played with it a bit more today and found that my problem is tied to the getCurPos call. The offset in the dialog is the position of the upper left of the dialog. Any thoughts on how that can be subtracted out of the getCurPos call?

Bill

Oops, I meant my tag is
div style=”width: 379px; overflow:auto;”
cheers

Lucas

I just love the image cropper, have been looking for this a long time.
It works just perfekt for my needs.

Thanks….

Hi Dave,

I’ve made quite a bit of progress getting the cropper to work inside a prototype window. There were two things I did (although there may be a better way). The first was to change the calculation of the wrapOffsets to be based on cumulativePosition. Then I registered a callback so that when the window is moved, the wrapOffsets are updated to reflect the new position. This appears to work but may have side effects that I’m unaware of. The main problem I’m currently having is after I create the window and then close it, I call Cropper.Img.remove(). Unfortunately I’m finding that the onEndCrop callback still gets called. If I open a window multiple times, the onEndCrop callback gets called multiple times.

Bill

hi Dave,

thought i’d just drop you a line to say i was very impressed with your javascript cropper. i’ve actually used it and built a mini jpg cropping application for anyone to use. it also offers the chance to create an MSN Display picture sized crop which might be useful to some people.

thanks for the great script, it really inspired me to make something useful – you’re fully outlined in the

.

cheers

Luke

Wonderful!!!

Thanks a lot for your work!

Cheers

I’ve tried to donate but receie an error from paypal:
“We cannot process this transaction because there is a problem with the PayPal email address supplied by the seller.”

I recently added a class to the mix that supports multiple previews. You can check it out here: Javascript UI Cropper with Multiple Previews