DEfusion.org.uk

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?