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

Dave,

I’ve been playing around with this some and I figured out the onEndCrop problem. It has to do with the calls to Event.observe. The current implementation is passing in anonymous function refs. I found if I did something like the following, then everything cleaned up.

The other problem I’m having is that I have a routine that changes the cropper to/from a fixed ratio by clicking a checkbox. In Firefox it works fine, in IE, it seems that it takes an extra mouseclick to get the cropper to reset. Here is the function I’m using in my wrapper class. I’m sure there is a better way.

I’m not very experienced with Javascipt, but I didn’t think I was a tard. Cropper has me thinking otherwise. I have followed the examples very closely and no matter what I do, the img I pass to Cropper is MOVED to the end of my layout (upon loading the page) and RESIZED slightly. Furthermore, while I can see the callback is being triggered, no selection box is created. It also seems as though the active area becomes the whole canvas -the callback is triggered when I click ANYWHERE on my page.

I have gone so far as to remove all my CSS and pull the img out of the enclosing td. No go. Any ideas? Please? please…

-Chris

Due to the way that this library is written you are not able to resize your image and crop it within the same interface.

This is because the image src is written as a background image of a div, sized and positioned accordingly, unfortunatly to my knowledge you cannot resize a background image.

Thanks for the library David, I may end up writing my own implementation of it in order to resize the image in the DOM, I’ll try to remember to post back if I get to it.

Hi Dave
Any chance of that div overflow bug being resolved in the next release?

cheers

Lucas

I think I found the problem I was having earlier. Cropper does not do well if the image is less than 100% of the size of the enclosing div and right aligned. I had my image in a floating div of 50% of the canvas, and Cropper got sick when the image was a small one taking up less than the full div.

Dave: if you are working on updates, please consider this case.

Also, please consider parameterizing the location of the cropper.css file instead of assuming it is in the same directory as cropper.js.

Mike Burrell, I resolved this problem!
Replace string:
imagecopyresampled($thumb, $big, 0, 0, $x1, $y1, $x2, $y2, $ow, $oh);
with
imagecopyresampled($thumb, $big, 0, 0, $x1, $y1, $width*2, $y2, $ow, $oh);

Enjoy!

hi,

i couldn’t find setParamsAfterZoom() in crooper.js file. Actually my requirement is we placed image in div, that div in a table. i am unable to get correct cropping area and if i scroll div down, i am unable to do select the area where scrolled area of div.

can u let me know how to solve this problem.

Thanking u,
Ravikiran

your’s example test1.html is not working well, after image got small size the cropping is not working well and also after image zooming the cropping is not working will. plz fix the bugs , bcoz i want the test1 solution in my project.

This cropper is absolutly brilliant – far better than anything else I’ve seen!

A feature that would be nice – rotating…

Flipping between portrait and landscape – this can be done already by submitting the current crop area and ratio to a dynamic page which does a bit of maths and then starts the crop again with set postions and reversed ration but it would be nice if this could be handled by js

Rotating by an arbitary degree would also be nice but not sure if this at all possible…

Thanks! Keep up the good work!

Oh and Multiple monitors are aweseom – check out multimon at http://www.realtimesoft.com – i couldn’t live without it on multi monitor setups!

I was looking for a nice way to build avatars for my site users, your solutions looks amazing, can’t wait to implement! The preview box is damn good too! :)

$t1 = $ow / $width * ‘120’;
$t2 = $oh / $height * ‘160’;

imagecopyresampled($thumb, $big, 0, 0, $x1, $y1, $t1, $t2, $ow, $oh);

This is a fix for that PHP script that mike made… the fix that max posted didnt work for me. I am using a fixed size for my output of 120×160 so replace the 120 and 160 with what you are using. Also my source image was the same ratio as my new one, i haven’t tested for stretching if the ratio is different but i would guess it to be an issue… Thanks for the great tool!

How do you actually do something to the image instead of just selecting certain areas?

This works fine

I mean:
$file = “test.jpg”;
header(‘Content-type: image/jpeg’);

$x1 = $_POST[‘x1’];
$y1 = $_POST[‘y1’];
$width = $_POST[‘width’];
$height = $_POST[‘height’];

list($ow, $oh) = getimagesize($file);

$image = imagecreatefromjpeg($file);
$thumb = imagecreatetruecolor($_POST[‘width’],$_POST[‘height’]);

imagecopyresized($thumb,$image,0,0,$x1,$y1,$width,$height,$width,$height);
imagejpeg($thumb, null,100);

imagedestroy($image);
imagedestroy($thumb);

I love the interface. By far the best I have come across. But has anyone developed the basic version with PHP to load $image then output the cropped image result to a specified directory?

In post 117, at the line
imagejpeg($thumb, null,100);
just replace “null” with a path+filename

Awesome tool, but I was wondering…is there an easy way for me to clear the crop markers and the translucent overlay after I’ve finished doing what I need to do with the cropping?

Dear me, I just saw the demo and that there is already a way to remove the cropper. I swear I didn’t see that before!!!

Thanks much.

Using the PHP code from post 21 I changed:

imagecopyresampled($thumb, $big, 0, 0, $x1, $y1, $x2, $y2, $ow, $oh);
to
imagecopyresampled($thumb, $big, 0, 0, $x1, $y1, $x2, $y2, $x2, $y2);

A typical image crop results in an image with new content (the selection) and a new width/height (the width and height of the selection). The original PHP code would stretch the crop to be as large as the original image and acted more like a ‘zoom’ effect. Changing $ow to $x2 and $oh to $y2 will create the new images’ width/height based off the selection which is atleast what I was looking for.

Thanks for the great script, it was exactly what I was looking for.

Chad

Whoops:

imagecopyresampled($thumb, $big, 0, 0, $x1, $y1, $x2, $y2, $x2-$x1, $y2-$y1);

Hello.

First off, this is a GREAT piece of code, and I’ve already had great use for it. Many thanks!

I just have a few questions:

1) I’ve had some problems with Internet Explorer timing out on crop requests, but not with anything else on the site. Could this be a problem with the Javascript?

2) Is there a way to change the size of the crop area by putting/changing the values in text boxes, without refreshing the page?

Again, thanks.

Hi ,
Is it possible to have more than one cropper on a page?

Thank You

Mike

David—
Thanks so much for posting a tool that hundreds of people have shown a need for. That’s a very generous gift of your talent…

There seems to be a limit of 640×480 for the images to be manipulated. Larger than that the auto-highlight-within-shadow turns off (at least in Mozilla 2). Is that a scriptaculous limitation?
—John

Hi Dave, awesome work, it’s great in FF now.
I see the overflow: auto problem in IE is still there, what do you think might be causing that?
cheers

Lucas

Hi, can anyone provide me with the PHP code using this javascript GUI.. I saw the code here in PHP, but I don’t know how to implement it :D Like how do you past the variables from js to PHP?

email mastahswabe at gmail.com

DJ, just put form tags around those input fields from the cropper and put a submit button so that you can send them to the PHP page. After you get that working you can set them to hidden or whatever… Then for the PHP page use $_POST[‘var’], or $_GET[‘var’] for each of the variables depending on what method you chose for the form.

Thanks for the new version David!

Justin

E.X.C.E.L.L.E.N.T.
thank you very much for this awesome piece of work

I used the “good old”:

But it turned out that the lines below are very important for the cropper to work correct:

(my picture disappeared now and again)

Just a tip :-)

Ups, here are the lines:

“Bad”:
!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.0 Transitional//EN”

“Good”:
!DOCTYPE HTML PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”

Very cool, Thank you very much.

I was able to get this working easily with Rails.

that’s great!
script works perfectly but what about loading the page WITH MY coordinates of cropping box?

(i want to save a crop result for future demonstration when page is opened again)

thank you and wish a lot of success

seems like I’am dumb
no question at all ;)
thank you again

Awesome work Guys!!

I was wondering if there is a way to add snapping to the selection area. As in as the user selects the desired area, it snaps to either 10 pixel increments or some other predefined value.

again, awesome work. Best of the web as far as image tools I’ve seen.

I guess you have a small glych with roundings (ImgWithPreview).
Example.
I add image 800×600 and specify width 500px (to fit in page), and use JS – new Cropper.ImgWithPreview(‘testImage’, {
previewWrap: ‘previewWrap’,
minWidth: 175,
minHeight: 140,
ratioDim: {
x: 750,
y: 600},
onEndCrop: onEndCrop
});
(I need to resize with ratio 1.25)
Then I get new coords :

[x1] => 32
[y1] => 0
[x2] => 500
[y2] => 375
[w] => 468
[h] => 375
But actually x1 should be 31.25 or rounded to 31.
Besides this, preview area is displayed 187×140 but it should be 175×140

Hi. First of all, Great Work! People like you make the web easier.

About question #125, how can I put multiple croppers in the same page?

I’ve tested with two images, it works fine, except by the fact that one of them actually is not calling the callback function, which is the same for both images. Only the last image calls it.

Thank you.

Just made a quick function for PHP to crop a stored image and save it to a new path. Might be helpfull, hopefully!

Excellent!
here is my realisation in combination with ‘convert -crop’ from Imagemagick.
http://familientagebuch.de/rainer/2006/50.html#5
I looking for a solution to generate USEMAPS.

Rainer

for those who beside jpg also use PNG or gif this a modified version of some code posted here, this version overrides the original picture.

function CropImage($originalImage, $sizes, $imagetype) {
switch ( $imagetype) {
case “image/gif”:
$src = imageCreateFromGIF($originalImage);
break;
case “image/pjpeg” :
case “image/jpeg” :
$src = imageCreateFromJPEG($originalImage);
break;
case “image/x-PNG”:
case “image/png”:
$src = imageCreateFromPNG($originalImage);
break;
}

$newPath = $originalImage;
$thumbImage = imagecreatetruecolor($sizes[‘width’], $sizes[‘height’]); // create thumbnail image
@unlink($imagePath); // unlink destination image if possible

// perform crop (modified from code posted here, eg. this one doesn’t stretch the image)
imagecopyresampled($thumbImage, $src, 0, 0, $sizes[‘x1’], $sizes[‘y1’], $sizes[‘width’], $sizes[‘height’], $sizes[‘x2’]- $sizes[‘x1’], $sizes[‘y2’]- $sizes[‘y1’]);

imagedestroy($src); // destroy image resource
unlink($newPath);
if($imagetype "image/jpeg" || $imagetype “image/pjpeg”){
imagejpeg($thumbImage,$newPath,100);
}
if($imagetype "image/gif"){
imagegif($thumbImage,$newPath);
}
if($imagetype “image/png” || $imagetype == “image/x-PNG”){
imagepng($thumbImage,$newPath);
}

imagedestroy($thumbImage); // destroy thumbnail resource
}

Hi

Very nice cropper.
Is there a way I can make the crop area resize keeping the center of the area the same as the center of the image?

Thanks

Hi

Great script, but how do you reset/remove the crop tool?

What function should i call when i use a button onclick=”” ?

Best regards, Mikkel

here’s the PHP code, someone posted some half working code that distorted the images
this uses the castle demo image but will work with jpg or PNG.

cheers
-Adam

here’s the PHP code, someone posted some half working code that distorted the images
this uses the castle demo image but will work with jpg or PNG.

$x1 = $_POST[‘x1’];
$y1 = $_POST[‘y1’];
$x2 = $_POST[‘x2’];
$y2 = $_POST[‘y2’];
$width = $_POST[‘width’];
$height = $_POST[‘height’];

//this must be the same as our basic aspect ratio used on the javascript, modify the js and this to make that dynamic.
$thumb_width = 200;
$thumb_height = 120;

// define image filename
$image_filename = “jscripts/cropper/tests/castle.jpg”;

// find out original width / height
list($ow, $oh) = getimagesize($image_filename);

// setup orig photo
$big = imagecreatefromjpeg($image_filename);
// setup cropped photo
$thumb = imagecreatetruecolor($thumb_width,$thumb_height);
imagecopyresampled($thumb, $big, 0, 0, $x1, $y1, 200, 120, $width, $height);

$imgname = “test1a.jpg”;

// save image to disk
imagejpeg($thumb, ’../photo_album/’.$imgname,100);

// free up resources
imagedestroy($big);
imagedestroy($thumb);

(repost. apaprently the comment system doesn’t like PHP code…)

“31st May 2006 – 7:28 pm” you wrote:

“It is possible to apply a new cropper to a new image (or the same image but replaced) but there are a couple of errors that are related to the fact that the HTML that was added to the DOM for the cropper isn’t been removed.”

When I try to remove a cropper, and attach a new cropper to a new picture, it looks strange. What can I do?

Please help.

When I try to remove a cropper attached to a picture, and then attach a new cropper to the same picture, it looks funny. You can’t se the picture, only a grey box where the picture should be.

Everything else works as a charm :)

what to do??

Hi Dave.

I use the remove() function. Is it not the one to use?

The problem only occurs in IE 7. In Firefox there is no problem! The flow is as follows:

I execute the LoadCropper-function, and the cropper works fine. I execute the LoadCropper-function again and picture goes all white. If I click inside the white area where the picture should be, it turns grey.

The Code:

var CropObject = null;

function LoadCropper()
{
if( CropObject == null )
{
CropObject = new Cropper.Img( ‘target-img’, { onEndCrop: onEndCrop } );
}
else
{
CropObject.remove();
CropObject = null;
CropObject = new Cropper.Img( ‘target-img’, { onEndCrop: onEndCrop } );
}
}

I hope this helps.

Best regards Bjarke

Same problem as bjarke. Had it since 1.1. Works in FF, but not in IE6/7. The image loads, and then the cropper makes the image all white (like a non-transparent overlay). You can create a grey crop box.

I have the nearly the same problem as byarke and brian. If I directly call the cropper contstructor to create a cropper object, everything is working fine. Also in IE7. But if I set the constructor in a JavaScript-method and execute this method, the image is gettig white. It is also possible to crop a part out of the image, because alle the coordinates are working fine, but it’s a kind of difficult to crop out something of an image you can not see :)

I solved the problem, in my case. I had another div layer with a oppacity of 40% (IE filter:alpha(opacity=40)). Before I created the croper object, I changed the class of this div to a class with no oppacity. I think that the IE then set the global alpha filter value back to 100 and so all other, already loaded, style settings are been overwritten. I now created a overlay div with an opacity of 40%, but I only switch the whole visibility value between “visible” and “hidden”. Ik works fine in IE6, IE7 and Firefox2 now.

Like you, I couldn’t find a browser-based image editor when I needed one, so I ended up creating my own (http://www.ajaxprogrammer.com/?p=9).

I can’t wait to take a peek at your code :-)

Cheers,
Pete Frueh

Hi,

i found some cropper butthis one is great. I write some code to change the area dynamicaly via selectbox. If i select 200×200 (ratio) the croparea displayed on the image. If i select a second one (4:3), the new croparea displayed over the old one and the image goes darker.

How i can remove the old croparea?

here is some code ([ = ):
function onEndCrop( coords, dimensions ) {

$( ‘x1’ ).value = coords.x1;
$( ‘y1’ ).value = coords.y1;
$( ‘x2’ ).value = coords.x2;
$( ‘y2’ ).value = coords.y2;
$( ‘width’ ).value = dimensions.width;
$( ‘height’ ).value = dimensions.height;
}

function loadExample( type ) {

switch( type ) {
case( ‘200×200’ ) :
new Cropper.Img( ‘testImage’, { ratioDim: { x: 220, y: 200 }, minWidth: 220, minHeight: 200, displayOnInit: true, onEndCrop: onEndCrop } );
break;
case( ‘4:3’ ) :
new Cropper.Img( ‘testImage’, { ratioDim: { x: 220, y: 165 }, displayOnInit: true, onEndCrop: onEndCrop } );
break;
case( ‘basic’ ) :
default :
new Cropper.Img( ‘testImage’, { displayOnInit: true, onEndCrop: onEndCrop, onloadCoords: { x1: 10, y1: 10, x2: 250, y2: 100 } } );
}
}

[form action=”test.php” enctype=”multipart/form-data” method=”post” name=”form”][img src=”castle.jpg” alt=”testImage” id=”testImage” width=”800” height=”600”]
[input type=”hidden” name=”x1” id=”x1”]
[input type=”hidden” name=”y1” id=”y1”]
[input type=”hidden” name=”x2” id=”x2”]
[input type=”hidden” name=”y2” id=”y2”]
[input type=”hidden” name=”width” id=”width”]
[input type=”hidden” name=”height” id=”height”]
[select id=”type” name=”type” onchange=”loadExample( this.options[this.selectedIndex].value )”]
[option value=”—-” selected=”selected”]please select an ratio[/option]

[/select]
[input type=”submit” name=”submit” value=”cut it!”]
[/form]

The programs are very excellent.
I want to know abt moving the arrow keys over the image,in several .js files,in which file the movement of arrow keys have been mentioned.Thanks in advance.

Hi folks,

i changed my code but the croparea dosn’t change if i change the selectfield! Can someone check my syntax, please?

var CropImageManager = {
curCrop: null,

init: function() {
this.attachCropper2();
},

onChange: function( e ) {
this.attachCropper2( e );
},

attachCropper2: function( r ) {
if( this.curCrop null ) {
if( r “200×200fixed” ) {
this.curCrop = new Cropper.Img( ‘testImage’, { ratioDim: { x: 220, y: 200 }, minWidth: 220, minHeight: 200, maxWidth: 220, maxHeight: 200, displayOnInit: true, onEndCrop: onEndCrop } );
} else if( r "200x200" ) {
this.curCrop = new Cropper.Img( 'testImage', { ratioDim: { x: 220, y: 200 }, minWidth: 220, minHeight: 200, displayOnInit: true, onEndCrop: onEndCrop } );
} else if( r “4:3” ) {
this.curCrop = new Cropper.Img( ‘testImage’, { ratioDim: { x: 220, y: 165 }, displayOnInit: true, onEndCrop: onEndCrop } );
} else if( r == “16:9” ) {
this.curCrop = new Cropper.Img( ‘testImage’, { ratioDim: { x: 220, y: 124 }, displayOnInit: true, onEndCrop: onEndCrop } );
} else {
this.curCrop = new Cropper.Img( ‘testImage’, { displayOnInit: true, onEndCrop: onEndCrop, onloadCoords: { x1: 10, y1: 10, x2: 250, y2: 100 } } );
}
} else {
this.curCrop.reset();
}
}
};

function onEndCrop( coords, dimensions ) {
$( ‘x1’ ).value = coords.x1;
$( ‘y1’ ).value = coords.y1;
$( ‘x2’ ).value = coords.x2;
$( ‘y2’ ).value = coords.y2;
$( ‘width’ ).value = dimensions.width;
$( ‘height’ ).value = dimensions.height;
}

Event.observe( window, ‘load’, function() {
CropImageManager.init();
Event.observe( $(‘typ’), ‘change’, CropImageManager.onChange.bindAsEventListener( CropImageManager ), true );
} );

The selectfield has the id=typ name=typ!

This is an Excellent App, but I found a bug!

If you use the keypad to move the Boundbox, then onEndCrop is never executed unless you click on it afterwards

Nice! Is it possible to change aspect ratio, remove aspect ratio without reloading the page?

using this DocType in my HTML page
Drag Drop
Not work in firefox

After realisation of a cropper in combination with convert http://familientagebuch.de/rainer/2006/50.html#5 we now finished a creater of USEMAPs with this technique (http://familientagebuch.de/rainer/2006/51.html#4). In future we plan to crop a polygon from a picture.

Rainer

First of all I would like to thank you David for this awesome plugin.

Though this might help someone…
While trying to make some changes to this plugin I changed the loaded script to cropper.uncompressed.js, and noticed that suddenly the cropper wasn’t working. Took me some time to notice that on line 356 there is a regular expression which only matches “cropper.js”, so for developers you might want to change line 356 & 357 to:

if( s.src.match( /cropper(\.uncompressed)?\.js/ ) ) {

var path = s.src.replace( /cropper(\.uncompressed)?\.js(.*)?/, ‘’ );

this will match “cropper.js” & “cropper.uncompressed.js”, which would make the stylesheet cropper.css load properly.

and thanks again for this, saved me TONS of work!

Great app, truly amazing.. I’ve been modifying it to adapt to our specific needs. I’m actually building an interface to use this as a resizer instead of a cropper. So it loads up the image inside of the dotted line interface and when you resize it, the image resizes with it. It’s working well, but I have one question I can’t figure out so far. Is there a way to disable the user from being able to draw another resize box? That would break the flow of our interface. Should be easy if I know what I’m doing, but I can’t seem to figure it out..

– Matt

The problem only occurs in IE 7. In Firefox there is no problem! The flow is as follows:

I execute the LoadCropper-function, and the cropper works fine. I execute the LoadCropper-function again and picture goes all white. If I click inside the white area where the picture should be, it turns grey.

The Code:

var CropObject = null;

function LoadCropper()
{
if( CropObject == null )
{
CropObject = new Cropper.Img( ‘target-img’, { onEndCrop: onEndCrop } );
}
else
{
CropObject.remove();
CropObject = null;
CropObject = new Cropper.Img( ‘target-img’, { onEndCrop: onEndCrop } );
}
}

I hope this helps.

Best regards Bjarke

hello!

is there an way to have two or more Previews (ImgWithPreview) (differnt skalings/sizes) of one crop?

Hi Dave, everyone.. I’ve completed a proof of concept for my work. I made some additions to the cropper.js that may very well be useful to some people. First, an overview of what our app needed..

We needed an interface to upload a larger photo (gt or equal to 640×480), choose an area of the photo to scale down to 400×300 (could be the entire image uncropped), then take a selection of that scaled down image to make a thumbnail. That thumbnail has certain restrictions on it, and we needed more flexibility in the preview pane, so I had to add some things to the code…

• We don’t want the user to be able to redraw the selection area. Many of our users don’t know how to use photoshop or similar programs, which is why we created this interface. And they might be confused if they can redraw the crop box. (new feature)
• It can’t be smaller than 120×120 (already natively supported by jsCropperUI)
• It can’t be wider than it is tall (meaning a maximum ratio of 1:1 – new feature)
• It can’t have an aspect ratio of less than 2:3 (new feature)
• The preview pane can’t be limited in width and height, it needs to be fluid to adjust to the size of the current crop area (new feature)

• The preview pane has a fixed width to reflect the actual thumbnail size (new feature)

  So, I disabled the listener on the drag pane, per Dave’s suggestion (thanks Dave). And I added some config options as outlined below:

• disableCropPreview (boolean) – Only useful when displayOnInit is true
• minimumRatioDim and maximumRatioDim (obj, x and y coords)

• previewWidth (int) – the fixed width of the preview pane

  You can see a demo here:

  http://gattomatto.net/work/jsCropperUI/

  This demo includes backend PHP code that does the cropping and redisplays the cropped images. View the source to find the location of cropper.js which I modified to support these features.

  Feel free to copy this file and offer any feedback on this. As this will be an important part of the code library on our site, I welcome critiques to make the code better.

  – Matt

Made a mistake on my last post..

“disableCropPreview (boolean) – Only useful when displayOnInit is true”

should read:

“disableCropRedraw (boolean) – Only useful when displayOnInit is true”

Hello,

I work with the cropper. I want crop mutilple pictures on one page. Support the cropper that? On the Bug/Featurelist I found following entry:

00015 – Test with multiple croppers (see comment by Luis Bolson)
Where can I find the comment from Luis Bolson?

Thanks for help

Great work Dave, brilliant. I have a little bug that I just cant figure out.

If i set minwidth/height or set displayoninit when i have set ratioDim then I get a black image and just the selection is 0 opacity but i get 50% opacity along the X-Axis. Basically anything above or below the selection is black.

I am using IE7 and the code I am using is virtually identical to your examples.

Found an issue that I can reproduce on your imagepreview samples. If you turn off “displayOnInit: true, ” then the preview never appears.

I fixed most of my issues by removing all the tables, so the div for the image editing is on its own inside the body tag. If its any table cells it just doesnt work right and there are loads of different issues (white with grey, black, nothing appearing etc).

Hi.

Great app! Is there a way that when you hit Enter the crop will take place?

Or indeed (like graphic apps), getting a callback when the crop is double-clicked so we can perform a server crop function.

I totally understand Dave. It was the first thing I tried when i used it, I just expected a double-click to do my crop because thats what all gfx programs do. Its not necessary or highly important, but it is the norm.

Only other posters could verify the importance of such a feature.

Thanks again Dave

HI,

Ive been having a hell of a time trying to get the cropper to work. I have literally copied and pasted the Cropper Demo page an I have had no success making it work.

If anyone could have a look at it I would really appreciate it.

http://lloveras.org/cropper/test.html

Any one have an idea why it doesnt work?

Hi,

great work first of all :-)

Would be cool to have an zooming function like here:
http://mypictr.com/

Bye,
Bjoern

Great work.

I’m having one issue that I’ve reproduced in Firefox, Safari and IE:
Everything works great, except when I’ve created a crop rectangle, then try to move the selected area by clicking and dragging. It just reselects another area. Any hints?

Hya,

Just wondered if you’d got anywhere with the overflow issue, or if you’ve got any ideas why and i’ll dig around and see if i can fix it.

Thanks

Dave

I just wanted to say thanks!

Anyway to give the grab boxes some more grab-space? It requires a lot of mouse control when they’re that small.

Dave

tap dances gleefully

ok, the IE/Opera overflow bug….FIX!!!

such a pain in the arse to find, so simple a fix. You need to add ‘position:relative’ to the image container.

I’ve tested this in the latest version if IE/Firefox/Opera and it works a treat. I thought about having cropper.js do it onLoad, but wasn’t sure if you wanted to mess with the container as its a user defined element.

Anyhow, I didn’t say before, so I’ll say it now, excellent script :).

Also, I’ve written an asp.net backend cropper if anyone wants an alternative to the PHP ones out there.

Thanks Muchly

Dave

Hey! It’s a really cool cropper. It was surprise for me to knew about that tool cause I did somthing like on http://marqueetool.net
Dave, may be we will cooperate and will create some more powerfull cropper (marquee) or something else? ;)

Regards, Sergey Koksharov

i have a problem with it when i use it in layers, “advanced layer popup” to be exact. http://www.dmxzone.com/ShowDetail.asp?NewsId=12769

when the crop script is put in the layer popup and run from there, when you go and crop the image in internet explorer 6 or 7 the crop area i like an xray and puts a hole through the layers to the page underneath. anyone give me any advice on how to correct this problem?
the demo above works fine, just when you combine the cropper and popup layer is where the problem starts with the xray.

Fulld etails are here in this thread on this forum below.
can anyone help me out here??

http://phpbuilder.com/board/showthread.php?t=10337256

When using the preview, if you dynamically change the image source, the preview is not updated. This may sound like a rare event, but in my case I run graphical filters on demand and wrap the img src on complete.

I added a method that resets the preview. For anyone in need, here’s all it takes:

resetPreview: function() {
this.subInitialize();
this.subDrawArea();
}

Hi,
I want to use a fix size rectangle:
displayOnInit: true,
minWidth: 120,
minHeight: 120,
maxWidth: 120,
maxHeight: 120,
onEndCrop: onEndCrop

But I can resize the rectangle. The min works but not the max.

Can someone help me, please?

Regards
Chris

Can anyone give example on how to use “onloadCoords” for the coordinates of the select area to display onload?

Thanks.
Riya

Ok I need help here. I need to figure out how to save the preview thumbnail to a file. I have the cropper working using a dynamic source and I need to be able to save the area selected to a jpg. I know this cropper is just the UI but I need to understand how to past the information to a PHP script to do something like imagecreate( ). I’m not very good with JS. So if someone could help that would be great.

Thanks

Okay, so this is nice. Once you have the area you want cropped on an image located in your server directory, how do you actually crop it and resize it to that. Say I want to resize it to whatever the preview looks like and resave that image file.

I guess I’m with Craig on this one. Also, is there a way to crop the image first without actually uploading it to the server and then save the preview thumbnail as an image to the server once submitted?

I’m using the dojo toolkit and want to try Image Cropper on the same page.
It seems that these two libraries don’t work together…
(conflict between IC classes and dojo.io.IframeIO)
Anyone knows how to solve this issue ?

Thx !!

I found my answer through a previous post.

Thanks Adam B! Check out post #147.

I modified it a little bit for what I wanted, but this was just what I needed.

I’m having problems with IE.
I set my Event observe like this:

Event.observe(
‘testImage’,
‘click’,
function() {
new Cropper.Img(‘testImage’,{
minWidth: 10,
minHeight: 332,
onEndCrop: onEndCrop

});
});
So, when I click on the image (that have ID=”testImage”), crop works normally, but the image get blank. I can do everything that Cropper demos show, but the image is now a “white retangle”.

I noticed this bug just in IE… Firefox works perfectlly. What it can be?

Thanks!

By the way… the problem I reportted is for IE 7

Yes, It is inside a table. I tested without table, just the img tag and it works. Is there a way to fix it? Because I won’t be able to modify the page structure.

Thanks for the “on-the-fly” answer and congrats for this app.

i have a problem with it when i use it in layers, “advanced layer popup” to be exact. http://www.dmxzone.com/ShowDetail.asp?NewsId=12769

when the crop script is put in the layer popup and run from there, when you go and crop the image in internet explorer 6 or 7 the crop area i like an xray and puts a hole through the layers to the page underneath. anyone give me any advice on how to correct this problem?
the demo above works fine, just when you combine the cropper and popup layer is where the problem starts with the xray.

Full details are here in this thread on this forum below.
can anyone help me out here??

http://phpbuilder.com/board/showthread.php?t=10337256

Thank you for this amazing tool!

I have a couple of questions/problems about it.
1. I would like to crop again the same image (without using the remove() and reset() methods), but it seems it doesn’t work in IE7 (you can move the handles, but it doesn’t update coordinates). If I use either the remove() or reset() methods, I get an error, but the line of code indicated doesn’t exist. In FF works without a problem in both cases.
2. I would like to crop a new image, but the cropper still shows the previous one (although when the crop is made, it’s a piece of the new image).

I’m using the ImgWithPreview and a couple of functions to show and hide the div when called. I have an iframe which passes the URL of the image loaded to the showDiv function, and when the user presses the submit button for cropping the image, the hideDiv function passes the coordinates to the iframe which performs the cropping in PHP and shows the result in the iframe.

Thank you in advance for your help.

Gret tool, I have it doing almost everything I want. Combining it with imageCFC I can upload, crop and rotate the image.
But one other feature I need is that if a user uploads a big image, I need to resize it for display purposes only so it fits on the screen, but crop the true image.
So if for example they uploaded an image of 800×600, I would set the img display height and width as 400×300, but I need the crop to occur on the real dimensions of the image not the dimensions that they select on the page.

Any suggestions ?

Any reason why the uncompressed version doesn’t work? (the compressed version works [almost] fine for me .. but the compressed version doesn’t seem to work at all).

In my (german) example at http://familientagebuch.de/rainer/2006/50.html#5 is left a thumbnail and the imagemagick convert tools cut from the original size.
It is very easy and similar to http://familientagebuch.de/rainer/2007/09.html#i95

Best regards
Rainer from Hamburg/Germany

First of all: great work! I’ve seen quite a few image-cropping utilities but your solution is really nice (and doesn’t hurt my eyes).
What do you think of this feature: update the dimension/position info on Drag? So we could have a live update of how big our Croparea is and where it is (like in photoshop). That would really help.
[sorry, but english is not my first language]

I think you already heard this many thimes, but here’s one more time: GREAT WORK!

I tried to integrate your script in a netbeans Visual Web Pack project. There where two problems I faced, here are the solutions:

1. The scripts have to be included in the following way(i think this is true for all VWP projects):
var fake=null;
var fake=null;
var fake=null;

2. You should use a plain GraphicImage component, and put it into a GroupPanel. Other ways the selection box won’t appear, or there could be problems with the position. If you put it into another type of panel then it’s the same bug what fialik wrote about.

It seems that the code did’t appear right
so it was:
script src=”cropper/lib/prototype.js” type=”text/javascript”>var fake=null;

I am using crop with preview, but it appears the preview size is tied to the minWidth and minHeight of the crop. This is a shame, I cant have a large preview and a small minimum size which seems very strange.

Can you change it so that there is a specific previewWidth and previewHeight that we can set externally and still be able to have a smaller crop area.

Thanks

It would be very nice if you could nudge the ‘size’ of the crop as well as the position. Something like:
CTRL+LEFT will make it smaller width
CTRL+SHIFT+LEFT will make it smaller width in bigger jump
CTRL+RIGHT will make it larger width
CTRL+SHIFT+RIGHT will make it larger width in bigger jump

CTRL+UP will make it smaller height
CTRL+SHIFT+UP will make it smaller height in bigger jump
CTRL+DOWN will make it larger height
CTRL+SHIFT+DOWN will make it larger height in bigger jump

Basically you are moving the right edge or the bottom edge.

Is this code is used for crop a some portion of site?

I’m testing the component but I have a problem.
The image is displayed in an IFRAME. I added the code to the page that is displayed in the IFRAME. But nothing happends when I click on the image.

What’s wrong ?

For a given image I have used
//zoomWidth: Final image width after applying zoom(in/out)
//zoomHeight: Final image height after applying zoom(in/out)
//x1,y1, cropWidth and cropHeight are same as x1, y1 , w & h in above example

image = ScaleToFixedSize(image, zoomWidth, zoomHeight);
image = Crop(image, x1,y1,cropWidth,cropHeight);

private Image ScaleToFixedSize(Image imgPhoto, int Width, int Height)

{
int sourceWidth = imgPhoto.Width;
int sourceHeight = imgPhoto.Height;
int sourceX = 0;
int sourceY = 0;
int destX = 0;
int destY = 0;

float nPercent = 0;
float nPercentW = 0;
float nPercentH = 0;

nPercentW = ((float)Width / (float)sourceWidth);
nPercentH = ((float)Height / (float)sourceHeight);

//if we have to pad the height pad both the top and the bottom
//with the difference between the scaled height and the desired height
if (nPercentH

I implemented the cropper but found a few problems :

1. After using the arrows to move the crop area, the callback function OnEndCrop is not called. How to display the coordinates after each move with the arrows ?

2. When displaying an initial crop area on the image (onload), the arrow keys do not work. We first have to move the area a bit to make the arrows work.

Dave

Hi,

Can I save the cropped image using code ????

For the problem in post 223(“2. When displaying an initial crop area on the image (onload), the arrow keys do not work. We first have to move the area a bit to make the arrows work.”) additionally: – if the ratio is set and the image is in the initial state, if the side of the image is dragged to the right, or up, the selection box jumps out of the image. If the image is moved a little then there are no problems. This seems to be some initialization problem, so isn’t there a way to set the fields of the image crop after the instantiation to simulate an image move without explicitely having to move the image by hand?

Thanks!

Event.observe( window, ‘load’, function() {.......

show white overlay on some Internet Explorer 6, even after updating windows,

any suggestion

http://www2.zhuatu.com/crop/1.htm

test2 error
help me

两个测试，试一下，可以发现，测试一没问题。因为图片不大。

但，测试二，问题来了。大图片，我虽然按比例缩小显示了，但裁减的时候，其实还是在原大小上裁减。所以造成定位不准。

我呼唤高手，怎样做到，让大图缩小显示，裁减的位置也是在缩小的图上进行的。

good job !
thanks !

这几天一直在做这个，终于可以实际应用了：

http://www2.zhuatu.com/crop/index.asp?testImage=2.jpg

只是还有几个问题，一直无法解决：

1、图片放大缩小后，那个透明层没有随之放大缩小。找不到解药。
2、图片下那几个文本框，无法直接填数字。怎样改成直接填数字也可以？
3、裁减后为什么只能另存为bmp？我想另存为jpg。

pls improve:
add the function of zoom in/out,
input data directly to textfield

It doesn’t seem to work with Scriptaculous 1.6.5. Can anyone confirm?

AMAZÄ°NG!!!!

i would like to use the selected image on a new image in order to zoom the selected image some ideas pls
to use in a state map
how to use the selected image as a new image
and how to avoid the darkening of the image is there an option fej same color and a rectangle with border to select
thanks

I like your updates! They are very useful. Thanks.

Hi all
I have problem with IE 6. I can’t load the page. The problem is with scriptoculous.js file. This script writes to the output only libraries given as script params and ended. :/ There is no following page code. When I am removing this file from code, all page is loaded. Under firefox 1.5 there is no problem Thanks for any help

hi
I have found the solution. I am including all needed .js files directly, without using scriptaculous.js.

and I am moving onEndDrop function from .html file to other .js file which is included to HTML file

that’s solved problem with using tools at IE 6.

Wow! This script is something! Thank you so much for seeing the effort.

... But I also have a small problem, as I’m not that much of a javaScript developer. All of the test HTML scripts work just fine, but when I include the script to my site, it works quite randomly. So of course I’m a bit confused ‘cos I’ve ran out of knowledge here. I’m building a feature that users can upload an image if they want and its resized on the server side. Later on they can crop the image (just as an extra feature) on their browser. So the image data is read from a database blob, user can define the crop area on their browser and then the co-ordinates are sent to server and voila! If I’ve understood correctly, that Event.observe(‘load’ ...) should take care that the page and the image is loaded before the script is run. But I think 4 times out of five I’ll get 2 errors. a) Draggable is not defined (line19/cropper.js) and new Cropper.Img has no properties (on the HTML page). So it seems to me that the script is run before the image is loaded. Can someone give me a gentle push towards how to solve this problem? Like I wrote, I’m bit confused since sometimes the script works and sometimes it doesn’t… Tried all of the trick I know, but of course that is not a lot :)

But keep up the good work! This script is really something!!

hmm I am seeing that code was removed from my last post Sammy I had the same problem under IE 6 My solution does not use scriptocoluos.js I am inluding all scripts directly into page
src=”/mim/wspolne/.js/cropper/lib/prototype.js” defer=”defer”>
src=”/mim/wspolne/.js/cropper/lib/builder.js” defer=”defer”>
src=”/mim/wspolne/.js/cropper/lib/dragdrop.js” defer=”defer”>
src=”/mim/wspolne/.js/cropper/cropper.js” defer=”defer”>
src=”/mim/wspolne/.js/cropper/onEndCrop_function.js” defer=”defer”>
The order is important.
The last one file consist of my implementation of onEndCrop and code used for creating Cropper object. I hope it helps :)

I have just downloaded ther cropper and it is great. just wondered if there is any way to change the ratio of the selection box, after the cropper has been initiated? IE, i have a selection box with different ratios in, and i need it to change without a page reload.

Many Thanks.

still waiting for a reply, been months now. If you dont have any idea, just say so, come on. IM not going to give up until i get an answer, IM not like that. IM persistent.

i have a problem with it when i use it in layers, “advanced layer popup” http://www.dmxzone.com/ShowDetail.asp?NewsId=12769 or advanced DHTML popup http://www.dpopup.com or any other layer for that matter.

when the crop script is put in the layer popup and run from there, when you go and crop the image in internet explorer 6 or 7 the crop area i like an xray and puts a hole through the layers to the page underneath. anyone give me any advice on how to correct this problem?
the demo above on this website works fine, just when you combine the cropper and popup layer is where the problem starts with the xray.

Full details are here in this thread on this forum below.
can anyone help me out here??

http://phpbuilder.com/board/showthread.php?t=10337256

This demo looks really cool, and I was able to get it to run without a problem on my server. My only question is once the image has the crop marks set.. then what? How do you save that cropped image, or pass the information on? Am I missing something? I guess I am looking for a button that says “Crop Complete” or something, and when that is pressed, the image is saved in cropped form, and you move on to the next screen… is that possible?

Thanks!

Joe,

You use the callback mechanism. See the references to “onEndCrop” above. The callback mechanism will call some javascript code that you write. Mine sets a couple of hidden variables and then submits the whole page, then on the server side I process the actual cropping using the values from the hidden fields. There is no reason that you couldn’t do this in an AJAX way though. Hope that helps.

Cheers,
Dave

Love this cropping code, very very good stuff.

I’m utilising the previewWrap, but I’d like to set it to a specific size, not the minWidth and minHeight.

The reason: the actual picture that will be cropped on the server side is much larger than the one that I’m displaying, so I apply a ratio to the crop dimensions that I receive from your cropping code.

e.g. say the real image is a 1000 pixel square, I might display a 250 pixel square in the browser, giving a ratio of 4. So the dimensions and initial position I receive on the server must be multiplied by 4 before the real cropping takes place. Since everything is multiplied by 4, the minWidth and minHeight are only a quarter of what the real values will be will be, thus the previewWrap image is VERY small (too small to be useful). I’d like to manually set it to a different size.

I tried to modify the code myself, by changing all references in the preview specific code to use my static size rather than minWidth and minHeight. This was partially successful, but seemed to mess with the overflow a little.

Any ideas on which bits I should change to get it to work?

Cheers,
Dave

Thanks so much for this tool, it is really coming in handy. I am using it specifically as an admin tool to create flickr like tooltip-hotspots for photos in a photo gallery, in conjuction with JQuery. This tool makes it very easy!

However! One effect I’m trying to accomplish is to have the tooltip-hotspots that are already made to show up as dashed outlines within the image that the cropper is attached to. I’m doing this so that I can see where each hotspot will overlap as I create new ones. My problem is, that when I click on the image to use the cropper, my outlined hotspots disappear. They are generated divs that are attached dynamically using JQuery, and I have followed their instructions to make sure that JQuery is not clashing with the other libraries.

Is there a reason why the cropper tool would remove other divs? and is it possible to keep that from happening?

i am a software Engineer in m n c.i want to search How to move any picture in safari browser.
thanx and regard
Arvind Kumar

well done arvind kumar, you do that. Nice comment.

Hi.
I just have to say I love this cropper utility, and I’d like to use it in my own little image editor tool on the CMS I’m currently working on. You don’t seem to mention details about the license for this code. Is it allowed to use it in commercial applications?
Other than that, I’m wondering about the same thing as Dave Bolton (a few comments back).

Cheers

Dave,
when an image is uploaded, if it exceeds my maxwidth, I create a resized working copy setting this to the maxwidth and work out the ratio. This working image is what I use in the cropper, so the minWidth and minHeight still work fine.
You don’t want to resize the big image inside the cropper, this just doesn’t work right, and also means that the big image has to be submitted each time.

Hey Russ. Thanks for the response. I wasn’t clear enough, but I actually do exactly the same thing. I use a smaller working copy, and calculate the ratio.

minWidth and minHeight actually DO work fine… BUT if my final crop size is 100×100 (after applying ratio), and my working image is a ratio of 5 times smaller, then the minWidth and minHeight are only 20px, which is perfect for the actual crop box on the working image, but not perfect for the preview size.

e.g.
Original: 1000×1000, Min crop on original: 100×100
Working Image: 250×250, Min. crop on working image: 25×25 (maintains ratio)
leads to => Preview size: 25×25

So I’m happy with the way minWidth and minHeight work, I’m happy with using a working image so I’m not cropping an enormous image file, I’m just trying to find a way to have a reasonable size preview (say 100×100 in example). I realise this could mean a bit of pixelation in the previewWrap, but I’m okay with that.

very good demo,thank you very much,but i meet a question,i want to use your demo in asp.net ,but when i put the demo code into .aspx pages,it always tip “Envent,undifine” i used your js files,but i can’t compile through

no problem ,i lose the cropper.js file,i make a mistake,sorry,very thank you

Well done, it’s a really useful tool, great idea using 4 surrounding divs to mimic overlay, great coding.

Only one thing, I noticed a bug, when a body’s CSS direction selector set to rtl, the select rectangle gets whacky, the solution to this problem is to force the container of the crop tool to have direction: ltr; set, works great that way.

cheers, Max.

awesome code!!

I have a simple question. How do you create that transparency effect? For example, lets say I have an image in a div, and I put an absolute div ontop of it, how do you black out the rest of the image and only keep the full opacity of the nested div?

Do you have to calculate it on the fly? Or do you layer 2 images or something?

Very useful! One problem though – Konqueror doesn’t handle transparency and without transparency the image isn’t visible at all. A simple fix for this is to change the CSS to use a transparent tinted PNG in the presence of Konq/KHTML. You can also make the transparent PNG @ http://apps.everamber.com/alpha/ to save yourself sometime. :)

Good work !!!!

I’ve been working with cropper on a multi-lingual site that supports bidirectional layouts. In other words, some languages display from left to right and others from right to left.

Cropper has a problem on right to left pages where it draws the “west” overlay over the “east” overlay. You can see a demonstration of this problem if you go to to your castle demo and simply add style attribute to your body tag. Set it to style=”direction: rtl;” and watch the overlays.

I’ve solved the problem, but I’m not 100% sure it’s the correct solution.

In the drawArea() function, I’ve added the line
_4b.left=0;
after the line
_4b.height=_45³;

So now _4b reads like this:
var _4b=this.west.style;
_4b.top=_45¹;
_4b.height=_45³;
_4b.left=0;
_4b.width=_45⁰;

It works in IE 7 and FF (most recent) in rtl and ltr. I haven’t checked other browsers.

Hi!

Your code is working well with one exception:

When I put an upload form and a dynamic crop preview into the same window, IE7 does not support the code and won’t open the file upload browsee window.

Does anyone know what it is about?

Thx

Rupert

Is it possible to use imgPreview and onloadCoords at the same time? I doesent get it to work..

Thanks for a nice tool!!
Niklas

Hi Dave,

Been enjoying the cropper script for a while now, until recently where someone decided to try and use my stuff with IE7. All simple tests seemed to go smooth, but I keep on bumping into a strange problem now, where the drawArea function can’t be executed, because the areaWidth can’t be properly calculated, because in turn, this.img.width yields a value of 0. By adding a couple of alert()s here in there, the width can in some cases be “retrieved”. It seems as if, when moving the original img element inside the generated wrapper element, the image was reloaded by IE. That’s my only clue, because it is vaguely possible that this specific loading might be somewhat slow-ish. Removing the alert()s or move them around randomly re-causes the problem. Whatever the case, img.complete always returned true, which seem to contradict my suspicions… but then again, I’d never heard of .complete before, and am a bit doubtful about the two last line of the initialize method: I expected that only leaving the else clause’s content would still be working, maybe slightly slower, but it just doesn’t ?

If you had any ideas I could follow, I’d try some more debugging, but it’s pretty much a pita with IE, some I’ll give up at least for tonight.

Well, my guesses turned out completely wrong, and I was under the influence of a badly formed table (yuk) with an unexpected table-layout:fixed… works like a charm now. sorry for the noise.

excellent library.thank you.

This is one beautiful piece of script. I was looking for the functionality to then save the thumbnail as a separate file, any thing I missed with that, or just not implemented yet?

Found a bug, where by if you try and crop an image which is already smaller than the minimum size, the resize option would not display the image.

Changing and adding the following fixed the problem in resize_image.php

if($cropWidth

if($cropWidth < = 0) { $cropWidth = $imageWidth; }

if($cropHeight <= 0) { $cropHeight = $imageHeight; }
if($cropX < 0) $cropX = 0;
if($cropY < 0) $cropY = 0;

Nice JS, Dave.
I’m just wondering how easy to change your library to support multiple crop areas on one single image.

Conceptually, I think I need change selArea property on Cropper.Img object to an array of selArea, and a activeArea to reference to the currently selected selArea. When a new drag action is taken, add current selArea if any to the selArea array, create a new selArea and point activeArea to the new selArea. A new style needs to be added for the deactivated selAreas

Is that right? I’m not a JS expert, could you point the direction to me?

Thanks

@Frank : out of the blue and not having tried myself, my first guess would be not to patch this script but rather keep an array of Cropper.Img instances in yours.

@greg , is Cropper.Img the whole image to crop or the the cropped area for the whole image? I thought it should be the whole image since it takes the whole image’s id as one the its constructor parameters. But the Cropper.Img.selArea is the cropped area. Am I right?

A nice simple feature would be to have a “bull’s eye” or something of the sort that is centered in the crop area. Something like when you’re cropping in photoshop.

Thanks.

This script works well in firefox, but in IE6 and IE7 it does not load the thumbnail correctly to crop. So instead it loads a black jpg for the thumbnail. Has anyone else had this situation?

Anybody got this to work on top of Google Maps?

has anyone similar script that uses jquery?

I love this tool, but was wondering if you plan to update it so that it will work with the latest prototype/scriptaculous releases? The cropper doesn’t seem to work with prototype 1.5.1 and scriptaculous v1.7.1_beta3.

I second that, it would be great to have an update with
prototype 1.5.1.1 and scriptaculous v1.7.1_beta3, which dont currently work with cropper.

so dave, you got the code you can share with us how you added this effects module?? be good to get that.

I think Dave means he just had to include the effects.js scriptaculous file – rather than just calling src=”../lib/scriptaculous.js?load=builder,dragdrop” he added the effects.js also.

I was able to get it working just fine on the latest release (prototype 1.5.1 and scriptaculous v1.7.1_beta3)... I had a bug in my code. I did run into some problems on Safari though.

Maybe someone can help me:
Due to the way my cropper is getting created (returned from an Ajax call) I decided to just call new Cropper.Img(...); rather than using the Event.observe(...); method as used in the examples. This seemed to work just fine in all browsers except in Safari. Any ideas? I have instead had to create the function myself and call it directly

beginCropper = function(){
new Cropper.Img(...); and then wrote an onclick method to activate the beginCropper method. Any ideas how to get around this limitation? Am I doing something wrong? I can’t seem to use the Event.observer() method and get the cropper to instantiate when being returned from an Ajax call (meaning the JS is returned from the Ajax call and I’m evaluating with the evalScripts: true attribute in the the Ajax.Updater() method. Thanks, and sorry for the confusion earlier… very nice tool Dave!

Hello,
I have a problem with it: I’m using the package from above, that means prototype 1.5 and scriptalicious 1.6 or sth like that …
everythings working fine except showing the preview of the cropped image. I’m displaying the image that has to be cropped via

Is this the problem? I cannot use since the image is in an htaccess protected directory and so I have to read it out via a PHP script, that sends also the right image header … so it shouldn’t be the problem but I dunno …

My whole code:

// setup the callback function
function onEndCrop( coords, dimensions ) {
$( ‘x1’ ).value = coords.x1;
$( ‘y1’ ).value = coords.y1;
$( ‘x2’ ).value = coords.x2;
$( ‘y2’ ).value = coords.y2;
$( ‘width’ ).value = dimensions.width;
$( ‘height’ ).value = dimensions.height;
}
Event.observe(window, ‘load’, function() {
new Cropper.Img(
‘testImage’,
{
displayOnInit: true,
previewWrap: ‘previewWrap’,
minWidth: 120,

minHeight: 120,
ratioDim: { x: 120, y: 120 },
onEndCrop: onEndCrop
}
);
} );

Hi, your script is very close to what IM looking for, with a slight modification, is it possible to use your crop preview window to move the image about?

I want users to upload images, which will then be created into thumbnails of a set size. I’d love to use your preview window so they can for example center it on their faces, can this be done only using the crop preview window?

Thanks, Luke

Q: how to implement zoom for example 2x, 3x on the preview image?

great work!!!

i am using cropper.js with ajax form. after submition of form it gives me error like
$(“x1”) has no properties
onEndCrop(Object x1=150 y1=107×2=350 y2=227, Object width=200 height=120)prototype.js (line 182)
endCrop()cropper.js (line 535)
bindAsEventListener(mouseup clientX=0, clientY=0)prototype.js (line 55)
[Break on this error] escapeHTML: function() {

i m not getting where i m going wrong

Hello,
I just have a quick question – I seen this application being used by another site so I figured I would look into where it came from – I seen it being used for http://www.bandzoogle.com

Anyways – what my question is – and I downloaded and played around with the demo – forced a static size and moved it around etc –

What my question is – how do you spit out the results of the croped image to a new file? in none of the preview example pages do I see where it spits it out. Is this something I have to program in myself – I use Cold Fusion – does anyone have some ready made code that will spit out the selected croped image?/

Thanks very much for your consideration – and again very cool!

Jamie

Hello Jamie,

Yes, you’ll need to do the cropping on the application server. I also use CF and I use Efflaire’s CFX_ImageCR3 which is an amazing CFX tag and located at http://efflare.com/ It is really fast and offers amazing quality and will do pretty much anything you want it to do.

It makes image manipulation really easy. So, just assign the values returned from cropper (which are set to hidden form variables) and post to your page which will crop the image. CFX_ImageCR3 makes is really easy to crop. Hostmysite.com offers this CFX tag as part of its ColdFusion hosting plan, but I believe CF8 will offer image manipulation natively.

Hope this helps,

Westy

Hello!
Thanks very much – Do you happen to have a Free Download link of the Full version – Just to try it of course!

Sorry, I don’t. But I can say with utmost confidence that it is simple to use and one of the best image manipulation tools around.

javascript function gets called thrice on “onClick” event of a Button. Only if I click the unselected area of a button. If I click any where in the selected area of Button the function is working fine, it gets exected only once.

Please someone help.. :)

I want to use this image cropper, but my language is Asp. But I am newbie, and It will take a long time to understand it. if someone could help me with the backend code for doing the cropping?
you can write to me at. biip19@hotmail.com

Nice tool, it works fine in an standard HTML or ASP.NET aspx Site.
I’ve a problem, when the page is ajax-supportet. After I update a part of the site, the image visible or image-URL for example, with an ajax HTMLRequest, you can’t select the image to set the cropperframe or can do anything else with the image.
As workaroung, i’ll be send a postback and refresh the complete-site. But this is not what I want on an regular ajax-supported page. ;-)

Have someone a tip?

Sorry, I’ve forgot an eMail-Adress for an answer: dbar.master@googlemail.com

Nice tool, it works fine in an standard HTML or ASP.NET aspx Site.
I’ve a problem, when the page is ajax-supportet. After I update a part of the site, the image visible or image-URL for example, with an ajax HTMLRequest, you can’t select the image to set the cropperframe or can do anything else with the image.
As workaroung, i’ll be send a postback and refresh the complete-site. But this is not what I want on an regular ajax-supported page. ;-)

Have someone a tip?

I found a bug with the cropper that happens when ratioDim and minWidth and minHeight are set, and the user holds down the shift key while resizing. Once the crop area gets to the minimum size (while obeying the ratio) it will start to resize down to a square.

Here is the fix:

Line 799 of cropper.uncompressed.js should change from:
if( (mins⁰ != 0 || mins¹ != 0) && square ) {

to

if( (mins⁰ != 0 || mins¹ != 0) && square && this.ratioX 0 ) {

Line 296 of cropper.js needs to be changed from:

if((_27^{<a href="#fn0">0</a>}!=0||_27^{<a href="#fn1">1</a>}!=0)&&_22){

to

if((_27^{<a href="#fn0">0</a>}!=0||_27^{<a href="#fn1">1</a>}!=0)&&_22&&this.ratioX0){

Thanks for the wonderful tool!

Well, textile appears to love JS. Here is my last post again:

I found a bug with the cropper that happens when ratioDim and minWidth and minHeight are set, and the user holds down the shift key while resizing. Once the crop area gets to the minimum size (while obeying the ratio) it will start to resize down to a square.

Here is the fix:

Line 799 of cropper.uncompressed.js should change from:

to

Line 296 of cropper.js needs to be changed from:

<div class="igBar"><span id="ljavascript-18"><a href="#" onclick="javascript:showPlainTxt('javascript-18'); return false;">Display code as plain text</a></span></div><div class="syntax_hilite"><span class="langName">JavaScript:</span><br /><div id="javascript-18">
<div class="javascript"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #000066; font-weight: bold;">if</span><span style="color: #66cc66;">(</span><span style="color: #66cc66;">(</span>_27<span style="color: #66cc66;">[</span><span style="color: #CC0000;color:#800000;">0</span><span style="color: #66cc66;">]</span>!=<span style="color: #CC0000;color:#800000;">0</span>||_27<span style="color: #66cc66;">[</span><span style="color: #CC0000;color:#800000;">1</span><span style="color: #66cc66;">]</span>!=<span style="color: #CC0000;color:#800000;">0</span><span style="color: #66cc66;">)</span>&amp;&amp;_22<span style="color: #66cc66;">)</span><span style="color: #66cc66;">{</span> </div></li></ol></div>
</div></div><br />

to

<div class="igBar"><span id="ljavascript-19"><a href="#" onclick="javascript:showPlainTxt('javascript-19'); return false;">Display code as plain text</a></span></div><div class="syntax_hilite"><span class="langName">JavaScript:</span><br /><div id="javascript-19">
<div class="javascript"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #000066; font-weight: bold;">if</span><span style="color: #66cc66;">(</span><span style="color: #66cc66;">(</span>_27<span style="color: #66cc66;">[</span><span style="color: #CC0000;color:#800000;">0</span><span style="color: #66cc66;">]</span>!=<span style="color: #CC0000;color:#800000;">0</span>||_27<span style="color: #66cc66;">[</span><span style="color: #CC0000;color:#800000;">1</span><span style="color: #66cc66;">]</span>!=<span style="color: #CC0000;color:#800000;">0</span><span style="color: #66cc66;">)</span>&amp;&amp;_22&amp;&amp;this.<span style="color: #006600;">ratioX</span>0){

Thanks for the wonderful tool!

Hi everybody

I have issue, if someone could help. when I upload a picture I can only see the picture in the small Preview window but the big picture is black? I am using Asp.

could someone help – if you could write to my Email: biip19@hotmail.com

Hello,

Nice job !

could you please provide a code for selecting a square, but when you change the selection it grow from the center and no from the corner.

Sorry for my bad english !

Great work! Great tool! Thanks alot!

But is this a bug? The onEndCrop handler is being called whenever I click anywhere on the screen, or use the browser window’s scroll bar. I thought maybe something wrong with my implementation but this behaviour is the same on the demo on this site.

Can anyone suggest a fix/workaround?

Dear friend

i show your script is so beautiful…
i like it
But it’s not i want …
Can u do like that

1-crop/resize/compress image with javascritp only (without call server script working only Javascript)

it mean :if user have big image file…it will process in client before send file to server..so that file is smaller than orginal

I saw your script being used on a site called http://www.webwag.com/. instead of cropping a picture they are cropping the whole website. can you give me some idea of how they are able to do so ??

Hi… is there a way to Remove Cropper? I found it on example-DynamicImage.htm, but I don’t want to use CropImageManager. I just do this to get cropper:

Event.observe(
‘id_img’,
‘click’,
function(){

new Cropper.Img(
‘id_img’,
{ minWidth: 10,
minHeight: 10,
onEndCrop: onEndCrop
});
});

So, when I click on imagem with id=’id_img’, Cropper is attched. How can I remove it?

Regards.

Hi Dave, it is a great work, congratulations. But i have some questions.

How i could get the cropper image and make a new image for upload it.

Because for example i need use it for the user can upload his picture and crop his face, like gmail do it when in configuration you upload a picture and you can crop you picture for get you face and it image is show it.

I hope that you could understand my bad english.

Thanks a lot for you work.

Great script! I have one question. I’m using the preview example. Is there a way to change the previewWrap div after the page is loaded, as to move the position of the preview image? I’ve tried to access previewWrap and change it’s value, but either it’s only used when the Cropper object is created or, more likely, my knowledge of OOP is less than stellar.

Thanks,
Mike

Hi

The text says the script would work with IE6 – I tried the demo page (http://www.defusion.org.uk/demos/060519/cropper.php), but the image turns completely black and the crop rectangle is just white … this is useless as you cannot see what you are cropping oO
Help? ;

Bye, GhostGambler

Using IE6 here I’m also getting black images with a white box where the cropper should be, works fine in FF and IE7 though. I’m guessing this is a transpanrency issue with IE6?

Any solutions?

Well, I’ve been struggling with bug/issue 027 – The cropper doesn’t work
correctly in a table cell in IE7. It seems to come down to a timing issue,
since it occasionally works, but most of the time the image fails to appear
under the cropping divs.

Has anyone found a fix or work-around for this? It’s pretty much a show-stopper
for me.

Thanks!

Hey Chris

I maybe had the same issue (trying to find the reason of the one I ran into), and maybe found a bugfix for yours: (I hope I can post the code here oO?)
instead of

try

this worked for me~

In IE7 cropper appears WHITE with Images NOT LOADING under the divs! Eeeeeeek!!

It however DOES WORK upon F5 (refresh) ... very strange ‘eh?

Anyone gots a work around for these?

PS: GhostG – Can you please elaborate on your solution, as it doesn’t make sense to me… Doesn’t the code execute onload anyway (example):

[lang]
Event.observe(
window,
‘load’,
function() {
new Cropper.ImgWithPreview(
‘cropImage’,
{ }
)
}
);[/lang]

I’ve got a couple of relatively simple test cases:
http://www.firecoral.com/local.html
and
http://www.firecoral.com/remote.html

The only difference in them is that local.html pulls it’s cropper.js from the
local machine while remote.html pulls all it’s files from this site (defusion.org.uk).

Try reloading each of them a few times in IE7.

Here’s what I see.

The first time I load local.html, it kind of works (I’m guessing because
the image is not cached). The second and other time, there’s no
sign of the image in the (top) table version. local.html remains broken
after that.

When I load remote.html, it usually appears to work through reloads although
the top image has some solid black bars above and below the crop box.

What’s the difference? Only one line – where cropper.js is served from.
All of this leads me believe that it’s some subtle timing issue. The idea
of using window.onload() would hint at this (although my application does
load dynamically and that doesn’t fix it).

Thanks much for the ideas though.

Hi
@Mike
Yes, your solutions seems similar to mine.
This was a fix in case someone did not use onload or observer, but just wrote a script-tag under the image and loaded the cropper there~ because that resulted in problems.
@Chris
I encounter the same problem on both pages, local and remote – no difference.

The problem seems to be a “fix” for IE – If you “remove” the fix, the image is displayed properly – but you can’t crop :D
Had not had enough time yet to play around with it a lot – just poked the code a little bit yesterday evening~
If I find something useful I’ll report it here, if I don’t, I’ve switched to another lib :P

Thanks Ghost. I played with the IE adjustments but still couldn’t get the
results you mentioned.

Any pointers to the alternative lib?

Sure, but those do not use prototype~
http://www.dhtmlgoodies.com/index.html?whichScript=image-crop
http://www.ajaxprogrammer.com/?p=9
(and I don’t know about the licenses)

cropper.css

replace this one with background-image and a transparent gif dotted with black pixels (I use this one http://ghostgambler.mangacarta.de/cropper/transBlack.gif)

replace this one with a totally transparent gif (sth. like that http://ghostgambler.mangacarta.de/cropper/trans.gif)

This is slow in IE6, but it works shrug

thank you.

hm…
IE7 and FF use the images too, which slows the cropper down in those two browsers as well.

Little change:
Leave original CSS as is and add to the bottom of the file (or after the already mentioned blocks):

The holy star attack limits the extra CSS to IE6 and lesser versions~

Well… it seems to be necessary to add an !important to both options, otherwise it won’t work~

I hacked together this .NET script that will generate the cropped image as a file. The code currently generates “small” and “thumbnail” files. You can edit the paths and parameters as needed. Be sure to enable write permissions for the output folder on your server.

[lang]

private void Page_Load(object sender, System.EventArgs e) {
GenerateThumbNailImagesForFolder(“Images”);
}

public void GenerateThumbNailImagesForFolder(string FolderName) {
string sPhysicalPath=””;
string sFileName=RequestObject(“image”);
string sThumbName = sFileName.Replace(”.”, ”_t.”);
string sSmallName = sFileName.Replace(”.”, ”_c.”);
sPhysicalPath = Server.MapPath(FolderName);

try {
this.GenerateThumbNail(100,80,sPhysicalPath,sFileName,sThumbName,ImageFormat.Jpeg);
this.GenerateThumbNail(40,50,sPhysicalPath,sFileName,sSmallName,ImageFormat.Jpeg);

}
catch (Exception) { }
}

public void GenerateThumbNail(int maxHeight, int maxWidth, string sPhysicalPath,string sOrgFileName,string sThumbNailFileName,ImageFormat oFormat) {
try {
System.Drawing.Image oImg = System.Drawing.Image.FromFile(sPhysicalPath + @”\” + sOrgFileName);
string dispRatio = “”;
int x1=Convert.ToInt16(RequestObject(“x1”));
int y1=Convert.ToInt16(RequestObject(“y1”));
int w1=Convert.ToInt16(RequestObject(“width”));
int h1=Convert.ToInt16(RequestObject(“height”));
int w2 = w1;
int h2 = h1;
long myRatio = (oImg.Height/maxHeight);
int newWidth = Convert.ToInt32((oImg.Width / myRatio));
if(w1>maxWidth) {
long myRatioW = (oImg.Width/newWidth);
dispRatio=Convert.ToString(myRatioW);
h2 = Convert.ToInt16((oImg.Height / myRatioW));
w2 = newWidth;

}
System.Drawing.Image oThumbNail = new Bitmap(w2, h2, oImg.PixelFormat);
Graphics oGraphic = Graphics.FromImage(oThumbNail);
oGraphic.CompositingQuality = CompositingQuality.HighQuality ;
oGraphic.SmoothingMode = SmoothingMode.HighQuality ;
oGraphic.InterpolationMode = InterpolationMode.HighQualityBicubic ;
oGraphic.DrawImage(oImg, new Rectangle(0, 0, w2, h2), x1, y1, w1, h1, GraphicsUnit.Pixel);
Response.Write(“”);
//Response.Write(“w: “w1” h:”h1” w2:”w2” h2:”h2” x:”x1” y:”y1” r:” +Convert.ToString(dispRatio));

oThumbNail.Save(sPhysicalPath + @”\” + sThumbNailFileName,oFormat);
oImg.Dispose();
}
catch (Exception ex) {
Response.Write(ex.Message);Response.Write(“Error writing file: ” + sPhysicalPath + @”\” + sThumbNailFileName+””);
}
}

public string RequestObject(string sName) {
string sRet=””;
try { sRet = Request[sName].ToString().Trim(); }
catch (Exception) { sRet = “”;}
return sRet;
}

[/lang]

How to copy or save the preview exactly as a square? I’ve tryed, but the image is the same as the original.

MAN you are crazy. This thing is 200 KB big! I am not willing to add 200kb to a page that is supposed to be no more than 50 KB. You need to make this shit smaller.

Wow… atleast in FF2/Win everything runs super-smoothly. Before I start reading 300+ comments, is there already a PHP script known somewhere I could use for saving the cropped area?
Thanks a lot – nice work.

Sir,
on basis of the co -ordinates the image get marked when it is focused on the text box.
But what i can not achieve is when the focus goes to the next box i could not reset the cropping and another layer comes on the top of the existing one.
plz help.

Regards
Debasis

very excellent.
Do you provide this in Asp.net? thanks

Brilliant tool, but has anyone got a workaround/fix for the scrolling issue in IExplorer. I’ve created a Div with the following style, {width: 924px; height: 487px; overflow: auto;padding: 0; margin: 0; float: left; } the image to crop sits inside this div. As mentioned in your issues bit, it breaks out in IE but is perfect in FF. Its driving me mad, if it can’t be done it can’t be done. But i’d love to get this working.

Hello,

This is certainly a wonderful script. I have a question, what would I need to do to have the x1,y1,x2,y2 callbacks updated dynamically as the drag/resize is actually being done rather than at the end of the crop action? I have seen drag scripts where the coords are updated during the drag/resize itself. Any help would be appreciated.

Pat

yeap thanks for this nice script. Maybe you can help me for this posting. How can i do cropping image save as. Sorry IM use asp and this code.

thanks for thy answer.

codes are be disable !

Hey Dave,

Tried that and I couldn’t get it working, although I do think it is possible that way. One other method I have succeeded with is changing the JS file to use

// resize the container to fit the image
$( this.imgWrap ).setStyle( { ‘overflow’:’auto’ } );

Rather than implicitly setting the height and width of imgWrap.

It works the location out correctly but the grey overlay doesn’t correctly work, which seems like an easy fix. If I persue this method I will post up the code.

Thanks for the help.

Heres the full fix,

// resize the container to fit the image
$( this.imgWrap ).setStyle( { ‘overflow’:’auto’ } );

// resize the container to fit the image
$( this.dragArea ).setStyle( { ‘width’:this.imgW +’px’,’height’:this.imgH +’px’ } );

Got a few issues still. but its a fix for what I need.

Hello;
I have been using the codes you have written, in one of my projects. However I do have a problem that I believe you may provide an easy solution.
I use the code in Asp.net. I need to enlarge a picture in webform while in a panel. Due to the limits of the panel, the image is shown only at the size of the panel and the scroll bars are shown on the panel to see the other part of the image. Although in design view, the image is shown in the panel correctly, when aspx page is run, the image over sizes and goes out of the boundaries of the panel.

Is there any way to correct this problem?

Thank you.

Hi Dave,

is there a way to stop the crop beyond a maximum amount on the x and y? so we can have the crop set to a set amount and not allow the user to change the size

Not sure if I’m missing something, but what do I do with the coordinates to show the croped image on another page? Do I use PHP to crop the image? Does the javascript do it on the page?

Rightio, I’ve got it working; but it may seem like a bit of a hack for the way our site works. I’ve introduced three new options into the initialize.

overFlowEnabled: 0,
containerWidth:0,
containerHeight:0

Then i’ve changed setParams to enable/disable overflow on imgWrap based on the information given above.

if (this.options.overFlowEnabled) {
// resize the container to fit the containing div
$( this.imgWrap ).setStyle( {‘width’:this.options.containerWidth + ‘px’,’height’:this.options.containerHeight + ‘px’, ‘overflow’:’auto’ } );
// resize the dragArea to fit the image
$( this.dragArea ).setStyle( { ‘width’:this.imgW +’px’,’height’:this.imgH +’px’ } );
}else{
// resize the container to fit the image
$( this.imgWrap ).setStyle( { ‘width’: this.imgW + ‘px’, ‘height’: this.imgH + ‘px’ } );
}

hopefully that helps a few people, and seems to be x-browser.

Hello Serdar,

/**

* Create an area to click & drag around on as the default browser behaviour is to let you drag the image
*/
.imgCrop_dragArea {
width: 100%;
height: 100%;
z-index: 200;
position: absolute;
top: 0;
left: 0;
overflow: scroll;
}

Setting overflow property is enough for your need.

scales the image to 350px. That causes the script to get the x,y coordinates wrong. Issue disappears if I remove width specification.

Has anyone figured out a simple solution/fix for this issue?

Thanks,
Vinay.

Oops, the prev comment was supposed to have a img src example that used a width of 350px.. that got stripped off..

Is it possible to save the cropped section without using gd or something similar ? :\ MediaTemple GS servers don’t allow you to install programs like that.

Hi there,
Nice work, however how come when the cropper.uncompressed.js file is used instead of cropper.js it doesn’t work?
I’m trying to update the textboxes whilst resizing and allow them to control the cropping?

Thanks Dave for your quick response!
So far I have managed to update the textboxes whilst resizing by adding to onDrag (had to use 1.5.0 final of prototype), now for when you move the selection around. I’m slightly unsure where this function is?
Also if I wanted to type values in the textboxes and have them displayed would I use setAreaCoords?

Thanks for your time!

I really like this but i’m not sure if this can be done or not. Is it possible to save the preview picture as a image in a directory?? any help would be great.

Hello,
Just wanted to say awesome tool! It does exactly what I need it to do. But I am having an issue. IM on IE 6 and what IM doing is IM grabbing the coordinates using your tool and putting it into a form on the same page. I then submit the form via post and using PHP I store the information in a database. The problem is when the page refreshes the image is blank. I have to hit refresh for it to show up again. If I go to IE options and choose look for a new version on every visit instead of automatically then it works just fine. Any suggestions?

Hi,
i have a question about a cropper.
It is possible to use dinamic image change and image preview function?
If ‘YES’ can U tell me how i can do this?
Raker

Does anyone have a javascript code to save a cropped image?

It was discussed many times, what Javascript can’t handle or process images, only server side script like PHP, asp or any other. Look for more details or tutorials in search englines.

How do i pas the crop parameters to PHP?
I’m looking at using phpthumb and your javascript Cropper UI to send crop parameters to phpthumb.
Thankyou

If you want to transfer the cropping dates to PHP you can use the following way.

1. onevent read hidden form elements in which are the coords
2. calling ajax to transfer it to the server

Here is an example:
http://familientagebuch.de/rainer/2006/50.html#5

With this variant you cal also crop the image with imagemagick (convert)

Thanks. but that link is not in english language :S

hi Dave,

It does exactly what I need it to do, thank you very much
it is working perfectly fine, also easy to understand, i use it in my asp.net project.
thanks once again.

good spcript, but I have a problem:
I am loading a page with empty field. I choosed cropping with preview.
I am choosing an image with input type=”file” field and onChange I am loading choosed by file field image into by changing

by changing image src propoerty by javascript. in browser new image is loading in cropping window, but not in preview window.
I have any idea how to reload window in preview window too?
Anyone would help?

rapra

Great peice of code!

Slightly modifed to allow multiple img cropps per page.

My usage of it requires multiple images to be cropped per page. Its an admin function for my site so I can crop hundreds of images on one page.

I added the image id to the callback function. And use the image id to identify the image being edited to update the correct text fields.

So modifed the callback line in cropper.js to:
this.options.onEndCrop(this.img.id, this.areaCoords,{width:this.calcW(),height:this.calcH()});

The callback function I just changed to use the img id to identify which text fields to update:
function onEndCrop( img_id, coords, dimensions ) {
$( ‘x1_’+img_id).value = coords.x1;
$( ‘y1_’+img_id).value = coords.y1;
$( ‘x2_’+img_id).value = coords.x2;
$( ‘y2_’+img_id).value = coords.y2;
$( ‘width_’+img_id).value = dimensions.width;
$( ‘height_’+img_id).value = dimensions.height;
}

Very simple if you need to crop allow of images per page.

Firstly, many thanks for such a great script!

One thing I wanted to do was submit the xy values to my server side cropping script via a hidden form on double click of the crop area and saw that someone asked the same thing so I made a mod to do that.

Basically it works on the bases that onEndCrop() gets called every time you click, so I modified it to detect a double click and submit my form.

var TimeOfLastClick =0; // init at page load
function onEndCrop( coords, dimensions )
{
$( ‘x1’ ).value = coords.x1;
$( ‘y1’ ).value = coords.y1;
$( ‘x2’ ).value = coords.x2;
$( ‘y2’ ).value = coords.y2;
$( ‘width’ ).value = dimensions.width;
$( ‘height’ ).value = dimensions.height;

// get time of this click in milseconds
var thisClick=new Date();
var thisClickMs = thisClick.getTime();

// if this click happened within 300ms of last one it’s
// a double click so submit a form named ‘cropform’
if ((thisClickMs – TimeOfLastClick)

Sorry, that didnt paste in too well!

It’s at http://solomon.ie/onEndCrop.txt if anyone wants it

Amazing script. I considered three or four other scripts, got about half way through customizing most (and completely finished one), when I came across this. Ditched everything else and went full-speed using your Cropper and, my goodness, it’s perfect.

The cropping tool is now live and in-use by everyone at my site. Thank you SO MUCH for putting this out, and especially under the BSD.

Can anybody help me turn this into a profile picture tumbnail maker – like the one on facebook – thanks

Amazing! Thank you, Dave!

I wonder if “Frank” ever finalized his plan – multiple crops on one image. That’s exactly what i would require now, but i can’t seem to get there – at least not without patching the whole code – which would be far off my project deadline. Anyway, i wanted to ask if you could interconnect me with “Frank” to find out how he managed that problem. Or maybe you have a suggestion?

Kind regards, leonidas

leonidas: Not sure if you where talking to me or not, but I put the code I used for multiple crops per page on my last comment. It works perfect for me, I have 100 images loading on a page all with crop, all submit with the correct crop values. Plus I didn’t change much at all to the code really, just sending the image id back in the callback, and setting the field updates to use the image id. Let me know if you didn’t understand what I did I will try to explain better.

Sorry for the bad response, didn’t read the question correctly :-) I have never tried to do multiple crops per “image” just per page. IM sure it can be done in a very simular way. Do you want multiple crops on one image, like 2 crops that overlap on a image? Or just load the image 2 times to make 2 seprate crops?

Thanks for the reply!

I work on an application in which the user should be able to define a dynamic amount of areas within an image. Therefore it would be most comfortable for the user to be able to just drag-define multiple areas on one image. I now use a solution in which i dynamically create a new image for each area that the user wants to define, .. then load a cropper to it and append the whole thing to the parent div. It works great, but the user can not see the other crop-areas he defined, while defining a new one. That is where i am stuck :(

Kind regards, Leonidas

Greetings !
The image is displayed but that’s it !... there are no javascript funcitonality… nothing… just a regular image on a web page.
Thanks for any help… this is the essential of my code.

$styles = ’