Visual C#.NET: Create Web-Based Image Viewer

How to create web-based image viewer using C#.NET
For user in distance, a web image viewer is a best choice to save time & cost. our Yiigo Document Image products provide high-speed document and image viewer and comprehensive Visual C#.NET samples for guiding developers to create web-based image viewer using Yiigo.Image for .NET. Besides, you may create Windows Image Viewer with C# or Create PDF Web Viewer in C# project. If you are VB.NET developer, find web-based image viewer creation on Create web-based image viewer in VB.NET.
Create Web-Based Image Viewer with C#.NET Sample Code

Requirements

Before creating web-based image viewer using Yiigo.Image for .NET in Visual C#.NET, make sure that you have installed.
  • Operating systems - Web 7, Web Vista, and Web XP, etc
  • Compatible with .NET framework 2.0 and above versions
  • Support Visual Studio 2005, 2010 and other .NET development environments
  • Yiigo.Image for .NET installation

Start to Create Web Image Viewer

  • Open and run your Microsoft Visual Studio;
  • Choose either "Visual C# Projects" in "New Project" dialog box;
  • Choose "ASP.NET Empty Web Site" in the "Templates" List to create a new Web Site and name it "YiigoImagingWebViewer";
  • Right-click on the "References" folder, and select "Add Reference..." from the context menu in the "Solution Explorer" window;
  • In the "Add Reference" dialog box, select the ".NET" tab and browse to Yiigo.Imaging.Net.Web.dll library;
  • Add it to your Visual C# applications;
  • Add a ToolStrip control to the top of the form by dragging it from the Visual Studio Toolbox;
  • Drag a WebImageViewer control from the Visual Studio Toolbox YiigoImage tab;
  • Select Fill from the Dock property located in the property grid of the WebImageViewer control;
  • Drag an Acquisition Component from YiigoImage tab in the toolbox;
  • Add a handler for the viewer;
  • Add a new Web Form to your project and add HTML in your document's head;
  • Add HTML in your document's body;
  • Add JavaScript code for initializing your viewer
using System.IO;
using System.Drawing.Printing;
using YiigoImage.Imaging;
using System.Web;
using YiigoImage.Imaging.WebControl;

// Add Open button to viewer
private void Open_Click(object sender, EventArgs e)
{
if (openFileDialog1.ShowDialog(this) == DialogResult.OK)
{
WebViewer.Load(new FileSystemImageSource(new string[] {
openFileDialog1.FileName }, true), null);
}
}

// Add Zoom and Scale button to viewer
private void FitToWidth_Click(object sender, EventArgs e)
{
WebViewer.ImageControl.AutoZoom =
YiigoImage.Imaging.WebControl.AutoZoomMode.FitToWidth;
}
private void FitToHeight_Click(object sender, EventArgs e)
{
WebViewer.ImageControl.AutoZoom =
YiigoImage.Imaging.WebControl.AutoZoomMode.FitToHeight;
}
private void FullSize_Click(object sender, EventArgs e)
{
WebViewer.ImageControl.AutoZoom =
YiigoImage.Imaging.WebsControl.AutoZoomMode.None;
WebViewer.ImageControl.Zoom = 1.0;
}

// Add Scan button to viewer
private void acquisition1_ImageAcquired(object sender, AcquireEventArgs e)
{
WebViewer.Add(YiigoImage.FromBitmap(e.Image), "", "");
}
private void Scan_Click(object sender, EventArgs e)
{
foreach (Device dev in acquisition1.Devices)
{
if (dev.Identity.ProductName ==
tcbChooseScanner.SelectedItem.ToString())
{
dev.Acquire();
}
}
}

// Add Save button to viewer
private void Save_Click(object sender, EventArgs e)
{
if (saveFileDialog1.ShowDialog(this) == DialogResult.OK)
{
WebViewer.Save(saveFileDialog1.FileName, new TiffEncoder());
}
}

// Add a handler for the viewer
public class WebViewerHandler : WebViewerRequestHandler
{
}
//Add a new Web Form to your project and add HTML in your document's head;
<script src="WebViewer/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="WebViewer/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="WebViewer/jquery-ui-1.8.14.custom.min.js" type="text/javascript">
</script>
<script src="WebViewer/atalaWebDocumentViewer.js" type="text/javascript">
</script>
<link href="WebViewer/atalaWebDocumentViewer.css" rel="Stylesheet" type="text/css" />

// Add HTML in your document's body;
<div id="_toolbar1" class="atala-document-toolbar" style="width: 670px;"></div>
<div id="_container1" class="atala-document-container" style="width: 670px;height: 500px;"></div>

// Add JavaScript code for initializing your viewer
<script type="text/javascript" language="javascript">
var _docUrl = 'Yiigo_example.tif';
var _serverUrl = 'WebViewer.ashx';
var _viewer = new Atalasoft.Controls.WebDocumentViewer({
'parent': $('#_container1'), 'toolbarparent': $('#_toolbar1'), 'serverurl': _serverUrl, 'documenturl': _docUrl });
</script>

Deploying to IIS

  • Open your IIS and copy your project to a path within your IIS document root;
  • Get a server license for Yiigo.Image for .NET and put it in your project's Bin directory;
  • Convert your project directory to an Application and assign it to an Application Pool;
  • Navigate to your page in a browser, and see a loaded document.
Web Document Image Viewer Related Online Articles
Products
Other Plugins
Image Viewer CoreBarcode PluginPDF Read & WriteTesseract OCR PluginForm Processing PluginJBIG2 CodecJPEG2000 CodecISIS ScannerTwain ScannerDICOM ReaderCAD Scanner