A New JavaScript Image Viewer Library from GrapeCity Documents

Social media these days is all about images; most individuals are concerned about uploading the best possible image of what comes their way, be it the food they eat, places they visit, events they celebrate, animals they see, and much more. But, typically, no image is perfect and therefore requires a certain amount of editing to make it the best it can be and to post the best possible image on the social media scene.

Besides social media, image processing is also required in other fields such as medical, where image processing is used for tasks like PET scans, X-Ray Imaging, Medical CT, UV imaging, and Cancer Cell Image processing to enhance the accuracy of images and provide a better diagnosis. Another example could be scanning important documents as images for sharing, which might require image processing tools to detect or adjust edges/sharpen the document image to make the content more readable.

However, editing an image is still inconvenient for many web Developers who have to rely on installing Desktop software or interface with third-party apps. To provide an image processing solution, the GrapeCity Documents v6 release introduces the JavaScript-based client-side GrapeCity Documents Image Viewer (referred to as GcImageViewer hereafter) control. It is a cross-platform solution for viewing and editing Image files on Windows, MAC, Linux, iOS, and Android devices. It works in all modern browsers, including Edge, Chrome, Firefox, Opera, and Safari. The GcImageViewer can be conveniently embedded in major web frameworks such as Pure JavaScript, Angular, Vue, ASP.NET Core, ASP.NET MVC, HTML5, React, and Preact.

GcImageViewer is now available with Documents for Imaging! Download the latest GrapeCity Documents today to try these features out!

The First Look: GrapeCity Documents Image Viewer

The snapshot above showcases the different UI options available in GcImageViewer to load, process, and save images. So, we will quickly run through these options to better understand the control:

1. Open Document: This option lets you load an image into the GcImageViewer with the help of an Open File dialog.
2. Zoom control: This control offers zoom-in and zoom-out buttons to zoom the image and a zoom textbox to define a specific zoom value.
3. FullScreen: To display the viewer in fullscreen and hide the menu bar at the top. As soon as the GcImageViewer goes into fullscreen mode, an alternate toolbar appears over the image to provide you with all the functionalities offered by the main menu bar, along with an option to exit the fullscreen mode.
4. Navigation Control: This proves useful when working with TIFF/GIF images, as it lets you navigate between the image frames.
5. Download: Provides you with an option to download the modified image on the client side.
6. About: The last option provides details about the GcImageViewer version.

Understanding the basic functionality offered by GcImageViewer, it's time to dig into details about each of these features, as elaborated in the next section.

GrapeCity Documents Image Viewer Features

Load Image

GcImageViewer supports loading images from many of the popular image file formats, including:

1. JPEG. Joint Photographic Experts Group image.
2. PNG. Portable Network Graphics.
3. TIFF. Tagged Image File Format.
4. GIF. Graphics Interchange Format.
5. BMP. Bitmap Picture.
6. ICO. The ICO file format is an image file for Microsoft Windows computer icons.
7. SVG. Scalable Vector Graphics.
8. WebP image format.

The images can be loaded either through the client-side API or the Open document option of GcImageViewer UI, which provides an open file dialog to choose and load an image into the viewer.

Image loading becomes quite interesting when working with GIF images, as GcImageViewer automatically starts the GIF animation as soon as a GIF image is loaded. In addition, it even provides a GIF player on top of the image, which lets you stop and start the animation. After the animation is stopped, you can navigate between the different frames using the Navigation control available in the GcImageViewer’s toolbar.

The GIF below shows an example of this behavior:

Zoom

GcImageViewer allows zooming of images between 5% to 500% along with other options, including “Fit to Width“ and “Whole Image“, using the zoom-in and zoom-out buttons available in the toolbar. One can even type in a specific zoom value in the zoom textbox, as showcased in the image below:

Rotate

GcImageViewer ships with a Rotation plugin to add support for rotating images at 0, 90, 180, and 270 degrees using the Rotate option available in the toolbar once the plugin has been added to GcImageViewer.

The GIF below shows an example of this behavior:

Plugin Support

GcImageViewer provides Plugin Support to allow users to extend its behavior and add new functionality. The images below depict one example where an ImageFilters plugin has been implemented to apply different filters to an image.

Client-Side API

GcImageViewer lets you load, edit or modify an image using the viewer UI options and provides a client-side API to further enhance the experience of working with a JavaScript-based control. It offers basic functionalities including load, save, zoom, rotate the images, and meeting complex requirements of creating a new image or modifying an existing one.

Configure GrapeCity Documents Image Viewer

Finally, this section will describe how to start working with GcDocs ImageViewer by following three simple steps.

The steps below will guide you on configuring GcImageViewer in an ASP.NET Core application.

Step 1: Create an ASP.NET Core Application

We will begin by creating an ASP.NET Core application using Visual Studio 2022 and the .NET 6 framework.

Step 2: Install GcImageViewer

Next, we need to install the GcImageViewer package. Run the following command in the Package Manager Console in Visual Studio to install GcImageViewer. Ensure the directory location in the command prompt is set to the lib folder in the project. The GcImageViewer will be installed in the <app_name>\<app_name>\wwwroot\lib\node_modules folder.

npm install @grapecity/gcimageviewer

Step 3: Add GcImageViewer

To add the JavaScript-based GcImageViewer control to the project, we will add a new HTML page to the project’s 'wwwroot' folder and name it 'index.html'.

Add the following code to the HTML page to initialize the GcImageViewer control and render it on the web page:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="lib/node_modules/@grapecity/gcimageviewer/gcimageviewer.js"></script>
</head>
<body>
    <div id="imageviewer"></div>
    <script>
        var viewer = new GcImageViewer("#imageviewer");
        viewer.open("sample.jpg", { imageFormat: 8 });
        viewer.zoom = { mode: 2 };
    </script>
</body>
</html>

Additionally, the above code will load an image file (sample.jpg) in GcImageViewer. So make sure you have an image file named “sample.jpg“ placed in the wwwroot folder to get the above code working.

Next, replace the code in Program.cs file with the following code, to set the index.html as the startup page for the application:

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
}

app.UseHttpsRedirection();
app.UseDefaultFiles();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapRazorPages();
app.Run();

Step 4: Execute the Application

Build and run the application. A page with the GcImageViewer will show in your default browser.

The image below depicts the default display of GcImageViewer with an image loaded using the Client API:

Refer to the GcImageViewer demos to explore all the features, experience the UI, and dig into the details of Client API usage. Also, this is just the beginning; stay tuned for many more exciting features in the future.

GcImageViewer is now available with Documents for Imaging! Download the latest GrapeCity Documents today to try these features out!