Rank: Member
Groups: Member
Joined: 9/19/2007(UTC)
Posts: 4
|
Hi I am using GraphicsMill.net 4.0 to make a web based application with a section that allows users to upload an image and crop it. I have pretty much copied the image cropping example that ships with the control the only new thing I have added is that once cropped I want to zoom the image to fit the control. My problem is that once the user crops the image only part of the remaining image is displayed (in IE or FireFox). However if I save the image from the bitmapviewer, either programmatically or by right clicking and saving the resulting image is correct and is what was cropped. In the attachments 1.jpg shows the area I have selected to crop and 2.jpg shows the erroneous display and 3.jpg shows the correct output. Here is the code I have used: croptest.aspx Code:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="croptest.aspx.vb" Inherits="croptest" %>
<%@ Register Assembly="Aurigma.GraphicsMill.WebControls" Namespace="Aurigma.GraphicsMill.WebControls" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head runat="server">
<title>Untitled Page</title>
<script language="javascript">
var bitmapViewer1, rectangleRubberband1;
function cancel(){
bitmapViewer1.setRubberband("");
}
function crop(){
if (bitmapViewer1.getStatus() != "Busy"){
var r=rectangleRubberband1.getRectangle();
if (r.width < 1 || r.height < 1){
return;
}
bitmapViewer1.invokeRemoteMethod("applyCrop", new Array(r.left, r.top, r.width, r.height));
}
else{
alert("Please wait until previous operation has completed.");
}
}
window.onload=function(){
bitmapViewer1 = document.getElementById("<%=BitmapViewer1.ClientID%>");
rectangleRubberband1 = document.getElementById("<%=RectangleRubberband1.ClientID%>");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<cc1:BitmapViewer ID="BitmapViewer1" runat="server" BackColor="Red" BorderStyle="None" Height="227px" Rubberband="RectangleRubberband1" ScrollBarsStyle="Auto" Width="227px">
</cc1:BitmapViewer>
<cc1:RectangleRubberband ID="RectangleRubberband1" runat="server" GripsVisible="True" MaskVisible="True" ResizeMode="Proportional" />
<input id="Button3" type="button" value="Crop" onclick="crop();" />
<input id="Button4" type="button" value="Cancel" onclick="cancel();" />
</div>
</form>
</body>
</html>
croptest.aspx.vb Code:
Partial Class croptest
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
BitmapViewer1.Bitmap.Load(Server.MapPath("test.jpg"))
BitmapViewer1.Zoom = BitmapViewer1.Width.Value / BitmapViewer1.Bitmap.Width
BitmapViewer1.Bitmap.UndoRedoEnabled = True
End If
End Sub
<Aurigma.GraphicsMill.WebControls.RemoteScriptingMethod()> _
Public Sub applyCrop(ByVal top As Integer, ByVal left As Integer, ByVal width As Integer, ByVal height As Integer)
If Not BitmapViewer1.Bitmap.IsEmpty Then
'crop the image to the size of the rectangle
BitmapViewer1.Bitmap.Transforms.Crop(top, left, width, height)
'if cropped the image must be square so we only need width OR height
'we want to zoom it fill the control so
'control width(227) / image width = zoom level needed
BitmapViewer1.Zoom = BitmapViewer1.Width.Value / BitmapViewer1.Bitmap.Width
End If
End Sub
End Class
Edited by user Monday, December 17, 2007 12:40:18 PM(UTC)
| Reason: Not specified Vestan Pance attached the following image(s):
|
|
|
|
|
|
Rank: Advanced Member
Groups: Member
Joined: 6/5/2007(UTC)
Posts: 57
|
Hello Vestan Pance, Thank you for your report, we confirm the problem. However you can easily workaround this issue by moving code which changes zoom of BitmapViewer from server side to client side. I modified your sample to illustrate the idea: CropTest.aspxCode:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="croptest.aspx.vb" Inherits="croptest" %>
<%@ Register Assembly="Aurigma.GraphicsMill.WebControls" Namespace="Aurigma.GraphicsMill.WebControls" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script language="javascript">
var bitmapViewer1, rectangleRubberband1;
var updateRectangle = false;
function cancel(){
bitmapViewer1.setRubberband("");
}
function crop(){
if (bitmapViewer1.getStatus() != "Busy"){
var r=rectangleRubberband1.getRectangle();
if (r.width < 1 || r.height < 1){
return;
}
bitmapViewer1.invokeRemoteMethod("applyCrop", new Array(r.left, r.top, r.width, r.height));
updateRectangle=true;
}
else{
alert("Please wait until previous operation has completed.");
}
}
function bitmapViewer1_StatusChanged(){
var s = bitmapViewer1.getStatus();
if (updateRectangle && s != "Busy"){
updateRectangle = false;
bitmapViewer1.setZoom(bitmapViewer1.clientWidth/bitmapViewer1.bitmap.getWidth());
rectangleRubberband1.setRectangle(new Rectangle(0, 0, bitmapViewer1.bitmap.getWidth(), bitmapViewer1.bitmap.getHeight()))
}
}
window.onload=function(){
bitmapViewer1 = document.getElementById("<%=BitmapViewer1.ClientID%>");
bitmapViewer1.addStatusChanged(bitmapViewer1_StatusChanged);
rectangleRubberband1 = document.getElementById("<%=RectangleRubberband1.ClientID%>");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<cc1:BitmapViewer ID="BitmapViewer1" runat="server" BackColor="Red" BorderStyle="None" Height="227px" Rubberband="RectangleRubberband1" ScrollBarsStyle="Auto" Width="227px">
</cc1:BitmapViewer>
<cc1:RectangleRubberband ID="RectangleRubberband1" runat="server" GripsVisible="True" MaskVisible="True" ResizeMode="Proportional" />
<input id="Button3" type="button" value="Crop" onclick="crop();" />
<input id="Button4" type="button" value="Cancel" onclick="cancel();" />
</div>
</form>
</body>
</html>
CropTest.aspx.vbCode:
Partial Class croptest
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
BitmapViewer1.Bitmap.Load(Server.MapPath("test.jpg"))
BitmapViewer1.Zoom = BitmapViewer1.Width.Value / BitmapViewer1.Bitmap.Width
'BitmapViewer1.Bitmap.UndoRedoEnabled = True
End If
End Sub
<Aurigma.GraphicsMill.WebControls.RemoteScriptingMethod()> _
Public Sub applyCrop(ByVal top As Integer, ByVal left As Integer, ByVal width As Integer, ByVal height As Integer)
If Not BitmapViewer1.Bitmap.IsEmpty Then
'crop the image to the size of the rectangle
BitmapViewer1.Bitmap.Transforms.Crop(top, left, width, height)
'if cropped the image must be square so we only need width OR height
'we want to zoom it fill the control so
'control width(227) / image width = zoom level needed
'BitmapViewer1.Zoom = BitmapViewer1.Width.Value / BitmapViewer1.Bitmap.Width
End If
End Sub
End Class
Edited by user Monday, December 17, 2007 12:40:49 PM(UTC)
| Reason: Not specified |
Sincerely yours,
Sergey Peshekhonov.
Aurigma Technical Support Team.
|
|
|
|
|
|
Rank: Member
Groups: Member
Joined: 9/19/2007(UTC)
Posts: 4
|
Sergey, thank you so much for taking the time to help, and answering so quickly, your solution works perfectly. Thank you.
|
|
|
|
|
|
Forum Jump
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.