DEfusion.org.uk

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 http://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