Change ratio after cropper has been initiated (from DEfusion.org.uk comment)

[David Spurr]

From comment by Svempa:

This has been requested by a few people, but so far I have seen no
working example. It was suggested that one take a look at the demo
which has a CropImageManager class which allows the cropper to be
removed and then reapplied using different settings. I have had a look
at this demo, but I cannot make it work. I guess it should be easy,
but my strongest skill is not js, so I'm not quite sure how to put
together a function that could switch between different ratios. Would
be great if someone could write a couple of lines of code to help me
out...

Thanks in advance.

Otherwise a great looking tool.

[google does many good things, but their googlegroups is a pain in the
butt. highly intrusive and takes some effort to join. googlegroups...
no thanks]

[David Spurr]

See the example file I've uploaded to the group here:

http://groups.google.com/group/javascript-image-cropper-ui/web/google-group-example-landscape-portrait.htm

[aabbcc...@googlemail.com]

thanks for that!
however, is it possible to add "ratioDim" somewhat more dynamically,
i.e. could I replace the values in this example (220 and 124) with
variables that I can change via input from some outside form value?
below is some of your example code and further down is a slightly
modified version. the modified version works when I define my new
variable "aa" like this: "var aa = 124;" but does not work when I
define the variable using "var aa = document.myform.myvalue.value;".
the value of the variable "aa" is obviously the same, as inserting an
"alert(aa)" would tell me... but somehow the cropper is affected. any
idea what the problem could be?


ORIGINAL
attachCropper: function() {
if (this.curCrop == null) {
if( this.getTargOrientation() == 'landscape' ) {
ratioDim = { x: 220, y: 124 };
this.curOrientation = 'landscape';
} else {
ratioDim = { x: 124, y: 220 };
this.curOrientation = 'portrait';
}

MODIFIED
attachCropper: function() {
if (this.curCrop == null) {
if( this.getTargOrientation() == 'landscape' ) {
ratioDim = { x: 220, y: 124 };
this.curOrientation = 'landscape';
} else {
var aa = document.myform.myvalue.value;
//var aa = 124;
ratioDim = { x: aa, y: 220 };
this.curOrientation = 'portrait';
}

WITH THIS SOMEWHERE IN THE BODY

<form name="myform">
<input type="hidden" name="myvalue" value="124" />
</form>

On Oct 15, 5:04 pm, David Spurr <david.sp...@gmail.com> wrote:
> See the example file I've uploaded to the group here:
>

> http://groups.google.com/group/javascript-image-cropper-ui/web/google...

[aabbcc...@googlemail.com]

Using the code mentioned by me, I put up 2 examples, one works and one
does not... what could be the problem?
View the examples at http://cropper.freewebspace.com/



On Nov 23, 12:10 pm, "aabbcczxcv...@googlemail.com"

[Dave Spurr]

Neither of those examples work, i.e. they don't even load the page just times out.

-D

[aabbcc...@googlemail.com]

Strange. I checked them just now, and the pages were up and running.
Give it another try, it must have been a temporary server issue...

On Nov 27, 11:31 am, Dave Spurr <david.sp...@gmail.com> wrote:
> Neither of those examples work, i.e. they don't even load the page just
> times out.
>
> -D
>

> aabbcczxcv...@googlemail.com wrote:
> > Using the code mentioned by me, I put up 2 examples, one works and one
> > does not... what could be the problem?

> > View the examples athttp://cropper.freewebspace.com/

[Dave Spurr]

Okay, now they both work and the cropper works fine in both examples for me.

-D

[aabbcc...@googlemail.com]

No, one of the examples does not work as intended. The crop area is
wrong for the portrait. This is how some of the js looks like on that
page:

attachCropper: function() {
if (this.curCrop == null) {
if( this.getTargOrientation() == 'landscape' ) {
ratioDim = { x: 220, y: 124 };
this.curOrientation = 'landscape';
} else {
var aa = document.myform.myvalue.value;
//var aa = 124;
ratioDim = { x: aa, y: 220 };
this.curOrientation = 'portrait';
}

WITH THIS SOMEWHERE IN THE BODY
<form name="myform">
<input type="hidden" name="myvalue" value="124" />
</form>

i.e. one would expect the crop area to be the same as in my other
example - 124x220. But it becomes 156x277 instead! Where does those
numbers come from? Why isn't it using the value in my variable "aa",
which takes its value from the hidden form value?

On Nov 27, 10:48 pm, Dave Spurr <david.sp...@gmail.com> wrote:
> Okay, now they both work and the cropper works fine in both examples for me.
>
> -D
>

[aabbcc...@googlemail.com]

To simplify the problem... why does the "portrait" orientation on
http://cropper.freewebspace.com/page1.html not display the crop area
centered, but rather lined up in the top right corner? Also, why is
the initial crop area not 124x220 but 156x277? Any ideas would be very
much appreciated...


On Nov 28, 8:59 am, "aabbcczxcv...@googlemail.com"

[jumping-blueberry]

I just started working with the JavaScript Image Cropper and I am not
really an expert... actually I don't really understand very much in
the cropper.js
It's not the style of Javascript I am used to...
Anyways...

So, I'm planning to integrate the cropper into a project which uses
javascript, php and a bit of ajax.
I want the cropping to work just like it does in adobe photoshop.
From someone from a messagboard I got a code to start with that works
with a fixed ratio of 200x200 px.
Now I want to define the ratio with input fields. These are either
called sizex/sizey (fixed size) or ratiox/ratioy (fixed ratio)
For the cropper itself both kinds of fields behave exactly the same.
The difference will be made later in the PHP-part.
There should also be a way work without any ratio.

Is it really that complicated to remove the "Img.Cropper" and create a
new one?
This would be how I'd do it.
But as I said: I don't program "that way" (OOP) - yet.

Could anyone please give me some tips?

ThanX in advance

On 6 Dez. 2008, 13:03, "aabbcczxcv...@googlemail.com"
<aabbcczxcv...@googlemail.com> wrote:
> To simplify the problem... why does the "portrait" orientation onhttp://cropper.freewebspace.com/page1.htmlnot display the crop area

[David Spurr]

Jumping Blueberry:

I'm not sure what the issue is you're trying to get around? There is
an example Image Manager available in the download which allows you to
remove and reattach the cropper with different settings. You should
just be able to get the values from your form fields to setup the
cropper with, e.g. within the image manager:

attachCropper: function() {
if (this.curCrop == null) {
if( this.getTargOrientation() == 'landscape' ) {

ratioDim = { x: $('myRatioXFieldID').value, y: $
('myRatioYFieldID').value };
this.curOrientation = 'landscape';
} else {
ratioDim = { x: $('myRatioXFieldID').value, y: $
('myRatioYFieldID').value };
this.curOrientation = 'portrait';
}
}
}

-D

On Jan 18, 8:58 pm, jumping-blueberry <jumping-bluebe...@gmx.net>
wrote: