Edit PNG, JPEG, GIF and Other Images with a JavaScript Image Viewer

GrapeCity Documents v6 introduces the first public release of GrapeCity Documents Image Viewer control (referred to as GcImageViewer hereafter), a JavaScript-based client-side image viewer control that lets you load, view, edit, and save images in your web applications. It is supported on all modern browsers and can easily be integrated with major frameworks. Revisit this blog from the last release to get a detailed introduction to the control.

In this blog, we will focus on the different edit functionalities offered by GcImageViewer, along with how the client-side API can be used to either create or modify an existing image.

To begin with, we need to understand that GcImageViewer provides several built-in functionalities such as load image, zoom, navigation, etc. In addition, it even provides several plugins which enhance the GcImageViewer functionality, which is how the editing tools have been implemented for GcImageViewer.

So, let’s start by exploring the available plugins and the edit functionalities provided by them.

Ready to Try Out the Plugins? Download GrapeCity Documents for Imaging Today!

GcImageViewer Plugins

GcImageViewer comes with a set of plugins that helps you add and remove the edit functionality to the viewer as per your requirements which helps keep the application footprint in check.

The two plugins offered by GcImageViewer are described below:

1. PageTools Plugin: The PageToolsPlugin provides rotation, flip, crop, and resize tools for editing images. It adds the Page tools button to the viewer’s primary toolbar. When clicked upon, it shows a secondary toolbar with all the image editing tools, including rotation, flip, crop, and resize tools.

Here is a quick view of the Page Tools toolbar button along with the secondary toolbar:

Note: PageToolsPlugin has replaced the RotationPlugin available in the last release.

2. ImageFilters Plugin: The Image Filters plugin lets you apply Filter effects to images which helps transform the image’s appearance. It provides four pre-defined filters: Invert, Grayscale, Offset Blue, and RetroViolet. By default, the Image Filters plugin adds a sidebar with an Image Filter button, which expands the sidebar to show an image effects preview when clicked.

Here is a quick view of the Image Filters sidebar button along with the image previews:

Also, similar to the Page Tools button, it is possible to show the Image Filters button in the primary toolbar, which, when clicked, displays Image filter effects in a secondary toolbar. The image below depicts the same:

How to Add Plugins

The addPlugin and removePlugin methods of GcImageViewer class help you add/remove plugins to/from GcImageViewer, respectively. The code snippets below depict how to add PageToolsPlugin and ImageFiltersPlugin to GcImageViewer.

Add PageToolsPlugin to GcImageViewer:

//Initialize GcImageViewer
var viewer = new GcImageViewer("#root");

// Create Page Tools plugin:
var pageToolsPlugin = new PageToolsPlugin();

// Add Page Tools plugin to GcImageViewer:
viewer.addPlugin(pageToolsPlugin);

Add ImageFiltersPlugin to GcImageViewer:

//Initialize GcImageViewer
var viewer = new GcImageViewer("#root");

// Create Image Filters plugin:
const imageFiltersPlugin = new ImageFiltersPlugin();

// Add Image Filters plugin to GcImageViewer:
viewer.addPlugin(imageFiltersPlugin);

There is much more to plugins, including removing plugins and customizing the toolbar; refer to the documentation for details.

With all the editing tools in place, it's time to dig into the details of how the images can be edited using all the tools provided by GcImageViewer. The sections ahead focus on the same.

Edit Images

GcImageViewer lets you edit existing images by using the UI options available in GcImageViewer after adding the respective plugins or by using the feature-rich client-side API.

In this section, we will explore all the different ways GcImageViewer provides to help users edit an existing image.

Rotate Image

Rotating images to view them at the best possible angle is a common requirement. The PageToolsPlugin appends the rotate button in the Page Tools secondary toolbar, which lets you rotate the image at an angle of 90 degrees in a clockwise direction by repeatedly clicking on the button.

The GIF below shows how this works:

It is also possible to set the rotation angle through code using the rotate method of the PageToolsPlugin class. Refer to the documentation for implementation details.

Flip Image

A flipped image lets you view a mirror reversal of an image along the horizontal or vertical axis. The PageToolsPlugin appends the flip horizontal and flip vertical buttons in the Page Tools secondary toolbar, which lets you flip the image horizontally or vertically.

The GIF below shows this in action:

It is also possible to flip an image through code using the flipHorizontal and flipVertical methods of the PageToolsPlugin class. Refer to the documentation for implementation details.

Crop Image

Images are generally cropped to either focus on a specific part of an image or to remove unwanted objects from the pictures. The PageToolsPlugin appends the crop button in the Page Tools secondary toolbar, which displays the Crop dialog when clicked.

The crop dialog lets you specify the top-left coordinates, height, and width to define the crop region of the image. It also provides the Aspect ratio dropdown, which automatically adjusts the height or width of the image when a user chooses one of the options, applying the desired aspect ratio to the cropped image. A Reset button is also provided in the dialog, letting you revert the image to its original size.

You can even crop an image directly by dragging the dotted edges of the image, which also appear on clicking the Crop image button.  

The GIF below shows the use of Crop dialog as well as the dotted edges to crop the image:

It is also possible to crop an image through code using the PageToolsPlugin class's crop method. Refer to the documentation for implementation details.

Resize Image

Resizing images is a very common requirement, and there can be numerous reasons why a user would like to resize an image. The PageToolsPlugin appends the resize button in the Page Tools secondary toolbar, which, when clicked, displays the Resize dialog.

The Resize dialog lets you specify the expected image width and height. It also provides a Keep aspect ratio toggle button, allowing you to keep or ignore the aspect ratio while resizing. When this setting is enabled, and one of the dimensions is set, the viewer automatically calculates the value of the other dimension based on the aspect ratio.

The GIF below shows how this works:

It is also possible to resize an image through code using the resize method of the PageToolsPlugin class. Refer to the documentation for implementation details.

Apply Image Filters

Image filters are applied to change an image's default appearance by altering the pixels' colors. The ImageFiltersPlugin appends the filter button in a sidebar, which, when clicked, expands the sidebar to show an image effects preview. Clicking on either of these effects applies the filter to the image.

The GIF below shows filters in action:

It is also possible to apply a filter on an image through code using the applyFilter method of the ImageFiltersPlugin class. Refer to the documentation for implementation details.

Undo Redo Operations

The editing exercise is only complete with the ability to undo and redo edits, as both go hand in hand. GcImageViewer addresses this need by adding the undo and redo buttons to the primary toolbar of the viewer providing built-in undo/redo functionality. The user needs to click the respective button in the toolbar to undo the last action or redo the following action.

Here is a quick view of the viewer showcasing the undo and redo buttons in the primary toolbar in action:

By default, undo/redo options available in the primary toolbar of GcImageViewer are enabled; these options can be disabled by setting the undo property of ViewerOptions in the code.

The client-side API also lets you perform the undo and redo operations through code. Many more undo/redo operations are supported via the API, including defining a custom undo command. Refer to the documentation for more detailed information.

Create and Modify Images

Lastly, let’s briefly discuss another interesting and useful feature offered by the GcImageViewer client-side API. It enables you to create an image from scratch or modify an existing image by drawing over it. Once done, you can save the new image to the local disk. For implementation details, refer to the demos and documentation.

Explore GcImageViewer demos and documentation, and let us know what else you would like to achieve using this control.