Cropped image not displaying properly - General Discussion

Welcome Guest

Search | Active Topics | Members

Aurigma Forums » Graphics Mill for .NET » General Discussion » Cropped image not displaying properly

Cropped image not displaying properly

Options

Previous Topic · Next Topic

Vestan Pance

Posted: Wednesday, September 19, 2007 1:52:26 PM

Rank: Member
Groups: Member

Joined: 9/19/2007
Posts: 4
Points: 0

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

Vestan Pance attached the following image(s):

Sergey Peshekhonov

Posted: Thursday, September 20, 2007 1:57:49 AM

Rank: Advanced Member
Groups: Member

Joined: 6/6/2007
Posts: 57
Points: 45

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.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 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.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

Sincerely yours,
Sergey Peshekhonov.

Aurigma Technical Support Team.

Vestan Pance

Posted: Thursday, September 20, 2007 10:01:53 AM

Rank: Member
Groups: Member

Joined: 9/19/2007
Posts: 4
Points: 0

Sergey, thank you so much for taking the time to help, and answering so quickly, your solution works perfectly. Thank you.

Users browsing this topic

Guest

Aurigma Forums » Graphics Mill for .NET » General Discussion » Cropped image not displaying properly

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.