Welcome Guest! You need to login or register to make posts.

Notification

Icon
Error

Options
Go to last post Go to first unread
Vestan Pance  
#1 Posted : Wednesday, September 19, 2007 5:52:26 AM(UTC)
Vestan Pance

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):
1.jpg
2.jpg
3.jpg
Sergey Peshekhonov  
#2 Posted : Wednesday, September 19, 2007 5:57:49 PM(UTC)
Sergey Peshekhonov

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

Edited by user Monday, December 17, 2007 12:40:49 PM(UTC)  | Reason: Not specified

Sincerely yours,

Sergey Peshekhonov.

Aurigma Technical Support Team.

Vestan Pance  
#3 Posted : Thursday, September 20, 2007 2:01:53 AM(UTC)
Vestan Pance

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.
Users browsing this topic
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.