Details

Version 1.2.2
Last updated 4th July 2011
Requirements
Demo View demo page
Links
License BSD License
Changelog
1.2.2
  • Support for latest versions of Prototype & script.aculo.us (1.7.0 & 1.9.0 respectively)
  • Tested with & added support notice for IE9
1.2.1
  • Added support for latest versions of Prototype & script.aculo.us (1.6.1.0 & 1.8.2 respectively). Changes provided by Tom Hirashima.
  • No-longer package prototype & script.aculo.us with the release
  • Changed tests to use google ajax libraries api to load prototype & script.aculo.us
  • Added option to not auto include the cropper CSS file
  • #00008 - Fixed bug: Dynamic include of cropper CSS expected cropper.js and failed when using cropper.uncompressed.js
  • #00028 - Fixed bug: Doesn't work with latest script.aculo.us - Fix by Tom Hirashima
  • #00030 - Fixed bug: Doesn't work in Firefox 3.5 (CSS include issue)
  • #00007 - Fixed bug: onEndCrop isn't called when moving with keys
  • #00011 - Fixed bug: The image that is to be cropped does not show in IE6.0 -- included CSS fix
  • Tidied up source code & fixed issues that jslint found so it will compress better
1.2.0
  • Added id to the preview image element using 'imgCrop_[originalImageID]'
  • #00001 - Fixed bug: Doesn't account for scroll offsets
  • #00009 - Fixed bug: Placing the cropper inside differently positioned elements causes incorrect co-ordinates and display
  • #00013 - Fixed bug: I-bar cursor appears on drag plane
  • #00014 - Fixed bug: If ID for image tag is not found in document script throws error
  • Fixed bug with drag start co-ordinates if wrapper element has moved in browser (e.g. dragged to a new position)
  • Fixed bug with drag start co-ordinates if image contained in a wrapper with scrolling - this may be buggy if image has other ancestors with scrolling applied (except the body)
  • #00015 - Fixed bug: When cropper removed and then reapplied onEndCrop callback gets called multiple times, solution suggestion from Bill Smith
  • Various speed increases & code cleanup which meant improved performance in Mac - which allowed removal of different overlay methods for IE and all other browsers, which led to a fix for:
  • #00010 - Fixed bug: Select area doesn't adhere to image size when image resized using img attributes
  • #00006 - Removed default behaviour of automatically setting a ratio when both min width & height passed, the ratioDimensions must be passed in
  • #00005 - Added ability to set maximum crop dimensions, if both min & max set as the same value then we'll get a fixed cropper size on the axes as appropriate and the resize handles will not be displayed as appropriate
  • Switched keydown for keypress for moving select area with cursor keys (makes for nicer action) - doesn't appear to work in Safari
1.1.3
  • Fixed wrong cursor on western handle in CSS
  • #00008 & #00003 - Added feature: Allow to set dimensions & position for cropper on load
  • #00002 - Fixed bug: Pressing 'remove cropper' twice removes image in IE
1.1.2
  • Fixed bugs with ratios when GCD is low (patch submitted by Andy Skelton)
1.1.1
  • Fixed bug with rendering issues fix in IE 5.5
  • Fixed bug with endCrop callback issues once cropper had been removed & reset in IE
1.1.0
  • Fixed bug with IE constantly trying to reload select area background image
  • Applied more robust fix to Safari & IE rendering issues
  • Added method to reset parameters - useful for when dynamically changing img the cropper is attached to
  • Added method to remove cropper from image
1.0.0
  • Initial verison

About

The JavaScript image cropper UI allows the user to crop an image using an interface with the same features and styling as found in commercial image editing software, and is is based on the Prototype JavaScript framework and script.aculo.us.

Initially I performed quite a lot of searching for some ready made solutions to meet my requirements, but found none that had the complete feature set that I required or any complete versions based on Prototype.

So after a week and a half of work, I present the JavaScript image cropper UI, built on Prototype & script.aculo.us.

Features

Screen shot of cropper in action

  • Un-obtrusive
  • Based on Prototype and script.aculo.us
  • Image editing package styling & functionality, the crop area functions and looks like those found in popular image editing software
  • Dynamic inclusion of required styles
  • Drag to draw areas
  • Shift drag to draw/resize areas as squares
  • Selection area can be moved
  • Selection area can be resized using resize handles
  • Allows dimension ratio limited crop areas
  • Allows minimum dimension crop areas
  • Allows maximum dimensions crop areas, if both min & max set as the same value then we'll get a fixed cropper size on the axes as appropriate and the resize handles will not be displayed as appropriate
  • Allows dynamic preview of resultant crop (if minimum width & height are provided), this is implemented as a subclass so can be removed if not required
  • Movement of selection area by arrow keys (shift + arrow key will move selection area by 10 pixels)
  • All operations stay within bounds of image
  • All functionality & display compatible with most popular browsers supported by Prototype, tested in:
    • PC: IE 6 & 5.5, Firefox 1.5, Opera 8.5 (see known issues) & 9.0b
    • MAC: Camino 1.0, Firefox 1.5, Safari 2.0

Usage

Extract to a directory of your choosing e.g. 'scripts/cropper/' and include the script and the required Prototype & script.aculo.us scripts:

HTML:
  1. <script type="text/javascript" src="scripts/cropper/lib/prototype.js" language="javascript"></script>
  2. <script type="text/javascript" src="scripts/cropper/lib/scriptaculous.js?load=effects,builder,dragdrop" language="javascript"></script>
  3. <script type="text/javascript" src="scripts/cropper/cropper.js" language="javascript"></script>

Options

ratioDim obj
The pixel dimensions to apply as a restrictive ratio, with properties x & y.
minWidth int
The minimum width for the select area in pixels.
minHeight int
The mimimum height for the select area in pixels.
maxWidth int
The maximum width for the select areas in pixels (if both minWidth & maxWidth set to same the width of the cropper will be fixed)
maxHeight int
The maximum height for the select areas in pixels (if both minHeight & maxHeight set to same the height of the cropper will be fixed)
displayOnInit int
Whether to display the select area on initialisation, only used when providing minimum width & height or ratio.
onEndCrop func
The callback function to provide the crop details to on end of a crop.
captureKeys boolean
Whether to capture the keys for moving the select area, as these can cause some problems at the moment.
onloadCoords obj
A coordinates object with properties x1, y1, x2 & y2; for the coordinates of the select area to display onload

The callback function

The callback function is a function that allows you to capture the crop co-ordinates when the user finished a crop movement, it is passed two arguments:

  • coords, obj, coordinates object with properties x1, y1, x2 & y2; for the coordinates of the select area.
  • dimensions, obj, dimensions object with properities width & height; for the dimensions of the select area.

An example function which outputs the crop values to form fields:

JavaScript:
  1. function onEndCrop( coords, dimensions ) {
  2.     $( 'x1' ).value = coords.x1;
  3.     $( 'y1' ).value = coords.y1;
  4.     $( 'x2' ).value = coords.x2;
  5.     $( 'y2' ).value = coords.y2;
  6.     $( 'width' ).value = dimensions.width;
  7.     $( 'height' ).value = dimensions.height;
  8. }

Basic interface

This basic example will attach the cropper UI to the test image and return crop results to the provided callback function.

HTML:
  1. <img src="test.jpg" alt="Test image" id="testImage" width="500" height="333" />
  2.  
  3.     <script type="text/javascript" language="javascript">
  4.     Event.observe( window, 'load', function() {
  5.         new Cropper.Img(
  6.             'testImage',
  7.             { onEndCrop: onEndCrop }
  8.         );
  9.     } );
  10. </script>

Minimum dimensions

You can apply minimum dimensions to a single axis or both, this example applies minimum dimensions to both axis.

HTML:
  1. <img src="test.jpg" alt="Test image" id="testImage" width="500" height="333" />
  2.  
  3. <script type="text/javascript" language="javascript">
  4.     Event.observe( window, 'load', function() {
  5.         new Cropper.Img(
  6.             'testImage',
  7.             {
  8.                 minWidth: 220,
  9.                 minHeight: 120,
  10.                 onEndCrop: onEndCrop
  11.             }
  12.         );
  13.     } );
  14. </script>

Select area ratio

You can apply a ratio to the selection area, this example applies a 4:3 ratio to the select area.

HTML:
  1. <img src="test.jpg" alt="Test image" id="testImage" width="500" height="333" />
  2.  
  3. <script type="text/javascript" language="javascript">
  4.     Event.observe( window, 'load', function() {
  5.         new Cropper.Img(
  6.             'testImage',
  7.             {
  8.                 ratioDim: {
  9.                     x: 220,
  10.                     y: 165
  11.                 },
  12.                 displayOnInit: true,
  13.                 onEndCrop: onEndCrop
  14.             }
  15.         );
  16.     } );
  17. </script>

With crop preview

You can display a dynamically produced preview of the resulting crop by using the ImgWithPreview subclass, a preview can only be displayed when we have a fixed size (set via minWidth & minHeight options). Note that the displayOnInit option is not required as this is the default behaviour when displaying a crop preview.

HTML:
  1. <img src="test.jpg" alt="Test image" id="testImage" width="500" height="333" />
  2. <div id="previewWrap"></div>
  3.  
  4. <script type="text/javascript" language="javascript">
  5.     Event.observe( window, 'load', function() {
  6.         new Cropper.ImgWithPreview(
  7.             'testImage',
  8.             {
  9.                 previewWrap: 'previewWrap',
  10.                 minWidth: 120,
  11.                 minHeight: 120,
  12.                 ratioDim: { x: 200, y: 120 },
  13.                 onEndCrop: onEndCrop
  14.             }
  15.         );
  16.     } );
  17. </script>

Known Issues

  • Safari animated gifs, only one of each will animate, this seems to be a known Safari issue.
  • After drawing an area and then clicking to start a new drag in IE 5.5 the rendered height appears as the last height until the user drags, this appears to be the related to another IE error (which has been fixed) where IE does not always redraw the select area properly.
  • Lack of CSS opacity support in Opera before version 9 mean we disable those style rules, if Opera 8 support is important you & you want the overlay to work then you can use the Opera rules in the CSS to apply a black PNG with 50% alpha transparency to replicate the effect.
  • Styling & borders on image, any CSS styling applied directly to the image itself (floats, borders, padding, margin, etc.) will cause problems with the cropper. The use of a wrapper element to apply these styles to is recommended.
  • overflow: auto or overflow: scroll on parent will cause cropper to burst out of parent in IE and Opera when applied (maybe Mac browsers too) I'm not sure why yet.

Next Steps

Feature Requests & Bug Reports

Please check the existing list of feature requests & bugs and the discussion list before posting requests or reporting bugs.

Leave a Tip

If you find this code useful you can leave a donation towards the continued development & support.

Discussion

Note: Please only use the comments for general comments and the discussion list to discuss this code project (e.g. implementation queries, change suggestions etc.).

Comments

There have been 750 comments so far, join the discussion.

Pages: « 1 2 3 4 [5] 6 7 8 9 10 1115 » Show All

201. Yannick - 24th Mar 2007 - 12:31 am

I’m using the dojo toolkit and want to try Image Cropper on the same page.
It seems that these two libraries don’t work together…
(conflict between IC classes and dojo.io.IframeIO)
Anyone knows how to solve this issue ?

Thx !!

202. Leif - 28th Mar 2007 - 9:12 pm

I found my answer through a previous post.

Thanks Adam B! Check out post #147.

I modified it a little bit for what I wanted, but this was just what I needed.

203. Caio - 29th Mar 2007 - 3:00 pm

I’m having problems with IE.
I set my Event observe like this:

Event.observe(
‘testImage’,
‘click’,
function() {
new Cropper.Img(‘testImage’,{
minWidth: 10,
minHeight: 332,
onEndCrop: onEndCrop

});
});
So, when I click on the image (that have ID=”testImage”), crop works normally, but the image get blank. I can do everything that Cropper demos show, but the image is now a “white retangle”.

I noticed this bug just in IE… Firefox works perfectlly. What it can be?

Thanks!

204. Dave - 29th Mar 2007 - 3:25 pm

Caio:

Is your cropper inside a table, there have been reports of similar problems with the cropper when it’s inside tables.

205. Caio - 29th Mar 2007 - 3:27 pm

By the way… the problem I reportted is for IE 7

206. Caio - 29th Mar 2007 - 3:34 pm

Yes, It is inside a table. I tested without table, just the img tag and it works. Is there a way to fix it? Because I won’t be able to modify the page structure.

Thanks for the “on-the-fly” answer and congrats for this app.

207. Dave - 29th Mar 2007 - 4:24 pm

Caio:
I’ve not actually tried it in a table myself yet, but to me it sounds like a CSS issue.

208. TheIceman5 - 30th Mar 2007 - 12:29 am

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.

Full details are here in this thread on this forum below.
can anyone help me out here??

http://phpbuilder.com/board/showthread.php?t=10337256

209. Marta - 2nd Apr 2007 - 3:24 pm

Thank you for this amazing tool!

I have a couple of questions/problems about it.
1. I would like to crop again the same image (without using the remove() and reset() methods), but it seems it doesn’t work in IE7 (you can move the handles, but it doesn’t update coordinates). If I use either the remove() or reset() methods, I get an error, but the line of code indicated doesn’t exist. In FF works without a problem in both cases.
2. I would like to crop a new image, but the cropper still shows the previous one (although when the crop is made, it’s a piece of the new image).

I’m using the ImgWithPreview and a couple of functions to show and hide the div when called. I have an iframe which passes the URL of the image loaded to the showDiv function, and when the user presses the submit button for cropping the image, the hideDiv function passes the coordinates to the iframe which performs the cropping in PHP and shows the result in the iframe.

Thank you in advance for your help.

210. Russ Michaels - 2nd Apr 2007 - 5:08 pm

Gret tool, I have it doing almost everything I want. Combining it with imageCFC I can upload, crop and rotate the image.
But one other feature I need is that if a user uploads a big image, I need to resize it for display purposes only so it fits on the screen, but crop the true image.
So if for example they uploaded an image of 800×600, I would set the img display height and width as 400×300, but I need the crop to occur on the real dimensions of the image not the dimensions that they select on the page.

Any suggestions ?

211. Darrell Esau - 2nd Apr 2007 - 11:36 pm

Any reason why the uncompressed version doesn’t work? (the compressed version works [almost] fine for me .. but the compressed version doesn’t seem to work at all).

212. Dave - 3rd Apr 2007 - 8:54 am

Darrell:
See bug number 00024, there was a comment here somewhere on how to fix it – basically the script is looking for the script tag for cropper.js in the HTML source to find the path for the CSS include.

213. Dave - 3rd Apr 2007 - 8:59 am

Russ:
For now there are two options:
a) resize the image server side once uploaded before showing the cropper.
b) perform your own calculations based on the co-ords passed from the cropper and the dimensions of the image as shown on the cropper screen compared to it’s actual dimensions.

To allow the cropper to work out of the box for the scenario you described is on my list of things to do on the cropper.

214. Rainer Schleevoigt - 3rd Apr 2007 - 9:16 am

In my (german) example at http://familientagebuch.de/rainer/2006/50.html#5 is left a thumbnail and the imagemagick convert tools cut from the original size.
It is very easy and similar to http://familientagebuch.de/rainer/2007/09.html#i95

Best regards
Rainer from Hamburg/Germany

215. Florian Grell - 3rd Apr 2007 - 3:38 pm

First of all: great work! I’ve seen quite a few image-cropping utilities but your solution is really nice (and doesn’t hurt my eyes).
What do you think of this feature: update the dimension/position info on Drag? So we could have a live update of how big our Croparea is and where it is (like in photoshop). That would really help.
[sorry, but english is not my first language]

216. levi - 4th Apr 2007 - 3:48 pm

I think you already heard this many thimes, but here’s one more time: GREAT WORK!

I tried to integrate your script in a netbeans Visual Web Pack project. There where two problems I faced, here are the solutions:

1. The scripts have to be included in the following way(i think this is true for all VWP projects):
var fake=null;
var fake=null;
var fake=null;

2. You should use a plain GraphicImage component, and put it into a GroupPanel. Other ways the selection box won’t appear, or there could be problems with the position. If you put it into another type of panel then it’s the same bug what fialik wrote about.

217. levi - 4th Apr 2007 - 3:51 pm

It seems that the code did’t appear right
so it was:
script src=”cropper/lib/prototype.js” type=”text/javascript”>var fake=null;

218. Dan - 16th Apr 2007 - 2:37 pm

I am using crop with preview, but it appears the preview size is tied to the minWidth and minHeight of the crop. This is a shame, I cant have a large preview and a small minimum size which seems very strange.

Can you change it so that there is a specific previewWidth and previewHeight that we can set externally and still be able to have a smaller crop area.

Thanks

219. Dan - 16th Apr 2007 - 2:44 pm

It would be very nice if you could nudge the ‘size’ of the crop as well as the position. Something like:
CTRL+LEFT will make it smaller width
CTRL+SHIFT+LEFT will make it smaller width in bigger jump
CTRL+RIGHT will make it larger width
CTRL+SHIFT+RIGHT will make it larger width in bigger jump

CTRL+UP will make it smaller height
CTRL+SHIFT+UP will make it smaller height in bigger jump
CTRL+DOWN will make it larger height
CTRL+SHIFT+DOWN will make it larger height in bigger jump

Basically you are moving the right edge or the bottom edge.

220. Tejal - 16th Apr 2007 - 3:58 pm

Is this code is used for crop a some portion of site?

221. Dave - 21st Apr 2007 - 7:13 pm

I’m testing the component but I have a problem.
The image is displayed in an IFRAME. I added the code to the page that is displayed in the IFRAME. But nothing happends when I click on the image.

What’s wrong ?

222. Pradeep Kumar Mishra - 24th Apr 2007 - 5:41 am

For a given image I have used
//zoomWidth: Final image width after applying zoom(in/out)
//zoomHeight: Final image height after applying zoom(in/out)
//x1,y1, cropWidth and cropHeight are same as x1, y1 , w & h in above example

image = ScaleToFixedSize(image, zoomWidth, zoomHeight);
image = Crop(image, x1,y1,cropWidth,cropHeight);

private Image ScaleToFixedSize(Image imgPhoto, int Width, int Height)

{
int sourceWidth = imgPhoto.Width;
int sourceHeight = imgPhoto.Height;
int sourceX = 0;
int sourceY = 0;
int destX = 0;
int destY = 0;

float nPercent = 0;
float nPercentW = 0;
float nPercentH = 0;

nPercentW = ((float)Width / (float)sourceWidth);
nPercentH = ((float)Height / (float)sourceHeight);

//if we have to pad the height pad both the top and the bottom
//with the difference between the scaled height and the desired height
if (nPercentH

223. Dave - 24th Apr 2007 - 11:08 am

I implemented the cropper but found a few problems :

1. After using the arrows to move the crop area, the callback function OnEndCrop is not called. How to display the coordinates after each move with the arrows ?

2. When displaying an initial crop area on the image (onload), the arrow keys do not work. We first have to move the area a bit to make the arrows work.

Dave

224. Gajendra Bang - 25th Apr 2007 - 2:58 am

Hi,

Can I save the cropped image using code ????

225. levi - 25th Apr 2007 - 6:36 am

For the problem in post 223(“2. When displaying an initial crop area on the image (onload), the arrow keys do not work. We first have to move the area a bit to make the arrows work.”) additionally: – if the ratio is set and the image is in the initial state, if the side of the image is dragged to the right, or up, the selection box jumps out of the image. If the image is moved a little then there are no problems. This seems to be some initialization problem, so isn’t there a way to set the fields of the image crop after the instantiation to simulate an image move without explicitely having to move the image by hand?

Thanks!

226. kaleemullah khan - 3rd May 2007 - 2:49 pm

Event.observe( window, ‘load’, function() {.......

show white overlay on some Internet Explorer 6, even after updating windows,

any suggestion

227. zhuatu - 5th May 2007 - 1:03 am

http://www2.zhuatu.com/crop/1.htm

test2 error
help me

两个测试,试一下,可以发现,测试一没问题。因为图片不大。

但,测试二,问题来了。大图片,我虽然按比例缩小显示了,但裁减的时候,其实还是在原大小上裁减。所以造成定位不准。

我呼唤高手,怎样做到,让大图缩小显示,裁减的位置也是在缩小的图上进行的。

228. CodeBit.cn - 5th May 2007 - 6:09 am

good job !
thanks !

229. zhuatu - 6th May 2007 - 6:03 am

这几天一直在做这个,终于可以实际应用了:

http://www2.zhuatu.com/crop/index.asp?testImage=2.jpg

只是还有几个问题,一直无法解决:

1、图片放大缩小后,那个透明层没有随之放大缩小。找不到解药。
2、图片下那几个文本框,无法直接填数字。怎样改成直接填数字也可以?
3、裁减后为什么只能另存为bmp?我想另存为jpg。

230. zhuatu - 11th May 2007 - 2:12 am

pls improve:
add the function of zoom in/out,
input data directly to textfield

231. Barton - 17th May 2007 - 4:14 pm

It doesn’t seem to work with Scriptaculous 1.6.5. Can anyone confirm?

232. Yucel Kandemir - 22nd May 2007 - 11:02 am

AMAZİNG!!!!

233. ramon soler - 22nd May 2007 - 2:58 pm

i would like to use the selected image on a new image in order to zoom the selected image some ideas pls
to use in a state map
how to use the selected image as a new image
and how to avoid the darkening of the image is there an option fej same color and a rectangle with border to select
thanks

234. Sergey Koksharov - 22nd May 2007 - 3:14 pm

I like your updates! They are very useful. Thanks.

235. hamerhed - 25th May 2007 - 11:22 pm

Hi all
I have problem with IE 6. I can’t load the page. The problem is with scriptoculous.js file. This script writes to the output only libraries given as script params and ended. :/ There is no following page code. When I am removing this file from code, all page is loaded. Under firefox 1.5 there is no problem Thanks for any help

236. hamerhed - 27th May 2007 - 12:51 am

hi
I have found the solution. I am including all needed .js files directly, without using scriptaculous.js.

and I am moving onEndDrop function from .html file to other .js file which is included to HTML file

that’s solved problem with using tools at IE 6.

237. Sammy - 28th May 2007 - 7:05 pm

Wow! This script is something! Thank you so much for seeing the effort.

... But I also have a small problem, as I’m not that much of a javaScript developer. All of the test HTML scripts work just fine, but when I include the script to my site, it works quite randomly. So of course I’m a bit confused ‘cos I’ve ran out of knowledge here. I’m building a feature that users can upload an image if they want and its resized on the server side. Later on they can crop the image (just as an extra feature) on their browser. So the image data is read from a database blob, user can define the crop area on their browser and then the co-ordinates are sent to server and voila! If I’ve understood correctly, that Event.observe(‘load’ ...) should take care that the page and the image is loaded before the script is run. But I think 4 times out of five I’ll get 2 errors. a) Draggable is not defined (line19/cropper.js) and new Cropper.Img has no properties (on the HTML page). So it seems to me that the script is run before the image is loaded. Can someone give me a gentle push towards how to solve this problem? Like I wrote, I’m bit confused since sometimes the script works and sometimes it doesn’t… Tried all of the trick I know, but of course that is not a lot :)

But keep up the good work! This script is really something!!

238. hamerhed - 29th May 2007 - 8:54 am

hmm I am seeing that code was removed from my last post Sammy I had the same problem under IE 6 My solution does not use scriptocoluos.js I am inluding all scripts directly into page
src=”/mim/wspolne/.js/cropper/lib/prototype.js” defer=”defer”>
src=”/mim/wspolne/.js/cropper/lib/builder.js” defer=”defer”>
src=”/mim/wspolne/.js/cropper/lib/dragdrop.js” defer=”defer”>
src=”/mim/wspolne/.js/cropper/cropper.js” defer=”defer”>
src=”/mim/wspolne/.js/cropper/onEndCrop_function.js” defer=”defer”>
The order is important.
The last one file consist of my implementation of onEndCrop and code used for creating Cropper object. I hope it helps :)

239. Marlon - 30th May 2007 - 3:52 pm

I have just downloaded ther cropper and it is great. just wondered if there is any way to change the ratio of the selection box, after the cropper has been initiated? IE, i have a selection box with different ratios in, and i need it to change without a page reload.

Many Thanks.

240. Dave - 30th May 2007 - 4:26 pm

Hi Marlon,

You should be able to change this by adding and removing the cropper, there is a rudimentary example in the demo which has a CropImageManager class which allows the cropper to be removed and then reapplied using different settings. You should be able to use that as a basis for what you want to achieve.

241. TheIceman5 - 30th May 2007 - 9:39 pm

still waiting for a reply, been months now. If you dont have any idea, just say so, come on. IM not going to give up until i get an answer, IM not like that. IM persistent.

i have a problem with it when i use it in layers, “advanced layer popup” http://www.dmxzone.com/ShowDetail.asp?NewsId=12769 or advanced DHTML popup http://www.dpopup.com or any other layer for that matter.

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 on this website works fine, just when you combine the cropper and popup layer is where the problem starts with the xray.

Full details are here in this thread on this forum below.
can anyone help me out here??

http://phpbuilder.com/board/showthread.php?t=10337256

242. Dave - 31st May 2007 - 9:03 am

TheIceman5:
It looks like a z-index problem, but it also looks like an old version of the cropper UI script is being used. Try updating to the most recent version of the cropper UI.

If you could post a link to a live example I could take a look, but this use-case seems to be one that I cannot account for myself due to the external CSS for the popup that is probably the cause of the issue.

243. Joe Elliott - 6th Jun 2007 - 4:23 am

This demo looks really cool, and I was able to get it to run without a problem on my server. My only question is once the image has the crop marks set.. then what? How do you save that cropped image, or pass the information on? Am I missing something? I guess I am looking for a button that says “Crop Complete” or something, and when that is pressed, the image is saved in cropped form, and you move on to the next screen… is that possible?

Thanks!

244. Dave Bolton - 6th Jun 2007 - 11:32 am

Joe,

You use the callback mechanism. See the references to “onEndCrop” above. The callback mechanism will call some javascript code that you write. Mine sets a couple of hidden variables and then submits the whole page, then on the server side I process the actual cropping using the values from the hidden fields. There is no reason that you couldn’t do this in an AJAX way though. Hope that helps.

Cheers,
Dave

245. Dave Bolton - 6th Jun 2007 - 11:47 am

Love this cropping code, very very good stuff.

I’m utilising the previewWrap, but I’d like to set it to a specific size, not the minWidth and minHeight.

The reason: the actual picture that will be cropped on the server side is much larger than the one that I’m displaying, so I apply a ratio to the crop dimensions that I receive from your cropping code.

e.g. say the real image is a 1000 pixel square, I might display a 250 pixel square in the browser, giving a ratio of 4. So the dimensions and initial position I receive on the server must be multiplied by 4 before the real cropping takes place. Since everything is multiplied by 4, the minWidth and minHeight are only a quarter of what the real values will be will be, thus the previewWrap image is VERY small (too small to be useful). I’d like to manually set it to a different size.

I tried to modify the code myself, by changing all references in the preview specific code to use my static size rather than minWidth and minHeight. This was partially successful, but seemed to mess with the overflow a little.

Any ideas on which bits I should change to get it to work?

Cheers,
Dave

246. Miguel - 7th Jun 2007 - 6:18 pm

Thanks so much for this tool, it is really coming in handy. I am using it specifically as an admin tool to create flickr like tooltip-hotspots for photos in a photo gallery, in conjuction with JQuery. This tool makes it very easy!

However! One effect I’m trying to accomplish is to have the tooltip-hotspots that are already made to show up as dashed outlines within the image that the cropper is attached to. I’m doing this so that I can see where each hotspot will overlap as I create new ones. My problem is, that when I click on the image to use the cropper, my outlined hotspots disappear. They are generated divs that are attached dynamically using JQuery, and I have followed their instructions to make sure that JQuery is not clashing with the other libraries.

Is there a reason why the cropper tool would remove other divs? and is it possible to keep that from happening?

247. arvind kumar - 7th Jun 2007 - 7:42 pm

i am a software Engineer in m n c.i want to search How to move any picture in safari browser.
thanx and regard
Arvind Kumar

248. TheIceman5 - 7th Jun 2007 - 9:27 pm

well done arvind kumar, you do that. Nice comment.

249. Anders Heivoll - 8th Jun 2007 - 3:35 pm

Hi.
I just have to say I love this cropper utility, and I’d like to use it in my own little image editor tool on the CMS I’m currently working on. You don’t seem to mention details about the license for this code. Is it allowed to use it in commercial applications?
Other than that, I’m wondering about the same thing as Dave Bolton (a few comments back).

Cheers

250. Russ Michaels - 8th Jun 2007 - 4:10 pm

Dave,
when an image is uploaded, if it exceeds my maxwidth, I create a resized working copy setting this to the maxwidth and work out the ratio. This working image is what I use in the cropper, so the minWidth and minHeight still work fine.
You don’t want to resize the big image inside the cropper, this just doesn’t work right, and also means that the big image has to be submitted each time.

Pages:« 1 2 3 4 [5] 6 7 8 9 10 1115 » Show All

Leave a comment

No HTML please, only textile. For code please use [lang]...[/lang] tags (e.g. [html]...[/html] for HTML)