Visual C# Imaging - How to Integrate Web Viewer

How to Build Web Viewer to View, Display, Annotate Documents with Browser
Yiigo.Image for .NET is a powerful image viewing and processing control toolkit, which provides multiple document manipulating features such as PDF editing, image processing including png, jpeg, tiff, gif and other formats, OCR and barcode reading & writing, and web viewer function. With Yiigo web viewer, developers can easily display, open documents / images, and also make annotations on them at any time.
This article is a simple start-up to guide users through the integration of Yiigo document web viewer using Visual C# programming language. You will create a simple web page with a document web viewer embedded in it, and then have a sample document displayed in the viewer.
C# Guide - How to Integrate Document Web Viewer

C# Web Viewer Integration - Preparation

  • Download .NET image controls: Download Yiigo.Image for .NET trial package from online page.
  • Install .NET image controls: Unzip the download evaluation SDK and run the exe file to set up.
  • Activate the license for .NET image controls: When installation is done, you need to activate the license for using the DLL. Type in your serial number if you have purchased it. If not, request an evaluation license first and follow the wizard.

C# Web Viewer Integration - Create a Project

  • You should have installed Microsoft Visual Studio 2005 or above, or Visual Studio Express in your system first.
  • Start up your Visual Studio to open you imaging project, or create an empty ASP.NET web site with the provided template.
  • Go to "Project" to select "Add Reference..." and add the Yiigo.Image.WebControl.dll to your project reference, which you can find from the unzipped file in the downloaded package.

C# Web Viewer Integration - Add Project Resources

  • Your project needs a copy of the resource for the web viewer, which includes the client-side JavaScript and styles.
  • The default installation of the web viewer resource is located here: C:\Program Files\Yiigo.Image for .NET\bin\WebResources\WebDocument\Viewer.
  • Now please copy the WebDocument\Viewer directory into the file where your project is located.
  • To save the image displayed by the viewer, you can create a directory named "images" in the file for your project.
  • If you want to display a default image in your viewer, you can add an image in the directory "images" that you created in the last step.

C# Web Viewer Integration - Add the Web Page

  • Add a Generic Handler to your project, and name the file WebDocumentViewer.ashx.
  • Replace the default content for the web handler with the following sample code:
<%@ WebHandler Language="C#" Class="WebDocumentViewerHandler" %>

using System;
using System.Web;
using Yiigo.Imaging.WebControls;

public class WebDocViewerHandler : WebDocumentRequestHandler
{
}
  • Now add a web form to your project, and it is named Default.aspx by default. You don not have to make any change to the codebehind called Default.aspx.cs.
  • A document web viewer need three sections of code in order to: load resources, create a viewing area, and initialize the area. Copy the first two chunks of html sample code to your documents head and body respectively . And then add the last chunk of JavaScript to initialize the viewer.
<script src="WebDocViewer/jquery-1.7.1.min.js" type="text/javascript"></script>                        
<script src="WebDocViewer/yiigoWebDocumentViewer.js" type="text/javascript"></script>
<link href="WebDocViewer/yiigoWebDocumentViewer.css" rel="Stylesheet" type="text/css">
<div id="_toolbar1" class="yiigo-document-toolbar" style="width 670px;"></div>
<div id="_container1" class="yiigo-document-container" style="width 670px; height 500px;"></div>
<script type="text/javascript" language="javascript">
var _docUrl = 'Images/Example.tif';
var _serverUrl = 'WebDocumentViewer.ashx';

var _viewer = new Yiigo.Controls.WebDocumentViewer({
'parent': $('#_container1'), //This is the parent container to put the viewer in
'toolbarparent': $('#_toolbar1'), //This is the parent container to put the viewer toolbar in

'serverurl': _serverUrl, //This is the server handler url to send image requests to

'documenturl': _docUrl // This is the document url relative to the server handler url

});
</script>

C# Document Web Viewer Integration - Deploy Project to IIS

  • Copy your project folder to a path under your IIS document.
  • Open your IIS Manager, convert your project directory to an Application and then assign it to an Application Pool.
  • Enable 32-bit Applications to true to ensure the application's consistency with the Yiigo .NET assemblies you are using.
  • Now it's done! You have created a web viewer now, and feel free to navigate to your page with a browser!
More How To Articles for Web Document Image Viewer
Products
Other Plugins
Image Viewer CoreBarcode PluginPDF Read & WriteTesseract OCR PluginForm Processing PluginJBIG2 CodecJPEG2000 CodecISIS ScannerTwain ScannerDICOM ReaderCAD Scanner