DEfusion.org.uk

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-9"><a href="#" onclick="javascript:showPlainTxt('javascript-9'); return false;">Display code as plain text</a></span></div><div class="syntax_hilite"><span class="langName">JavaScript:</span><br /><div id="javascript-9">
<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-10"><a href="#" onclick="javascript:showPlainTxt('javascript-10'); return false;">Display code as plain text</a></span></div><div class="syntax_hilite"><span class="langName">JavaScript:</span><br /><div id="javascript-10">
<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 ??