Cropper"

From Documentation
 
(14 intermediate revisions by 4 users not shown)
Line 2: Line 2:
  
 
= Cropper =
 
= Cropper =
 +
{{versionSince |8.6.0}}
  
 
*Java API: <javadoc>org.zkoss.zkmax.zul.Cropper</javadoc>
 
*Java API: <javadoc>org.zkoss.zkmax.zul.Cropper</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zkmax.med.Cropper</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zkmax.med.Cropper</javadoc>
 
*{{ZK EE}}
 
*{{ZK EE}}
[ since 8.6.0 ]
+
 
 +
=Browser Support=
 +
* This component supports IE10+ and modern browsers.
  
 
= Employment/Purpose =
 
= Employment/Purpose =
Line 16: Line 19:
  
 
<source lang="xml" >
 
<source lang="xml" >
    <cropper id="cr1" x="50" y="100" w="100" h="100" onCrop="img1.setContent(event.getImage())" toolbarVisible="true">
+
<cropper x="50" y="100" w="100" h="100" onCrop="img.setContent(event.getMedia())" width="800px"
        <image id="img" src="/test2/img/F86-ZK-3962.jpg"/>
+
toolbarVisible="true" src="swimming-pool.jpg"/>
    </cropper>
+
     <image id="img"/>
     <image id="img1"/>
 
 
</source>
 
</source>
  
 
=Properties and Features=
 
=Properties and Features=
  
 +
==Src==
 +
The src of the image.
 +
 +
==Content==
 +
The content image.
  
 
==AspectRatio==
 
==AspectRatio==
Line 53: Line 60:
  
 
==ToolbarVisible==
 
==ToolbarVisible==
We provide a built in toolbar with <tt>Crop</tt> and <tt>Cancel</tt> feature.
+
This component provides a built-in toolbar with <code>Crop</code> and <code>Cancel</code> buttons. You can make it invisible and create your UI control. Then call <code>crop()</code> and <code>cancel()</code> on your own.
  
 
==CroppedFormat==
 
==CroppedFormat==
Image formats like <tt>image/jpeg</tt> or <tt>image/png</tt> is allowed, Default is set to <tt>image/png</tt>
+
Image formats like <code>image/jpeg</code> or <code>image/png</code> is allowed, Default is set to <code>image/png</code>
  
 
=Supported Events=
 
=Supported Events=
  
{| border="1" | width="100%"
+
{| class='wikitable' | width="100%"
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Event Type</center>
 
! <center>Event Type</center>
 
|-
 
|-
| <center><tt>onChange</tt></center>
+
| <center><code>onChange</code></center>
 
| '''Event:''' <javadoc>org.zkoss.zk.ui.event.Event</javadoc>
 
| '''Event:''' <javadoc>org.zkoss.zk.ui.event.Event</javadoc>
 
Denotes user has resized the selected range.
 
Denotes user has resized the selected range.
 
|-
 
|-
| <center><tt>onChanging</tt></center>
+
| <center><code>onChanging</code></center>
 
| '''Event:''' <javadoc>org.zkoss.zk.ui.event.Event</javadoc>
 
| '''Event:''' <javadoc>org.zkoss.zk.ui.event.Event</javadoc>
 
Denotes user is resizing the selected range.
 
Denotes user is resizing the selected range.
 
|-
 
|-
| <center><tt>onCrop</tt></center>
+
| <center><code>onCrop</code></center>
| '''Event:''' <javadoc>org.zkoss.zk.ui.event.CropEvent</javadoc>
+
| '''Event:''' <javadoc>org.zkoss.zk.ui.event.UploadEvent</javadoc>
 
Denotes user has cropped the image.
 
Denotes user has cropped the image.
 
|}
 
|}
Line 80: Line 87:
 
=Supported Children=
 
=Supported Children=
  
*[[ZK_Component_Reference/Essential_Components/Image | Image]]
+
*NONE
  
 
=Version History=
 
=Version History=
 
{{LastUpdated}}
 
{{LastUpdated}}
  
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-

Latest revision as of 08:04, 16 May 2024

Cropper

Since 8.6.0

Browser Support

  • This component supports IE10+ and modern browsers.

Employment/Purpose

This component allows users to crop a selected range of image.

Example

ZKCompRef Cropper.png

<cropper x="50" y="100" w="100" h="100" onCrop="img.setContent(event.getMedia())" width="800px"
 toolbarVisible="true"  src="swimming-pool.jpg"/>
    <image id="img"/>

Properties and Features

Src

The src of the image.

Content

The content image.

AspectRatio

The width and height of the selected range will be fixed to the specified ratio.

MinWidth

The minimum width of the selected range.

MinHeight

The minimum height of the selected range.

MaxWidth

The maximum width of the selected range.

MaxHeight

The maximum height of the selected range

X

The left offset of the selected range.

Y

The top offset of the selected range.

W

The width of the selected range.

H

The height of the selected range.

ToolbarVisible

This component provides a built-in toolbar with Crop and Cancel buttons. You can make it invisible and create your UI control. Then call crop() and cancel() on your own.

CroppedFormat

Image formats like image/jpeg or image/png is allowed, Default is set to image/png

Supported Events

Name
Event Type
onChange
Event: Event

Denotes user has resized the selected range.

onChanging
Event: Event

Denotes user is resizing the selected range.

onCrop
Event: UploadEvent

Denotes user has cropped the image.

Supported Children

  • NONE

Version History

Last Update : 2024/05/16


Version Date Content
     



Last Update : 2024/05/16

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.