Attempting to modify existing ASPX C# to allow zoom on TIFF image

Question

I have a page that displays documents stored as Tiff images. Sometimes the image as displayed is not clear enough for the users to be certain they have the correct document. They need a zoom function.

The original code looks like this:

public void GetPage(int page)
    {
        var c = Request.Cookies["TiffViewer"];
        string key = c["Key"];
        if (Cache[key] != null)
        {
            using (MemoryStream ms = new MemoryStream((byte[])Cache[key]))
            {
                using (Bitmap img = new Bitmap(ms))
                {
                    img.SelectActiveFrame(FrameDimension.Page, page);
                    using (Bitmap b = new Bitmap(img, new Size(img.Width / 2, img.Height / 2)))
                    {
                        using (Graphics gr = Graphics.FromImage(b))
                        {
                            var gray_matrix = new float[][] { 
                                new float[] { 0.299f, 0.299f, 0.299f, 0, 0 }, 
                                new float[] { 0.587f, 0.587f, 0.587f, 0, 0 }, 
                                new float[] { 0.114f, 0.114f, 0.114f, 0, 0 }, 
                                new float[] { 0,      0,      0,      1, 0 }, 
                                new float[] { 0,      0,      0,      0, 1 }};

                            using (var ia = new ImageAttributes())
                            {
                                ia.SetColorMatrix(new ColorMatrix(gray_matrix));
                                ia.SetThreshold(0.8f, ColorAdjustType.Default);
                                gr.DrawImage(b, new Rectangle(0, 0, b.Width, b.Height), 0, 0, b.Width, b.Height, GraphicsUnit.Pixel, ia);
                            }
                        }
                        b.Save(Response.OutputStream, ImageFormat.Jpeg);
                    }
                }
            }
        }
    }

I have tried a number of different manipulations of the bitmap and drawimage. The closest I have come to getting a 'zoom' was by replacing the gr.DrawImage based on this article: http://stackoverflow.com/questions/2319983/resizing-an-image-in-asp-net-without-losing-the-image-quality

The replaced gr.DrawImage statement looks like:

 gr.DrawImage(b, new Rectangle(0, 0, b.Width*2, b.Height*2), new Rectangle(0, 0, b.Width, b.Height), GraphicsUnit.Pixel);

This causes the text image to be much larger, but now only part of the image is visible. The area for the display of the image remains static. I either need to make the 'display area' larger, or somehow allow scrolling on the displayed image. Suggestions welcome.

Answer 1

I managed to come up with a solution that is not perfect, but allows users to get more details of the documents they're trying to see.

Two controls were added to the aspx page:

<div class="Controls">
    <asp:Label ID="info" runat="server" Text=""></asp:Label>
    <asp:Button ID="Return" runat="server" Text="Return" onclick="Return_Click" />
    <asp:Button ID="Download" runat="server" Text="Download" onclick="Download_Click" />
    <asp:Button ID="Stamp" runat="server" Text="Stamp" onclick="Stamp_Click" />
    <asp:Button ID="Print" runat="server" Text="Print" onclick="Print_Click" />
    <asp:Button ID="Zoom_In" runat="server" Text="-" onclick="ZoomIn_Click" />
    <asp:Button ID="Zoom_Out" runat="server" Text="+" onclick="ZoomOut_Click" />
</div>

Also on the aspx page I modified the script that renders the tiff file to add the Size change percent:

<script type="text/javascript">
    var html;
    var cookie = c("TiffViewer");
    var percent = '<%= Request.QueryString["ChangeSize"]%>';
    var ImHeight = cookie["ImHeight"];
    var ImWidth = cookie["ImWidth"];
    for (var i = 1; i < +cookie["PageCount"] + 1; i++) {
        $("#Pages").append("<a href='#page/" + (i - 1) + "'>" + i + "</a><br />");
        if (ImHeight == 0 || ImWidth == 0) {
            html = "<div class='slide' id='slide' overflow='scroll'><br /><b>Page {0}</b><br /><img id='p{1}' {2} /></div>";
            $("#frames").append(String.format(html, i, i - 1, (i == (1) || i == (+cookie["PageCount"]) ? "src='Viewer.aspx?p=" + (i - 1) + "&" + "ChangeSize=" + percent + "'" : "")));
        }
        else {
            var adjHeight = ImHeight / 2;
            var adjWidth = ImWidth / 2;
            html = "<div class='slide' id='slide' height='" + adjHeight.toString() + "'><br /><b>Page {0}</b><br /><img height='" + adjHeight.toString() + "' width='" + adjWidth.toString() + "' id='p{1}' {2} /></div>";
            $("#frames").append(String.format(html, i, i - 1, (i == (1) || i == (+cookie["PageCount"]) ? "src='Viewer.aspx?p=" + (i - 1) + "&" + "ChangeSize=" + percent +  "'" : "")));
        }
    }
</script>

On the code behind page I stored the values in cookies in the "using (var ia = new ImageAttributes())" section of code:

    using (var ia = new ImageAttributes())
{
    ia.SetColorMatrix(new ColorMatrix(gray_matrix));
    ia.SetThreshold(0.8f, ColorAdjustType.Default);
    //gr.DrawImage(b, new Rectangle(0, 0, (int)(b.Width * (1 + (percent / 100))), (int)(b.Height * (1 + (percent / 100)))), 0, 0, (int)(b.Width * (1 + (percent / 100))), (int)(b.Height * (1 + (percent / 100))), GraphicsUnit.Pixel, ia);
    gr.DrawImage(b, new Rectangle(0, 0, (int)(b.Width * (1 + (percent / 100))), (int)(b.Height * (1 + (percent / 100)))), new Rectangle(0, 0, (int)(b.Width * (1 + (percent / 100))), (int)(b.Height * (1 + (percent / 100)))), GraphicsUnit.Pixel);
    //gr.DrawImage(b, new Rectangle(0, 0, (int)(b.Width * (1 + (percent / 100))), (int)(b.Height * (1 + (percent / 100)))), new Rectangle(0, 0, b.Width, b.Height), GraphicsUnit.Pixel);
    string myHeight;
    string myWidth;
    ImHeight = (int)(b.Height * (1 + (percent / 100)));
    ImWidth = (int)(b.Width * (1 + (percent / 100)));
    myHeight = ImHeight.ToString(); ;
    myWidth = ImWidth.ToString(); ;
    Response.Cookies["TiffViewer"]["ReturnURL"] = c["ReturnURL"];
    Response.Cookies["TiffViewer"]["Key"] = c["Key"];
    Response.Cookies["TiffViewer"]["ImHeight"] = myHeight;
    Response.Cookies["TiffViewer"]["ImWidth"] = myWidth;
    Response.Cookies["TiffViewer"]["PageCount"] = c["PageCount"];

}

For the two new controls I added the following click procedures:

    protected void ZoomIn_Click(object sender, EventArgs e)
{
    var c = Request.Cookies["TiffViewer"];
    string key = c["Key"];
    if (Cache[key] != null)
    {
        float chg = -10.0f;
        float percent = 0.0f;
        float.TryParse(Request.QueryString["ChangeSize"], out percent);
        percent += chg;
        int ImHeight = 0;
        int.TryParse(c["ImHeight"], out ImHeight);
        int ImWidth = 0;
        int.TryParse(c["ImWidth"], out ImWidth);
        string myHeight = "0";
        string myWidth = "0";
        if (ImHeight > 0 && ImWidth > 0)
        {
            ImHeight = (int)(ImHeight * (1 + (percent / 100)));
            myHeight = ImHeight.ToString();
            ImWidth = (int)(ImWidth * (1 + (percent / 100)));
            myWidth = ImWidth.ToString();
        }
        Response.Cookies["TiffViewer"]["ReturnURL"] = c["ReturnURL"];
        Response.Cookies["TiffViewer"]["Key"] = c["Key"];
        Response.Cookies["TiffViewer"]["ImHeight"] = myHeight;
        Response.Cookies["TiffViewer"]["ImWidth"] = myWidth;
        Response.Cookies["TiffViewer"]["PageCount"] = c["PageCount"];
        Response.Redirect("~/Viewer/Viewer.aspx?ChangeSize=" + percent.ToString());
    }
}

protected void ZoomOut_Click(object sender, EventArgs e)
{
    var c = Request.Cookies["TiffViewer"];
    string key = c["Key"];
    if (Cache[key] != null)
    {
        float chg = 10.0f;
        float percent = 0.0f;
        float.TryParse(Request.QueryString["ChangeSize"], out percent);
        percent += chg;
        int ImHeight = 0;
        int.TryParse(c["ImHeight"], out ImHeight);
        int ImWidth = 0;
        int.TryParse(c["ImWidth"], out ImWidth);
        string myHeight = "0";
        string myWidth = "0";
        if (ImHeight > 0 && ImWidth > 0)
        {
            ImHeight = (int)(ImHeight * (1 + (percent / 100)));
            myHeight = ImHeight.ToString();
            ImWidth = (int)(ImWidth * (1 + (percent / 100)));
            myWidth = ImWidth.ToString();
        }
        Response.Cookies["TiffViewer"]["ReturnURL"] = c["ReturnURL"];
        Response.Cookies["TiffViewer"]["Key"] = c["Key"];
        Response.Cookies["TiffViewer"]["ImHeight"] = myHeight;
        Response.Cookies["TiffViewer"]["ImWidth"] = myWidth;
        Response.Cookies["TiffViewer"]["PageCount"] = c["PageCount"];
        Response.Redirect("~/Viewer/Viewer.aspx?ChangeSize=" + percent.ToString());
    }
}

Why is this code imperfect? In part because other parts of this code is designed to render the tiff the height of the window. So the tiff is never rendered taller, only wider by this code. So though this is inelegant it does let the users "zoom" to see the details of the documents better.