Click here to Skip to main content
13,049,814 members (72,148 online)
Click here to Skip to main content
Add your own
alternative version


36 bookmarked
Posted 9 Mar 2010

ASP.NET Multipage TIFF Viewer with Thumbnails

, 9 Mar 2010
Rate this:
Please Sign up or sign in to vote.
ASP.NET Multipage TIFF Viewer with Thumbnails


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.


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)


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", "'hand';");
    Img.ImageUrl = "ViewImg.aspx?FilePath=" + FilePath + "&Pg=" + (StartPg).ToString() + 
        "&Height=" + DefaultThumbHieght.ToString() + "&Width=" + DefaultThumbWidth;

//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=" +


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(
    if (TheImg != null)
        switch (Request.QueryString["Rotate"])
            case "90":
            case "180":
            case "270":

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


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;
    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
    //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,
catch (Exception ex)
    throw ex;
return returnImage;


  • 9th March, 2010: Initial post


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


About the Author

United States United States
No Biography provided

You may also be interested in...

Comments and Discussions

QuestionGetting "A generic error occurred in GDI+." when try to open 300mb tif files Pin
Aravindba10-Oct-16 22:15
professionalAravindba10-Oct-16 22:15 
AnswerRe: Getting "A generic error occurred in GDI+." when try to open 300mb tif files Pin
ChadFolden121-Dec-16 6:35
memberChadFolden121-Dec-16 6:35 
Questioncode in Pin
mui451619-May-14 20:41
membermui451619-May-14 20:41 
GeneralMy vote of 10 Pin
Motlatsij7-Feb-14 1:42
memberMotlatsij7-Feb-14 1:42 
QuestionGetting error when i upload in http testing link Pin
Member 1051521313-Jan-14 0:28
memberMember 1051521313-Jan-14 0:28 
AnswerRe: Getting error when i upload in http testing link Pin
g wildin6-Mar-14 9:14
memberg wildin6-Mar-14 9:14 
GeneralRe: Getting error when i upload in http testing link Pin
g wildin7-Mar-14 3:18
memberg wildin7-Mar-14 3:18 
AnswerRe: Getting error when i upload in http testing link Pin
GREG_DORIANcod14-Aug-15 7:01
memberGREG_DORIANcod14-Aug-15 7:01 
GeneralNot able to given exact path Pin
Member 105152139-Jan-14 21:01
memberMember 105152139-Jan-14 21:01 
QuestionThanks Pin
huejiitech20-Sep-13 14:46
memberhuejiitech20-Sep-13 14:46 
AnswerRe: Thanks Pin
ChadFolden120-Sep-13 16:46
memberChadFolden120-Sep-13 16:46 
QuestionPager not working Pin
arifpk3623-Mar-13 5:24
memberarifpk3623-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 Pin
Arijit_Chowdhury5-Feb-13 20:44
memberArijit_Chowdhury5-Feb-13 20:44 
GeneralRe: My vote of 1 Pin
ChadFolden120-Sep-13 16:37
memberChadFolden120-Sep-13 16:37 
QuestionGREAT Pin
asul17-Jan-13 14:36
memberasul17-Jan-13 14:36 
SuggestionEnterprise Tiff Viewing Solutions Pin
DadajiIn30-May-12 17:56
memberDadajiIn30-May-12 17:56 
GeneralRe: Enterprise Tiff Viewing Solutions Pin
ChadFolden131-May-12 5:27
memberChadFolden131-May-12 5:27 
SuggestionRe: Enterprise Tiff Viewing Solutions Pin
DadajiIn31-May-12 20:41
memberDadajiIn31-May-12 20:41 
GeneralRe: Enterprise Tiff Viewing Solutions Pin
ChadFolden11-Jun-12 7:18
memberChadFolden11-Jun-12 7:18 
GeneralRe: Enterprise Tiff Viewing Solutions Pin
DadajiIn1-Jun-12 18:28
memberDadajiIn1-Jun-12 18:28 
QuestionHaving problems viewing larger TIF files Pin
Member 874122222-Mar-12 7:40
memberMember 874122222-Mar-12 7:40 
AnswerRe: Having problems viewing larger TIF files Pin
ChadFolden122-Mar-12 7:52
memberChadFolden122-Mar-12 7:52 
GeneralRe: Having problems viewing larger TIF files Pin
Member 874122223-Mar-12 1:47
memberMember 874122223-Mar-12 1:47 
AnswerRe: Having problems viewing larger TIF files Pin
Member 874122223-Mar-12 5:58
memberMember 874122223-Mar-12 5:58 
QuestionThis is what I need but can't get it to work Pin
Dwight Rutledge22-Dec-11 11:16
memberDwight Rutledge22-Dec-11 11:16 
AnswerRe: This is what I need but can't get it to work Pin
ChadFolden13-Jan-12 6:51
memberChadFolden13-Jan-12 6:51 
QuestionASP.NET Multiplepage TIFF Viewer Pin
Tom van Leeuwen28-Jul-11 11:29
memberTom van Leeuwen28-Jul-11 11:29 
AnswerRe: ASP.NET Multiplepage TIFF Viewer Pin
ChadFolden13-Aug-11 6:13
memberChadFolden13-Aug-11 6:13 
GeneralRe: ASP.NET Multiplepage TIFF Viewer Pin
Tom van Leeuwen3-Aug-11 11:46
memberTom van Leeuwen3-Aug-11 11:46 
QuestionHow do you set file path? Pin
AsherSL14-Jul-11 0:34
memberAsherSL14-Jul-11 0:34 
AnswerRe: How do you set file path? Pin
ChadFolden114-Jul-11 5:01
memberChadFolden114-Jul-11 5:01 
GeneralRe: How do you set file path? Pin
AsherSL14-Jul-11 6:56
memberAsherSL14-Jul-11 6:56 
QuestionGracias Pin
Fabio Ramirez29-Jun-11 9:01
memberFabio Ramirez29-Jun-11 9:01 
AnswerRe: Gracias Pin
ChadFolden129-Jun-11 9:10
memberChadFolden129-Jun-11 9:10 
GeneralMy vote of 5 Pin
Member 164379229-Apr-11 12:11
memberMember 164379229-Apr-11 12:11 
GeneralOh my God ! My Vote is 100000... but I can only choose 5 ! Pin
Member 164379229-Apr-11 11:46
memberMember 164379229-Apr-11 11:46 
GeneralMy vote of 5 Pin
Jude.wilson1-Apr-11 1:52
memberJude.wilson1-Apr-11 1:52 
GeneralMy vote of 5 Pin
AlbinAbel26-Feb-11 1:20
memberAlbinAbel26-Feb-11 1:20 
QuestionPerformance issues?? Pin
junkiejunkie17-Sep-10 16:45
memberjunkiejunkie17-Sep-10 16:45 
AnswerRe: Performance issues?? Pin
ChadFolden117-Sep-10 17:56
memberChadFolden117-Sep-10 17:56 
GeneralRe: Performance issues?? Pin
junkiejunkie17-Sep-10 18:23
memberjunkiejunkie17-Sep-10 18:23 
GeneralRe: Performance issues?? Pin
ChadFolden120-Sep-10 5:21
memberChadFolden120-Sep-10 5:21 
spidergeuse8-Sep-10 3:50
memberspidergeuse8-Sep-10 3:50 
Generalout of memery Pin
sixcorner1234531-Aug-10 20:11
membersixcorner1234531-Aug-10 20:11 
GeneralRe: out of memery Pin
ChadFolden11-Sep-10 7:17
memberChadFolden11-Sep-10 7:17 
GeneralFilePath Pin
manudil1-Jun-10 4:11
membermanudil1-Jun-10 4:11 
GeneralRe: FilePath Pin
ChadFolden11-Jun-10 5:09
memberChadFolden11-Jun-10 5:09 
Generalwas this code written for vs2008 framework 3.5 Pin
judyIsk17-Apr-10 20:40
memberjudyIsk17-Apr-10 20:40 
AnswerRe: was this code written for vs2008 framework 3.5 Pin
ChadFolden118-Apr-10 16:10
memberChadFolden118-Apr-10 16:10 
GeneralRe: was this code written for vs2008 framework 3.5 Pin
judyIsk18-Apr-10 19:16
memberjudyIsk18-Apr-10 19:16 

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

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

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170713.1 | Last Updated 9 Mar 2010
Article Copyright 2010 by ChadFolden1
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid