The ImageViewer supports browser-independent resample and scale-to-gray display interpolations of the image data. Using interpolation will greatly enhance the quality of the image when it is displayed at a smaller size than the original.
This illustration shows an image viewer running in a browser showing two items with the same image. The image is a typical 8.5- by 11-inch document scanned at 300 DPI. The image on the left is how the ImageViewer would show it using the browser's built-in interpolation. The image on the right is displayed using LEADTOOLS scale-to-gray interpolation:
Perform the following steps to use interpolation in your application:
Set the static ImageViewer.ImageProcessingLibrariesPath property to the path where the
Leadtools.ImageProcessing.Core.js file is relative to page. For example, if the .js files are in a folder called "lib", then use the following code before using interpolation in ImageViewer:
lt.Controls.ImageViewer.ImageProcessingLibrariesPath = "lib";
// Get the parent div for the image viewer
var div = document.getElementById("imageViewerContainer");
// Create a new image viewer instance
var createOptions = new lt.Controls.ImageViewerCreateOptions(div);
var imageViewer = new lt.Controls.ImageViewer(createOptions);
// Load an image into it
imageViewer.imageUrl = "http://localhost/images/ocr1.png";
// Set Pan/Zoom as the interactive mode. Click (touch) and drag to pan, CTRL-Click (pinch) and drag to zoom
Set the value of ImageViewer.InterpolationMode to the desired value. We set a black and white image in the viewer that can be interpolated with InterpolationMode.Resample:
imageViewer.InterpolationMode = lt.Controls.InterpolationMode.resample;
This is it. Run the demo and notice that when you zoom the image out (make it smaller), the interpolation will run to enhance the quality. The interpolation is applied as you zoom in and out and the user interface stays responsive since the image viewer is using a web worker.
Note that using InterpolationMode.ScaleToGray may produce better results if the original image was bitonal (1 bit/pixel black and white image). However, in most cases InterpolationMode.Resample can work for both black/white and color images without any noticable difference in appearance or speed and it is recommended to use it at all times.
Interpolation happens when the result of the transformation on the image results in a display size that is smaller than the original image size. When this transformation results in the same or larger display size, then the viewer will not use interpolation.
The ImageViewer starts and stops the interpolation as needed (within the bounds of InterpolationRunMode) and the ImageViewer.Interpolation event occurs with information on when this process started, completed or was aborted as follows:
When InterpolationMode is not InterpolationMode.None, the viewer will monitor the size of the displayed image (or images for each item). When the display size becomes smaller than the original image size, the Interpolation event is fired with Status equals to InterpolationStatus.Started to indicate that the viewer has started this process. The application can manually abort interpolation at any time if desired by setting the value of IsCanceled to true.
When the process is finished and the data is ready, the viewer renders this data on the surface of each image and the Interpolation event is fired again with Status equals to InterpolationStatus.Completed.
If during the period between Started and Completed the user zooms the viewer in or out or adds/remove images or any other operation that would cause ImageViewer.UpdateTransform to be called, the Interpolation event is fired with Status equals to InterpolationStatus.Aborted and the data is disregarded. The operation will start again after UpdateTransform has finished working to use the up to date image data and transformation