Image Cropper Tool
This example demonstrates how easily you can create an Image cropper tool with only
approx 50 lines of code in the codebehind + markup.
Just move or resize the Panel and click the Crop button to have only that "slice"
cut out and presented. The output Image will be opened in a separate Window, but you could
easily modify the original if you want that instead.
Markup (ASPX/.aspx)
1:
2:
3: <gaia:Button
4: ID="zButtonCrop"
5: runat="server"
6: OnClick="zButtonCrop_Click"
7: Text="Crop the selected part of the Image" />
8:
9: <div id="outer">
10: <div id="inner">
11: <gaia:Image
12: ID="zImage"
13: runat="server"
14: Width="650px"
15: Height="421px"
16: style="position: absolute;"
17: ImageUrl="crop.jpg"
18: AlternateText="Crop"/>
19:
20: <gaia:Panel
21: ID="zPanelCrop"
22: runat="server"
23: CssClass="crop-tool"
24: Width="200px"
25: Height="200px"
26: style="left: 150px;top: 180px;">
27: <gaia:Panel
28: ID="zPanelCropHandle"
29: Width="100%"
30: Height="10px"
31: CssClass="crop-handle"
32: runat="server"></gaia:Panel>
33:
34: </gaia:Panel>
35:
36: </div>
37: </div>
38:
39: <gaia:Window
40: ID="zWindowResult"
41: Caption="Cropped Image"
42: runat="server"
43: Modal="true"
44: Minimizable="false"
45: Maximizable="false"
46: Draggable="true"
47: Resizable="false"
48: CenterInForm="true"
49: OpacityWhenMoved="1"
50: Visible="false">
51: <gaia:DynamicImage
52: id="zCroppedImage"
53: runat="server"
54: OnRetrieveImage="zCroppedImage_RetrieveImage" />
55: </gaia:Window>
56:
57: