DEfusion.org.uk

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

Hi.

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

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

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

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.

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

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”

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

hello!

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

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

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

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!

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

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

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

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