A New Javascript Image Viewer Library from GrapeCity Documents
Tags: javascript, webdev, devops
Published: 2022-09-16 18:49:14

---
canonical_url: https://www.grapecity.com/blogs/a-new-javascript-image-viewer-library-from-grapecity-documents
description: Check out 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 v5.2 release introduces the **Javascript**-based client-side **GrapeCity Documents Image Viewer (Beta)** _(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.**


### The First Look: Grapecity Documents Image Viewer

![JS Image Viewer](https://files.grapecity.com/gc-website-media/vv1prk1r/01-image.png?width=500&height=313.98667935299716)

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:

![Image Viewer](https://files.grapecity.com/gc-website-media/fs0ntsas/02-image-optimized.gif?width=400&height=244)

#### 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:

![Zoom](https://files.grapecity.com/gc-website-media/2vvptfqv/03-image.png?width=500&height=229.63483146067418)

#### 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.


#### 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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jir54mxmd24ifmifv9mf.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g4tx9hoqap2bqt4abl4m.png)

#### 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.

![Create A New Project](https://files.grapecity.com/gc-website-media/ys1jprlz/07-image.png?width=500&height=333.3333333333333)

#### 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 GcImageViewer control to the project, modify the default content of **Pages** **→** **Index.cshtml** file with the following code: 

```
   <div style="height: calc(100vh - 260px);" id="imageviewer"></div>
    <script type="text/javascript" src="lib/gcimageviewer/gcimageviewer.js"></script>
    <script>
        var viewer = new GcImageViewer("#imageviewer");
        viewer.open("sample1.webp", { imageFormat: 8});
        viewer.zoom = { mode: 2 };
    </script>
```

#### 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:

![GcImageViewer](https://files.grapecity.com/gc-website-media/ygahtw5x/08-image.png?width=500&height=301.699716713881)

Refer to the GcImageViewer [demos](https://www.grapecity.com/documents-api-imageviewer/demos/Overview) 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.