Skip to main content Skip to footer

What's New in Documents for Imaging v6

GcImaging v6.2 - August 9, 2023

Helper classes for drawing layouts to GcGraphics

In last release, GcImaging added new layout engine, introducing LayoutRect and other related classes in the GrapeCity.Documents.Layout namespace to implement a layout model based on constraints and a flat hierarchy of elements where multiple elements are drawn on images, without calculating positions of each elements relative to other. The new layout engine thereby adds flexibility to position and size the elements enabling drawing of complex graphic layouts on images.

In v6.2 release, GcImaging adds additional classes - SurfaceLayerViewSpace, and Visual classes in GrapeCity.Documents.Layout.Composition namespace that act as a medium between the layout engine and the drawing surface making it easier to draw even more complex graphics, text and images. Here is a brief about the functions of these classes -

  • Surface is the main class in the Composition engine. It contains a LayoutHost (which is the root object of the layout engine) and one or several views (layers). Layers consist of visuals (drawable elements) and nested layers. The Render method of Surface class calls PerformLayout method of LayoutHost class to calculate the surface layout and then it draws all the layers, including nested ones, from the bottom to the top layer on the specified GcGraphics object.

  • Layers are of two types: Layer and View class objects (derived from Layer objects). The View object encapsulates the LayoutView object, which represents a separate coordinate system with its own transformation matrix. The Layer object functions as a lightweight View with its own list of visuals, nested layers, and possible clipping area.

  • Layers contain Visuals and Spaces. The Space object represents a LayoutRect that may affect the layout of other elements but is never drawn itself. The Visual class derives from the Space class. Visual class represents an element that will be drawn on the target GcGraphics.

Furthermore, these classes also enable you to customize the z-order and clipping of the drawn graphics. 

Additional API is also introduced to achieve various layouts. To read about the new classes and function of each, refer to documentation.

Here is an example of a really complex layout that can be achieved using these API.

Helper classes for drawing layouts to GcGraphics - .NET Imaging API

Help | Demo 

GrapeCity Documents Image Viewer (GcImageViewer)

New Paint and Text tools

Now draw freehand content or add text effortlessly over images to add additional information on your images. GcImageViewer adds new Paint and Text tools to draw or add text over images. The tools have been added to the second toolbar of the viewer.

Have a look on the details below.

Paint tools

Draw on images using JS Image Viewer

Paint options

  • Pencil - draw freehand strokes without anti-aliasing.

  • Brush - draw freehand brush strokes with smooth edges and anti-aliasing.

  • Clone Stamp - copy pixels from one area to another using a seamless painting technique.

  • Eraser - erase part of the image.


  • Size settings button - the Pen/Brush/Eraser/Clone Stamp tools size hardness and opacity.

  • Brush color - the Pen/Brush tools painting color.

  • “Use original image” toggle - use the original image, combined with your recent edits as background source for new edits.

Other options

  • Undo/Redo buttons - revert or restore changes with a single click.

  • Apply changes button - save and apply the edited adjustments to the image.

  • Cancel changes button - discard the modifications and revert back to the original image.

Text Tools

The text tools toolbar contains “Text” tool and related settings such as Font Size, Font Name, Text Color, Bold and Italic font styles.

You can also perform following operations with the text tools.

  • Press the Text tool and click desired position to start text input.

  • Press Ctrl+Enter to finish editing the text.

  • Move the selected text or add another one by using the Text tool button again.

  • Change the properties for multiple selected objects at once.

  • Double click text object to activate text editor.

Help Paint Tools | Help Text Tools | Demo Paint Tools | Demo Text Tools

New Image Filters - Vibrance and Saturation

Image filters can help you enhance your photos. Whether you need marketing images for your business, analyse image details, or just enhance images, there are various image filters supported in GcPdfViewer. In v6.2 release, GcPdfViewer adds two new widely used filters - Vibrance and Saturation. The two filters are added to the Image Filters panel, along with other filters. Also added is the ability to set ‘Intensity’ of the filter by adjusting the slider, ‘Preview’ button to preview the image filter temporarily and ‘Apply/Cancel' buttons to apply or cancel applying the image filter.

Help | Demo


GcImaging v6.1 - April 19, 2023

GrapeCity Documents for Imaging (GcImaging)

Draw a table using new TableRenderer class

A new TableRenderer class is added to render table layouts on images. With this class, you won’t need to know the size of table columns, merged cells, or the layout of rotated text. All complex details of table resizing are automatically adjusted by the layout engine. You would just need to provide information about the desired layout, style, and content.

TableRenderer class is built on top of new layout engine describe in the topic before. LayoutHost, LayoutView and LayoutRect provide the initial space for the TableRenderer. All table rows, columns, vertical and horizontal grid lines, and cells have the associated LayoutRect objects.

A TableRenderer instance takes multiple parameters. Please refer to the API<to link> for details of each parameter.

Following is basic definition of defining a table using TableRendererAPI class.

var ta = new TableRenderer(
    tableRect, FixedTableSides.TopLeftRight,
    rowCount: 5,
    columnCount: 4,
    gridLineColor: Color.Coral,
    gridLineWidth: 3,
    rowMinHeight: 30);

You can also add cells to the table and add text to it using AddCells(..) method that accepts data as parameter. Also included is AddMissingCells(..) method that ensures there is no gaps around the cells and also accepts data as a parameter.

Overall, with the various options in the new API, you can create a table with many complex layouts, one like below -

Draw Table using new TableRenderer class

Following are certain scenarios you can cover with TableRenderer API -

  1. Draw simple tables or tables with complex layout

  2. Merge table cells

  3. Rotate or set flow direction of text in cells

  4. Draw custom content in cell.

Have a look on detailed demos to check various codes on how to draw tables with different layouts.

Help | Demo

Support for Gaussian Blur effect in GcBitmap

Use the Gaussian Blur effect to create a blur based on the Gaussian function over the entire input image or the part of the image. It is a widely used effect in graphics software, typically to reduce image noise and detail. The visual effect of this blurring technique is a smooth blur resembling that of viewing the image through a translucent screen. To apply Gaussian Blur effect using GcImaging, create an instance of that class using the static GaussianBlurEffect.Get method, then pass it to the ApplyEffect method of GcBitmap class. The effect is applied to either the whole GcBitmap or to a rectangular fragment of the image. The ApplyEffect method accepts the optional parameter specifying the target rectangle. The GaussianBlurEffect.Get method accepts parameter - radius of the blur, which specifies the standard deviation of the Gaussian distribution as follow: sigma = radius / 3. When a blur effect is applied, the color of each pixel blends with all surrounding pixels at the distance of “radius” (pixels) in X and Y direction

Following code applies Gaussian Blur effect on an image with a dark frame around it -

using GrapeCity.Documents.Imaging;
using var bmp = new GcBitmap("door.jpg");

GrapeCity Documents for Imaging support for Gaussian Blur effect in GcBitmap

here are several scenarios you can apply with this support in GcImaging -

  • Blur an image with a frame around the image (specified by the radius of blur)

  • Blur an image with a specified colored frame around it

  • Blur just a part of the frame

  • Blur an image with a specified colored frame around it, together with outer border color using GaussianBlurBorderMode.BorderColor paramter.

  • Pass a GaussianBlurBorderMode.Wrap parameter to GaussianBlurEffect.Get method to change the output image

  • and many more..

Help | Demo

New methods to check if image pixels are black or white

GcImaging adds IsBlackAndWhite and IsGrayscale in GcBitmap class. These methods make it faster to check whether the image consists of black and white pixels or just shades of gray. The IsBlackAndWhite method checks whether all pixels of the image are either opaque black or opaque white. The IsGrayscale method checks whether all pixels of GcBitmap are the shades of gray, i.e. their alpha channel is set to 0xFF (fully opaque) and their red, green and blue channels have the same value.


Draw images with shadow

GcImaging adds ApplyGaussianBlur and ToShadowBitmap methods in GrayscaleBitmap class to draw images with shadow. The ApplyGaussianBlur method with two overloads applies gaussian blur to a grayscale bitmap and in addition, you can specify a border color which is assumed level of opacity (from 0 to 255) for the pixels surrounding the image. The ToShadowBitmap also has two overloads which draws transparency mask into an existing bitmap. With this method, you can specify a shadow color and an opacity factor. You can apply shadow on text or graphics.

Following code applies gaussian blur and shadow on a text. The code first converts bitmap to grayscale, applies gaussian blur, draws the grayscale bitmap’s transparency mask into existing bitmap object and adds shadow on bitmap accepting the bitmap, shadow color and opacity.

using var bmp = new GcBitmap(800, 600, false);
using (var g = bmp.CreateGraphics(Color.Transparent))
//see demo for full code 
    Draw(g, 20, 50);
using var gs = bmp.ToGrayscaleBitmap(ColorChannel.Alpha);
gs.ToShadowBitmap(bmp, Color.CadetBlue, 0.5f);
using (var g = bmp.CreateGraphics())
    Draw(g, 0f, 0f);


Programmatically drawing images with shadow effect

There are many other scenarios that you can achieve with these methods, for example applying gaussian blur and shadow on other graphic objects. Have a look on following resources for full code.

Help | Demo

Apply Glow and soft edges effect on text and graphics on grayscale bitmap

With GcImaging, you can apply glow and soft edges effect on grayscale bitmap using GrayscaleBitmap.ApplyGlow method that takes in radius of glow inflation (positive value) or deflation (negative value) and radius of blur. The glow and soft edges effects are similar to the effects in MS Word.

Following code applies glow and soft edges on graphics. For full code, see demo here.

//Glow effect
using (var gs = bmp1.ToGrayscaleBitmap(ColorChannel.Alpha))
    gs.ApplyGlow(10, 20);
    gs.ToShadowBitmap(bmp1, Color.Aquamarine, 0.6f);

//Soft Edges effect
 using var gs = bmp.ToGrayscaleBitmap(ColorChannel.Alpha);
gs.ApplyGlow(-5, 7);


Image below depicts Glow Effect applied on graphics and text.

Apply Glow and soft edges effect on text and graphics on grayscale bitmap

Help | Demo - Glow | Demo - Soft Edges

Line Breaking and Justification Settings in text

GcImaging introduces LineBreakingRules and WordBoundaryRules properties in TextLayout class that allow the user to switch from the standard Unicode line breaking/text segmentation algorithms to more simplified rules reproducing behavior of the text renderer in GDI+ or the line breaking rules in MS Excel. It is often useful to avoid full fledged algorithms from the Unicode standard when processing structured text data, for example, in XML format. GcImaging also introduces TextExtensionStrategy property to justify the text when TextLayout.TextAlignment property is set to either Justified or Distributed. The property offers enum values as Default, Normal, EastAsianExcel, and Excel depending on the property value permits text extension for wide characters and white spaces or for white spaces only. 

Following snapshot shows text with simple and unicode LineBreakingRule and TextExtensionStrategy Excel.

Line Breaking and Justification Settings in text

var tl = g.CreateTextLayout();
 tl.LineBreakingRules = LineBreakingRules.Simplified;
 tl.WordBoundaryRules = WordBoundaryRules.Simplified;
 tl.TextExtensionStrategy = TextExtensionStrategy.Excel;
var text = "abcdefg!1010101010abc;999999本列島で使され99 555";

Help | Demo

InterpolationMode moved to GcGraphics

InterpolationMode property can now be set using GcGraphics object. The property is also added to SaveAsImageOptions class when saving PDF to images. The property now allows you to control interpolation mode in a common way for all implementations of GcGraphics i.e. format-specific types of graphics such as GcPdfGraphics, GcBitmapGraphics, GcSvgGraphics, GcSkiaGraphics, GcWicBitmapGraphics, GcD2DBitmapGraphics.

GcPdf supports InterpolationMode property in the SaveAsImageOptions class, which will be utilized to set interpolation mode while drawing images in PDF files or saving the PDF files as images. The default value of SaveAsImageOptions.InterpolationMode is InterpolationMode.Downscale.

Note: The interpolation mode only affects the way raster images are drawn on a graphic, i.e., the result of DrawImage method and raster image resizing. Following code helps to set interpolation mode while drawing image on graphics using GcImaging.

// Load the image.
using var origBmp = new GcBitmap();
using (var stm = File.OpenRead(Path.Combine("Resources", "ImagesBis", "QRCode-57x57.png")))

// Enlarge and draw four copies of the image using the four different available interpolation modes.
using (var bmp = origBmp.Resize(twidth, theight, InterpolationMode.NearestNeighbor))
targetBmp.BitBlt(bmp, ip.X, ip.Y);
drawCaption("InterpolationMode.NearestNeighbor", ip.X, ip.Y + theight);


New layout engine with flat hierarchy to draw complex layouts

GrapeCity Documents introduces a new layout engine that adds LayoutRect and other related classes in the GrapeCity.Documents.Layout namespace to implement a layout model based on constraints and flat hierarchy of elements, without the obvious parent-child relations. With GcImaging API, there are no guidelines or other complications to draw complex layouts. The new layout engine allows you to position and size elements in a flexible way.

There are various constraints that are supported to draw such layouts. A constraint basically represents a connection between two rectangles, or between a rectangle and its owner LayoutView. You can apply various constraint types with GcImaging. Please refer to following features supported:

  • Simple Position Constraints

  • Chained Position Constraints

  • Min/Max Position Constraints

  • Anchor Points

  • Constraints based on other views

  • Dependent Views and Transformations

  • Contours

Following is an example of nested LayoutViews with different transformations.

New layout engine with flat hierarchy to draw complex layouts

You can know more about these Constraints in following resources.


GrapeCity Documents Image Viewer (GcImageViewer)

Crop and Resize toolbars

You can now easily crop and resize images using crop and resize options now present in toolbar. Following options can be applied -

Crop Tool

Update to the JavaScript Image Viewers Crop and Resize toolbars

  • Custom aspect ratio

  • Crop at X/Y Coordinates

  • Crop with Image Width or Height

  • Use Apply or Cancel options

Resize Tool

Update to the JavaScript Image Viewers Crop and Resize toolbars

  • Keep aspect ratio (boolean)

  • Set Width and Height of resized image

  • Use Apply or Cancel options

Help | Demo

Select/copy/search text content of SVG images

SVG can contain text elements, which are not images but real text. This text can now be selected, copied, or searched when the SVG image is displayed in the viewer.

Select/copy/search text content of SVG images in the JavaScript image Viewer -GcImagViewer

Help | Demo


GcImaging v6 - December 15, 2022

GrapeCity Documents for Imaging (GcImaging)

Support SVG text elements in GcSvgGraphics paths

GcImaging has been supporting drawing of text on GcSvgGraphics with path elements. In the v6 release, GcSvgGraphics includes the DrawTextAsPath property, which gets or sets whether the text is drawn with path elements or not. After setting DrawTextAsPath to false, the GcSvgGraphics tries to save text using the standard SVG text elements, enabling users to select, copy text, or search for some text fragments, which is not possible when text is drawn using paths.

Additionally, when text is drawn to GcSvgGraphics, the following properties can be used - DrawTextAsPath and EmbedFonts.When a PDF page is saved to SVG using GcPdf, the following properties can now be used from SaveAsImageOptions class: DrawSvgTextAsPath, EmbedSvgFonts. These properties allow embedding a font subset to the output SVG file. Not all viewers support fonts embedded in SVG, but the most widely used browsers do. No fonts are embedded if the EmbedFonts property is set to false (the default value). Setting those properties to true might help users using rare fonts which will hardly be found on the client machine.

The following is an SVG image in which the text on the left is drawn by setting GcGraphics.DrawTextAsPath to false, thereby making the text searchable.

View Help | Demo

New Transparency Layers in GcGraphics

GcImaging supports the new concept of Transparency layers that enable an application to manipulate a group of drawing operations and render images with multiple groups and an opacity attribute. To modify a layer, you can push a layer onto the GcGraphics object using the new PushTransparencyLayer() method. Subsequent drawing operations by the GcGraphics are then directed to the layer. After the layer properties are modified, use the PopTransparencyLayer() method to apply the layer's contents into the GcGraphics drawing surface. The Push/Pop operations can be nested multiple times. When "pushing" the layer, you can specify the content bounds. If those bounds are not specified, the content bounds are effectively taken to be the bounds of the drawing surface. The opacity is another parameter of the layer being "pushed". The opacity of layer content is multiplied by this value when compositing the layer to the target GcGraphics.

Layers are supported in the following classes derived from GcGraphics: GcPdfGraphics, GcBitmapGraphics, GcSkiaGraphics, GcSvgGraphics, GcD2DBitmapGraphics, GcWicBitmapGraphics.

The following code draws rectangles and text with various opacity parameters using g.PushTransparencyLayer() method and finally using g.PopTransparencyLayer() to merge the content on the graphics.

static void DrawFigure(GcGraphics g)
    var rect = new RectangleF(50, 50, 150, 100);

    g.FillRectangle(rect, new HatchBrush(HatchStyle.ZigZag)
        BackColor = Color.Yellow,
        ForeColor = Color.Purple
    g.DrawRectangle(rect, new Pen(Color.LightGreen, 6f));

    var clipRect = new RectangleF(70, 50, 110, 100);
    g.PushTransparencyLayer(clipRect, 0.5f);

    g.FillRectangle(rect, Color.Green);
    rect.Height -= 60;
    rect.Y += 30;
    g.DrawRectangle(rect, new Pen(Color.Red, 6f));

    var tl = g.CreateTextLayout();
    tl.DefaultFormat.ForeColor = Color.White;
    tl.DefaultFormat.FontSize = 38;
    tl.DefaultFormat.FontSizeInGraphicUnits = true;
    tl.DefaultFormat.FontName = "Tahoma";
    tl.MaxWidth = 150;
    tl.TextAlignment = TextAlignment.Center;
    tl.Append("Hello World!");
    g.DrawTextLayout(tl, new PointF(50, 50));


View Help

GrapeCity Documents Image Viewer (GcImageViewer) New


GrapeCity Documents for Imaging introduces JavaScript-based client-side GrapeCity Documents Image Viewer (GcImageViewer). The control supports viewing and editing images in popular formats. It provides plugin support for adding image editing options and the ability to download the edited image on the client-side. 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. It is a cross-platform solution for viewing and editing Image files in web apps running on Windows, MAC, Linux, iOS, and Android devices. It works in all modern browsers, including Edge, Chrome, Firefox, Opera, and Safari.

Apply Image Filters in JS Image Viewer

There are different UI options available in GcImageViewer to load, process, and save images. The following are key features of the control:

  1. Load Image: This option lets you load images of type JPEG, PNG, TIFF, GIF, BMP, ICO, SVG and WebP.

  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. Page Tools Plugin

    1. Rotate image: Rotates images in clockwise direction

    2. Flip image horizontally or vertically: Flip the image as mirror image, horizontally or vertically.

    3. Crop/resize images: This option helps to crop or resize images as per user preference using image handles.

  7. Undo/Redo image edits: Undo/Redo any image edits in the control.

  8. Apply image filters to images: Apply filters from various options and modify the image look.

GcImageViewer is available with GrapeCity Documents for Imaging or the option to install from npm.
npm install @grapecity/gcimageviewer

View the following blogs for the full feature list supported in the viewer and how to configure it in ASP.NET Core application.

For more info, view Help | Demo | License Info