GrapeCity Documents Image Viewer
A JavaScript Image viewer and editor that comes with
GrapeCity Documents for Imaging.
GrapeCity Documents Image Viewer (GcDocs Image Viewer, GcImageViewer) is a fast
modern JavaScript based image viewer and editor that runs in all major browsers.
The viewer can be used as a cross platform solution to view or modify images
on Windows, MAC, Linux, iOS and Android devices.
GcImageViewer is included in
GrapeCity Documents for Image (GcImaging),
a feature-rich cross-platform Image API library for .NET.
GcImageViewer provides a rich client side JavaScript object model,
see docs/index.html for the client API documentation.
Product highlights:
- Works in all modern browsers including IE11, Edge, Chrome, FireFox, Opera, Safari.
- Works with pure JavaScript and frameworks such as Angular, Vue, ASP.NET Core, ASP.NET MVC, HTML5, React and Preact.
- Allows you to extend the viewer behavior and add new functionality using plug-ins.
- Provides a client API for creating and modifying image data.
- Supports raster image formats JPEG, PNG, WEBP, TIFF, GIF, BMP, ICO, and vector SVG format.
- ...and more.
Installing and using the viewer
The following viewer distribution files are located in the zip archive:
build/README.md
(this file)build/CHANGELOG.md
build/index.html
build/gcimageviewer.js
build/plugins/
(optional) Pluginsbuild/themes/
(optional) Theme filesbuild/typings/
(optional) Type definitions
Copy those files to an appropriate location accessible from the web page where the viewer will live,
e.g. if the files are put in the directory where the web page is, the following HTML can be used to show the viewer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="theme-color" content="#000000" />
<title>GrapeCity Documents Image Viewer Demo</title>
<script src="gcimageviewer.js"></script>
<script src="plugins/rotation.js"></script>
<script>
function loadImageViewer(selector) {
var viewer = new GcImageViewer(selector);
viewer.addPlugin(new RotationPlugin());
}
</script>
</head>
<body onload="loadImageViewer('#root')">
<div id="root"></div>
</body>
</html>
See it in action
[1.0.0-beta.1] - 09-Aug-2022
- The first public BETA release of GcImageViewer.