1: <asp:Image ID="Image1" runat="server" Height="350" ImageUrl="http://cdn.roboton.com/rbt/Images/Demos/dogs.jpg" />
2: <asp:ImageCropper ID="ImageCropper1" TargetControlID="Image1" runat="server">
3: <Options>
4: <AspectRatio Width="3" Height="2" />
5: <Image Width="345" Height="245" />
6: </Options>
7: <Listeners>
8: <SelectionChange Fn="onClientChanged" />
9: </Listeners>
10: </asp:ImageCropper>
1 function onClientChanged(img, selection) {
2 if (!selection.width || !selection.height)
3 return;
4
5 //Selection positions
6 $('#xPos').val(selection.x1);
7 $('#yPos').val(selection.y1);
8 $('#width').val(selection.width);
9 $('#height').val(selection.height);
10
11 //Calculate scaling properties and show
12 var scaleX = 150 / selection.width;
13 var scaleY = 100 / selection.height;
14 $('#imgPreview img').css({
15 width: Math.round(scaleX * 345),
16 height: Math.round(scaleY * 245),
17 marginLeft: -Math.round(scaleX * selection.x1),
18 marginTop: -Math.round(scaleY * selection.y1)
19 });
20 }