What's New in Documents for Imaging v6

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(
    page.Graphics,
    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 -

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");
bmp.ApplyEffect(GaussianBlurEffect.Get(30));
bmp.SaveAsJpeg("door_GaussianBlurEffect.jpg");

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.

Help

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.ApplyGaussianBlur();
gs.ToShadowBitmap(bmp, Color.CadetBlue, 0.5f);
bmp.ConvertToOpaque(Color.AliceBlue);
using (var g = bmp.CreateGraphics())
{
    Draw(g, 0f, 0f);
}
bmp.SaveAsPng(@"image.png");

 

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.

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.

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")))
origBmp.Load(stm);

// 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);

Help

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.

You can know more about these Constraints in following resources.

Help

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

• Custom aspect ratio

• Crop at X/Y Coordinates

• Crop with Image Width or Height

• Use Apply or Cancel options

Resize Tool

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

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));

    g.PopTransparencyLayer();
}

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.

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.

• New JavaScript Image Viewer Library from GrapeCity Documents

• Edit Images in JavaScript Image Viewer

For more info, view Help | Demo | License Info