DEfusion.org.uk

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

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

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!

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

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.

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.

has anyone similar script that uses jquery?

Anybody got this to work on top of Google Maps?

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?

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.

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

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

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

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

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

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

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?

excellent library.thank you.

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.

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.