Cropper

From Documentation

Cropper

  • Java API: Cropper
  • JavaScript API: Cropper
  • For IE, only supports 10+
    • Available for ZK:
    • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion ee.png
    [ since 8.6.0 ]
    

    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

    We provide a built in toolbar with Crop and Cancel feature.

    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

    * Image
    

    Version History

    Last Update : 2018/10/30


    Version Date Content
         



    Last Update : 2018/10/30

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