DEfusion.org.uk

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!

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,

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]

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

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.

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

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.

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

Hi Dave.

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

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

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

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

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

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

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

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
}

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