Click here to Skip to main content
Click here to Skip to main content

ASP.NET Multipage TIFF Viewer with Thumbnails

By , 9 Mar 2010
Rate this:
Please Sign up or sign in to vote.
ASPNET_TIFFViewer

Introduction

There are many 3rd party TIF Viewers out there, but why pay when this is built into .NET already using System.Drawing.Image (unless you need to be able to support JPEG compressed TIF files, which GDI doesn't support). Save yourself some time and money and start here.

Background

It's time for me to give back to the community out there. I look many places before I start building an app (why reinvent the wheel) and haven't found one that does exactly this. I'm hoping to save someone some time and money. This article gives you a basis and code example on how to create a multipage TIF Viewer using ASP.NET. The web page will display thumbnails on one side and an enlarged image on the other. Clicking each page will use some JavaScript to update the src of the large image.

Using the Code

The concept consists of 3 main things:

  1. An ASP page to call that takes the file path parameter and does the work of configuring thumbnails and big image (Default.aspx in the download)
  2. A TIF class used to pull pages out of the TIF file
  3. An ASP page to display the image (ViewImg.aspx in the download)

Default.aspx

This page has only one required parameter, which is FILE in the query string. FILE is the absolute path to the file. I've also set up a paging mechanism so that large files load quicker and take less system resources to iterate. There's also an optional STARTPAGE that can be passed to the query string, which indicates which page to start at (for paging). This pager size is configurable in the code-behind. The code-behind also sets up the JavaScript to change src attribute of the large image as well as the attributes needed for any TIF rotation or zoom of the big image. The aspx page includes a placeholder that adds an asp:image object to a placeholder for the thumbnails (querystring parameters are passed to that src for thumbnail size). That image has a src of another page (to be explained later). This same concept is applied for the BIG image.

//Determine Start/End Pages
int StartPg = 1;
if (Request.QueryString["StartPage"] != null)
    StartPg = System.Convert.ToInt16(Request.QueryString["StartPage"]);
int BigImgPg = StartPg;
int EndPg = StartPg + (PagerSize - 1);
if (EndPg > TotalTIFPgs)
    EndPg = TotalTIFPgs;
//Add/configure the thumbnails
while (StartPg <= EndPg)
{
    Label lbl = new Label();
    //Add break for new row of thumbnails
    if (StartPg % 4 == 0 && StartPg != 0) lbl.Text = "&nbsp;<br />";
    else lbl.Text = "&nbsp;";
    //Add new image and set source and click and mouseover events
    Image Img = new Image(); 
    Img.BorderStyle = (BorderStyle)Enum.Parse(typeof(BorderStyle), "Solid");
    Img.BorderWidth = Unit.Parse("1");
    Img.Attributes.Add("onClick", "ChangePg(" + StartPg.ToString() + ");");
    Img.Attributes.Add("onmouseover", "this.style.cursor='hand';");
    Img.ImageUrl = "ViewImg.aspx?FilePath=" + FilePath + "&Pg=" + (StartPg).ToString() + 
        "&Height=" + DefaultThumbHieght.ToString() + "&Width=" + DefaultThumbWidth;
    _plcImgsThumbs.Controls.Add(Img);
    _plcImgsThumbs.Controls.Add(lbl);
        StartPg++;
}

//Bind big img
Image BigImg = new Image();
BigImg.BorderStyle = (BorderStyle)Enum.Parse(typeof(BorderStyle), "Solid");
BigImg.BorderWidth = Unit.Parse("1");
BigImg.ID = "_imgBig";
BigImg.ImageUrl = "ViewImg.aspx?View=1&FilePath=" + FilePath + "&Pg=" + 
    BigImgPg.ToString() + "&Height=" + DefaultBigHieght.ToString() + "&Width=" +
    DefaultBigWidth.ToString();
_plcBigImg.Controls.Add(BigImg);

ViewImg.aspx

This page takes a few parameters (all these parameters are supplied and configured by default.aspx.): FILEPATH (passed from default.aspx), HEIGHT (height of the image), WIDTH (width of the image to display), PG (the page to display), and ROTATE (the rotation to apply to the image before displaying it). The page simply uses the TIF class to get an image object and saves it to the outputstream in a JPG format so that it can be viewed in the browser.

protected void Page_Load(object sender, EventArgs e)
{
    System.Drawing.Image TheImg = new App.Files.TIF(
        Request.QueryString["FilePath"]).GetTiffImageThumb(
        System.Convert.ToInt16(Request.QueryString["Pg"]),
        System.Convert.ToInt16(Request.QueryString["Height"]),
        System.Convert.ToInt16(Request.QueryString["Width"]));
    if (TheImg != null)
    {
        switch (Request.QueryString["Rotate"])
        {
            case "90":
                TheImg.RotateFlip(System.Drawing.RotateFlipType.Rotate90FlipNone);
                break;
            case "180":
                TheImg.RotateFlip(System.Drawing.RotateFlipType.Rotate180FlipNone);
                break;
            case "270":
                TheImg.RotateFlip(System.Drawing.RotateFlipType.Rotate270FlipNone);
                break;
        }

        Response.ContentType = "image/jpeg";
        TheImg.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);
        TheImg.Dispose();
    }
}

TIF.cs

This class does the work of accessing the TIF file. The main method here, for this project, is GetTIFFImageThumb, where you supply the page number (the Active Frame from the FrameDimension) and the size of the thumbnail returned, while accounting for the aspect ratio of the page. It opens the file and loads the page in question to a memorystream object and returns a system.drawing.image object from that stream that can be used later (like in the ViewImg.aspx page). I've got a few other methods and objects in the download that may be handy for others (and for my larger project). The only word of caution with respect to your file and the system.drawing.image object is to always make sure that you properly dispose of the object when finished; otherwise you risk a file in use error when you try to work with it later.

public Image GetTiffImageThumb(int PageNum, int ImgWidth, int ImgHeight)
{
if ((PageNum < 1) | (PageNum > this.PageCount))
{
     throw new InvalidOperationException("Page to be retrieved is outside the bounds" +
         "of the total TIF file pages. Please choose a page number that exists.");
}
MemoryStream ms = null;
Image SrcImg = null;
Image returnImage = null;
try
{
    SrcImg = Image.FromFile(this.m_FilePathName);
    ms = new MemoryStream();
    FrameDimension FrDim = new FrameDimension(SrcImg.FrameDimensionsList[0]);
    SrcImg.SelectActiveFrame(FrDim, PageNum-1);
    SrcImg.Save(ms, ImageFormat.Tiff);
    // Prevent using images internal thumbnail
    SrcImg.RotateFlip(System.Drawing.RotateFlipType.Rotate180FlipNone);
    SrcImg.RotateFlip(System.Drawing.RotateFlipType.Rotate180FlipNone);
    //Save Aspect Ratio
    if (SrcImg.Width <= ImgWidth) ImgWidth = SrcImg.Width;
    int NewHeight = SrcImg.Height * ImgWidth / SrcImg.Width;
    if (NewHeight > ImgHeight)
    {
        // Resize with height instead
        ImgWidth = SrcImg.Width * ImgHeight / SrcImg.Height;
        NewHeight = ImgHeight;
    }
//Return Image
returnImage = Image.FromStream(ms).GetThumbnailImage(ImgWidth, NewHeight, null,
    IntPtr.Zero);
}
catch (Exception ex)
{
    throw ex;
}
finally
{
    SrcImg.Dispose();
    GC.Collect();
    GC.WaitForPendingFinalizers();
}
return returnImage;
}

History

  • 9th March, 2010: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

ChadFolden1

United States United States
No Biography provided

Comments and Discussions

 
GeneralMy vote of 10 PinmemberMotlatsij7-Feb-14 1:42 
QuestionGetting error when i upload in http testing link PinmemberMember 1051521313-Jan-14 0:28 
AnswerRe: Getting error when i upload in http testing link Pinmemberg wildin6-Mar-14 9:14 
GeneralRe: Getting error when i upload in http testing link Pinmemberg wildin7-Mar-14 3:18 
GeneralNot able to given exact path PinmemberMember 105152139-Jan-14 21:01 
QuestionThanks [modified] Pinmemberhuejiitech20-Sep-13 14:46 
AnswerRe: Thanks PinmemberChadFolden120-Sep-13 16:46 
QuestionPager not working Pinmemberarifpk3623-Mar-13 5:24 
No doubt a great article.
I need some help related to Pager,as i have 20 Pages tiff file i set the thumbnail to 8 Pages on load of load.
Although Pager show the number of pages but when click on 9-18 and 18-20 link then page not found is showing.
Please help......
GeneralMy vote of 1 PinmemberArijit_Chowdhury5-Feb-13 20:44 
GeneralRe: My vote of 1 PinmemberChadFolden120-Sep-13 16:37 
QuestionGREAT Pinmemberasul17-Jan-13 14:36 
SuggestionEnterprise Tiff Viewing Solutions PinmemberDadajiIn30-May-12 17:56 
GeneralRe: Enterprise Tiff Viewing Solutions PinmemberChadFolden131-May-12 5:27 
SuggestionRe: Enterprise Tiff Viewing Solutions PinmemberDadajiIn31-May-12 20:41 
GeneralRe: Enterprise Tiff Viewing Solutions PinmemberChadFolden11-Jun-12 7:18 
GeneralRe: Enterprise Tiff Viewing Solutions PinmemberDadajiIn1-Jun-12 18:28 
QuestionHaving problems viewing larger TIF files PinmemberMember 874122222-Mar-12 7:40 
AnswerRe: Having problems viewing larger TIF files PinmemberChadFolden122-Mar-12 7:52 
GeneralRe: Having problems viewing larger TIF files PinmemberMember 874122223-Mar-12 1:47 
AnswerRe: Having problems viewing larger TIF files PinmemberMember 874122223-Mar-12 5:58 
QuestionThis is what I need but can't get it to work PinmemberDwight Rutledge22-Dec-11 11:16 
AnswerRe: This is what I need but can't get it to work PinmemberChadFolden13-Jan-12 6:51 
QuestionASP.NET Multiplepage TIFF Viewer PinmemberTom van Leeuwen28-Jul-11 11:29 
AnswerRe: ASP.NET Multiplepage TIFF Viewer PinmemberChadFolden13-Aug-11 6:13 
GeneralRe: ASP.NET Multiplepage TIFF Viewer PinmemberTom van Leeuwen3-Aug-11 11:46 
QuestionHow do you set file path? PinmemberAsherSL14-Jul-11 0:34 
AnswerRe: How do you set file path? PinmemberChadFolden114-Jul-11 5:01 
GeneralRe: How do you set file path? PinmemberAsherSL14-Jul-11 6:56 
QuestionGracias PinmemberFabio Ramirez29-Jun-11 9:01 
AnswerRe: Gracias PinmemberChadFolden129-Jun-11 9:10 
GeneralMy vote of 5 PinmemberMember 164379229-Apr-11 12:11 
GeneralOh my God ! My Vote is 100000... but I can only choose 5 ! PinmemberMember 164379229-Apr-11 11:46 
GeneralMy vote of 5 PinmemberJude.wilson1-Apr-11 1:52 
GeneralMy vote of 5 PinmemberAlbinAbel26-Feb-11 1:20 
QuestionPerformance issues?? Pinmemberjunkiejunkie17-Sep-10 16:45 
AnswerRe: Performance issues?? PinmemberChadFolden117-Sep-10 17:56 
GeneralRe: Performance issues?? Pinmemberjunkiejunkie17-Sep-10 18:23 
GeneralRe: Performance issues?? PinmemberChadFolden120-Sep-10 5:21 
GeneralGREAT WORK Pinmemberspidergeuse8-Sep-10 3:50 
Generalout of memery Pinmembersixcorner1234531-Aug-10 20:11 
GeneralRe: out of memery PinmemberChadFolden11-Sep-10 7:17 
GeneralFilePath Pinmembermanudil1-Jun-10 4:11 
GeneralRe: FilePath PinmemberChadFolden11-Jun-10 5:09 
Generalwas this code written for vs2008 framework 3.5 PinmemberjudyIsk17-Apr-10 20:40 
AnswerRe: was this code written for vs2008 framework 3.5 PinmemberChadFolden118-Apr-10 16:10 
GeneralRe: was this code written for vs2008 framework 3.5 PinmemberjudyIsk18-Apr-10 19:16 
GeneralMy vote of 2 PinmemberPaulo Zemek10-Mar-10 3:27 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140415.2 | Last Updated 9 Mar 2010
Article Copyright 2010 by ChadFolden1
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid