Crop - AppDaddy-Software-Solutions-Inc/framework-markup-language GitHub Wiki

Overview

The CROP transform is used to transform an Image Datasource. The CROP transform is used to crop a CAMERA, FILEPICKER or Data Uri image field using a the specified offset (x, y) position, width and height.

Restrictions:

Attributes

Name Type Default Description Req
id string Datasource id to allow binding ✔
source string The field name of the image source. This can also be a bound {} value ✔
target string The field name of the image target. If omitted, it uses the source field (overwrite)
enabled bool true If false, the transform is not applied
x int 0 The x offset from the top left corner of the source image
y int 0 The y offset from the top left corner of the source image
width int The width in pixels to crop from the x,y offset ✔
height int The height in pixels to crop from the x,y offset ✔

Examples

Example #1

This example shows how to select an image from a filepicker, mantain the original image in "fp1" and transform the chosen image using CROP.

Partial Example (important bits)

<FML>
<FILEPICKER id="fp1" allow=".jpg,.png">
	<DATA id="ds1">
		<CROP source="{fp1.data.file}" x="{x}" y="{y}" width="{w}" height="{h}"/>	
	</DATA>
</FILEPICKER>
</FML>

Full Example

<FML>
    <!-- File Picker Data Source -->
    <FILEPICKER id="fp1" allow=".jpg,.png">
        <DATA id="ds1">
            <CROP source="{fp1.data.file}" x="{x}" y="{y}" width="{w}" height="{h}"/>   
        </DATA>
    </FILEPICKER>

    <PAD top="20"/>

    <!-- This is the original image -->
    <TEXT size="12" label="ORIGINAL"/>
    <BOX expand="false" width="200" border="all" pad="10" radius="5" layout="stack" center="true">
        <IMAGE url="{fp1.data.file}"/>
        <BUSY visible="{ds2.busy}" size="30"/>
    </BOX>
    <PAD top="10"/>
    <TEXT size="12" label="CROPPED"/>

    <!-- This is the transformed image -->
    <BOX expand="false" width="200" border="all" pad="10" radius="5" layout="stack" center="true">
        <IMAGE url="{ds1.data.file}"/>
        <BUSY visible="{ds1.busy}" size="30"/>
    </BOX>

    <PAD top="10"/>

    <ROW expand="false">
    
        <!-- user specified offsets --> 
        <INPUT id="x" hint="x offset" value="0"   allow="0-9" width="60"/>
        <PAD left="2"/>
        <INPUT id="y" hint="y offset" value="0"   allow="0-9" width="60"/>

        <!-- user specified width and height -->
        <PAD left="2"/>
        <INPUT id="w" hint="width"    value="100" allow="0-9" width="60"/>
        <PAD left="2"/>
        <INPUT id="h" hint="height"   value="100" allow="0-9" width="60"/>
        
    </ROW>

    <PAD top="10"/>

    <LINK onclick="fp1.start()">
        <ICON icon="add_a_photo" visible="=!{fp1.busy}"/>
    </LINK>         
</FML>

logo See it in Action

Other Widgets You May Find Useful

Framework Markup Language is an open source programming language created by AppDaddy Software Solutions Inc. FML and is licensed under a fair source license agreement and is maintained by a community of developers.

⚠️ **GitHub.com Fallback** ⚠️