DEfusion.org.uk

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

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

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.)

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

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

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

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…

How are you supposed to crop the image to save it? I’ve looked around and couldn’t find anything… 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

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!

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

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!

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.

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

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.

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

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

cheers

Lucas