Resize crop area using input fields?

[mhulse]

Hello,

Is there an option/setting that would allow us to resize the crop area
by specifying width and/or height using input fields?

I found this code in the comments of the author site:

attachCropper: function() {
if( this.curCrop != null ) this.curCrop.remove();
this.curCrop = new Cropper.Img('testImage', {
onEndCrop: onEndCrop,
displayOnInit: true,
onloadCoords: { x1: document.getElementById('x1').value, y1:
document.getElementById('y1').value, x2: document.getElementById
('x2').value, y2: document.getElementById('y2').value }
});
},

Not even sure if the above is what I need... Anyway, I would love
have, or turn on, this feature.

Any tips?

Thanks!
Micky

[Dave Spurr]

Hi there,

It's not currently a feature of the cropper to do this at run-time, you
can only set the co-ords at init/load time currently. But it might not
be too difficult to add that functionality.

-D

[mhulse]

Hi Dave! Many thanks for your quick reply, I really appreciate it. :)

> It's not currently a feature of the cropper to do this at run-time, you
> can only set the co-ords at init/load time currently. But it might not
> be too difficult to add that functionality.

Ah, thanks for the clarification!

I would love to implement such a feature. If I find a good JS
solution, I will post the code back here.

I know that we could really use this feature though.

Thanks again!! You wrote an amazing script! Keep up the excellent
work!

Have a nice day.

Cheers,
Micky

[DEfusion]

Actually I've knocked up a little proof of concept of how this would
work, the HTML can be found here:
http://javascript-image-cropper-ui.googlegroups.com/web/example-Update-From-Inputs.htm
-- you'll have to download it and pop it into the tests folder or
change the js paths as appropriate. Apart from the fact that it's
calling what should be (and are described as) private methods in the
cropper class it seems to do what you want - however it will need a
bit more tidying up.

I haven't tested this out with the preview version of the cropper, but
I see no reason why it wouldn't work with that too.

Hope it helps anyway,

-D

[mhulse]

Hi D!

Thanks for the reply, I really appreciate it!

I can't wait to see your code... Unfortunately, I am getting the "The
page you navigated to does not exist." error... This has been
happening to me on other Google groups too:

<http://groups.google.com/group/Is-Something-Broken/browse_thread/
thread/4cfadabcbc4671d3>

Is it just me? Can others view the files in this group?

Anyway, I will keep trying (maybe a different computer will do the
trick).

Thanks D, I will probably be back with questions. :D

Have a great day!
Cheers,
Micky

[mhulse]

Hello, me again!

Dave and D, you folks ROCK!

I put together a demo page:

<http://assets.registerguard.com/demos/crop/example2.html>

I had to link directly to the JS on the demo site... For some reason,
the local copies of the scripts were not loading? I will be sure to
take this page down asap... I just wanted to get your feedback first.

It is not perfect, but it does get the job done.

I had to modify the script so that I could change the crop based on
the width/height fields... I am modifying some code that did not
supply all x* and y* input fields, so the width/height was really my
only option. In other words, I needed to resize the crop area based on
width/height inputs.

Please let me know if you see anything I could improve.

Thanks a billion!!!!
Have a great day.
Micky

(I will take down this page shortly... Sorry for linking directly to
your scripts.)

[illumine]

Hi there I am also trying to implement same functionality. The issue
is when i am image cropper on high slide pop up (this gets open when i
am uploading the image, and this new image comes in to pop up , thus
user uses the crop tool and saves the image).

But when i upload the second image it does not reset the earlier crop
area (PreviewArea, testWrap) i.e. it takes the dimension of previous
image.

I tried using two function

var cropperObject = null;

var getCropperObject = function(imageId, previewAreaId) {
new Cropper.ImgWithPreview(
imageId,
{
minWidth: 175,
minHeight: 120,
ratioDim: { x: 200, y: 120 },
displayOnInit: true,
onEndCrop: onEndCrop,
previewWrap: previewAreaId
}
)
};

function attachCropper ()
{

detachCropper ();
cropperObject = getCropperObject ("testImage", "previewArea");
$("imgCrop_testImage").src = $("testImage").src;
}

function detachCropper ()
{

if(cropperObject)
{
alert("detachCropper");
cropperObject.reset ();
delete cropperObject;
cropperObject = null;
$("imgCrop_testImage").src = "";
$("testWrap").innerHTML = "<img id='testImage' />";
}
}

but it is showing cropperObject is coming out to be undefined so it is
not going in if() condetion....and detachCropper does not work.... I
am trying to resize cropper in run time.

and i m changing src in run time using javascript.

please help me out....thanks a lot.