Customizing Cropper - how?

[Banjo Boy]

1) I would like the cropper to handle any image size, that is, the
image should not be scaled to fit in a defined rectangle. For this I
removed the x, y dimensions:
<div id="testWrap">
<img src="crop_example01.jpg" alt="test image" id="testImage"/>
</div>
and changed testWrap as follows:
#testWrap {
width: 600px;
height: 400px;
margin: 20px 0 0 50px;
float: left;
overflow: auto;
}
This works fine in Firefox, in IE6 not at all, where the testWrap size
is ignored, and the image appears at its whole size; in Opera, the
image is contained in the div as it should, but the darkened area is
as large as the image. Is there a fix for that?

2) Depending on the size of the image, the selection area now may be
invisible; it may be found on scrolling the image. How do I position
the selection area in top left corner on loading?

3) The preview area should be rectangular, e.g. 120 x 120 px, but the
selection area should have a variable side ratio. In the preview, the
larger side of the cropped image should equal the side of the preview
area, e.g. 120 px. That is, the result should be contained in this
square area, regardless of its side ratio. How do I do that?

4) I would like to be able to save the cropped image. How do I do
that?

You may have guessed that I know next to nothing about Javascript.
Thanks for helping!

[David Spurr]

Banjo Boy wrote:
> 1) I would like the cropper to handle any image size, that is, the
> image should not be scaled to fit in a defined rectangle. For this I
> removed the x, y dimensions:
> <div id="testWrap">
> <img src="crop_example01.jpg" alt="test image" id="testImage"/>
> </div>
> and changed testWrap as follows:
> #testWrap {
> width: 600px;
> height: 400px;
> margin: 20px 0 0 50px;
> float: left;
> overflow: auto;
> }
> This works fine in Firefox, in IE6 not at all, where the testWrap size
> is ignored, and the image appears at its whole size; in Opera, the
> image is contained in the div as it should, but the darkened area is
> as large as the image. Is there a fix for that?
>

This is not supported in the current version of the cropper, I did try
to get this working but found the same cross-browser issues that you did
and spent hours chasing a solution to no avail.

> 2) Depending on the size of the image, the selection area now may be
> invisible; it may be found on scrolling the image. How do I position
> the selection area in top left corner on loading?
>

There is no way to do this at the moment, however you could try setting
the co-ordinates yourself, see the thread 'Hide and Show the cropper
selection' in the group for a possible solution.

> 3) The preview area should be rectangular, e.g. 120 x 120 px, but the
> selection area should have a variable side ratio. In the preview, the
> larger side of the cropped image should equal the side of the preview
> area, e.g. 120 px. That is, the result should be contained in this
> square area, regardless of its side ratio. How do I do that?
>

This is an existing feature request (see issue 9
http://code.google.com/p/javascript-image-cropper-ui/issues/detail?id=9)

> 4) I would like to be able to save the cropped image. How do I do
> that?
>

See the FAQs http://code.google.com/p/javascript-image-cropper-ui/wiki/FAQs

[Banjo Boy]

Thanks for your reply!

> There is no way to do this at the moment, however you could try setting
> the co-ordinates yourself, see the thread 'Hide and Show the cropper
> selection' in the group for a possible solution.

In the meantime, I realized that that is not necessary. All I have to
do is click on the visible part of the image for the selection area to
appear at the mouse pointer.

Regarding the issue 9http://code.google.com/p/javascript-image-cropper-
ui/issues/detail?id=9:
If I delete the line
ratioDim: { x: 120, y: 120 },
I can make the side ratio of the selection area anything I want, but
the lines
minWidth: 120,
minHeight: 120,
will rescale the sides independently to 120 px, so that unless the
selection area itself is a square, the preview image will be
distorted. Is there a way to have only the longer side of the selected
area scaled to 120 px, and the shorter one scaled proportionally?

Hans