ImageCropper change minHeight and minWidth

UI Components for JSF
Post Reply
User avatar
fiorenzino
Posts: 32
Joined: 26 Sep 2009, 12:00

13 Aug 2010, 13:11

Hi,

I need to change the minHeight and minWidth of the component "ImageCropper".
The default is 50x50, i would 20x50.

how can I do ?

thanks in advance
bye

Fiorenzo

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

13 Aug 2010, 15:29

I think what you are looking for is;

http://code.google.com/p/primefaces/iss ... ail?id=496

User avatar
fiorenzino
Posts: 32
Joined: 26 Sep 2009, 12:00

16 Aug 2010, 11:18

Ok, waiting for future releases...

Some hacking like this?

Code: Select all

var ic = new YAHOO.widget.ImageCropper('xxxxxx');
var resize = ic.getResizeObject();
resize.set('minHeight', 100);
resize.set('maxHeight', 100);
resize.set('minWidth', 100);
resize.set('maxWidth', 100);
But i don't want insert the name of component inside (xxxxx).

Or i need change /primefaces_resource/1.1/yui/imagecropper/imagecropper-min.js min dimension inside?

bye

fiorenzo

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

16 Aug 2010, 12:59

You can use widgetVar attribute of imageCropper to get a reference to the underlying YAHOO.widget.ImageCropper instance. So instead of var ic, it would be the widgetVar you've defined. I haven't tried this but checked the code so it should work.

User avatar
fiorenzino
Posts: 32
Joined: 26 Sep 2009, 12:00

16 Aug 2010, 14:06

Hi,

i tried:

Code: Select all

<p:imageCropper id="cropper"  value="#{imageCropperBean.croppedImage}"  image="/images/img2ocr.jpg" widgetVar="crop"/>
<script type="text/javascript">
jQuery(crop.jqId).resize.set('minHeight', 10);
jQuery(crop.jqId).resize.set('minWidth', 10);
</script>

also

Code: Select all

<script type="text/javascript">
$(crop.jqId).resize.set('minHeight', 10);
$(crop.jqId).resize.set('minWidth', 10);
</script>
but it don't works.

Code: Select all

Errore: crop is not defined
File sorgente: http://localhost:8080/gestionepersonale/index.jsf
Riga: 39
what is the correct syntax ?

thank's in advance..
Fiorenzo

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

16 Aug 2010, 16:53

No jquery used in imagecropper currently, so try this;

Code: Select all

crop.set('minHeight', 100);
More info;

http://developer.yahoo.com/yui/docs/YAH ... opper.html

User avatar
fiorenzino
Posts: 32
Joined: 26 Sep 2009, 12:00

17 Aug 2010, 01:07

Hi,

don't works..

the final html code is:

Code: Select all

<script type="text/javascript"> 
//<![CDATA[
YAHOO.util.Event.addListener(window, 'load', function() {
crop = new YAHOO.widget.ImageCropper('form:cropper_image',{initialXY:[99,326],initWidth:421,initHeight:65});
crop.on('moveEvent', PrimeFaces.widget.ImageCropperUtils.attachedCroppedArea, {hiddenFieldId:"form:cropper_coords"});
});
 
//]]>
</script><div id="form:cropper"><img id="form:cropper_image" src="/gestionepersonale/images/bolletta.jpg" /><input type="hidden" id="form:cropper_coords" name="form:cropper_coords" value="" /></div> 

<script type="text/javascript"> 
//<![CDATA[
 
crop.set('minHeight', 100);
 
//]]>
</script> 
the error is the same:

Code: Select all

Errore: crop is not defined
File sorgente: http://localhost:8080/gestionepersonale/index.jsf
Riga: 39

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

17 Aug 2010, 16:07

Your code should execute after document is ready.

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

25 Aug 2010, 03:12

This is new imagecropper;

http://www.primefaces.org/labs/ui/imageCropper.jsf

It supports;

- initial crop area
- minSize
- maxSize
- backgroundColor
- backgroundOpacity
- aspectRatio

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 28 guests