Forem: Andriy Andruhovski

Analyzing images in PDF using Microsoft Cognitive Services.

Andriy Andruhovski — Mon, 24 Aug 2020 18:15:39 +0000

Analyzing the contents of a PDF document is a very common task. But if earlier it was interesting for users to get a text from a document, now they want to look deeper.

Let's take an example, we have several documents containing images of tourist spots or points of interest, and we want to make these documents more searchable. Another example - we have PDF catalogs of clothes and we want to know which ones have T-shirts.

Modern AI services allow us to determine the type and nature of the images contained in them and they can help us to solve this task.

In this article, we will consider an example of integration Aspose.PDF for .NET with Microsoft Cognitive Services.
So, assume we have a bunch of PDF documents with images and we want to know what are depicts in them. We should add/update keywords in the document to make our documents more searchable.

Let split our task into 3 subtasks:

extract images
analyze images and get the tags
add/update meta information in PDF

Image extraction

To extract images from PDF document we will use an ImagePlacementAbsorber class. First, we create an instance of ImagePlacementAbsorber, then
get the images from the document using Visit method and filter small images to avoid analyze decorative and/or non-informative images.

var fileNames = new StringCollection();
// Create an instance of ImagePlacementAbsorber
var abs = new ImagePlacementAbsorber();
// Fill ImagePlacements collection with images from PDF
abs.Visit(new Aspose.Pdf.Document(pdfFileName));
// Filter small images and make an array for the future handling
var imagePlacements = abs.ImagePlacements
    .Where(i => (i.Rectangle.Width > 50) && (i.Rectangle.Height > 50))
    .ToArray();

We save each found image in a temporary directory for later analysis.

 for (var i = 0; i < imagePlacements.Count(); i++)
{
    var fileName = $@"{TempDir}\\image_{i}.jpg";
    // Create a file stream to store image in the temporary directory
    using (var stream = new FileStream(fileName, FileMode.Create))
    {
        imagePlacements[i].Image.Save(stream, ImageFormat.Jpeg);
        stream.Close();
    }
    // Add filename to the collection
    fileNames.Add(fileName);
}

To store the extracted image we should create a file stream and pass it to the ImagePlacement.Save method

Image recoginition

As stated above, we will use Microsoft Computer Vision service

At the previous stage, we got image files in the temporary directory and a list of files that can be saved in a specific variable. Now we will upload each image to the Microsoft Computer Vision service and will get the tags for recognized objects. Each tag contains the Name and Confidence properties. The Confidence property points to probability for correspondence Name to the object. Thus we can filter less valuable tags.

private static IEnumerable<string> CollectImageTags(
    StringCollection imageFileNames,
    double confidence)
{
    // Create a client for Computer Vision service
    var client = Authenticate(Endpoint, SubscriptionKey);
    // Create a set of tags
    var tags = new HashSet<string>();

    foreach (var fileName in imageFileNames)
    {
        // Upload image and recognize it
        var result = AnalyzeImage(client, fileName).Result;
        // Get the tags collection
        var imageTags =
            result.Tags
                    // filter less valuable tags
                .Where(iTag => iTag.Confidence > confidence)
                    // and select only names
                .Select(iTag => iTag.Name);
        // add new tags into tag's set
        tags.UnionWith(imageTags);
    }
    return tags;
}

Two helper methods were used in the snippet above. The first creates a client for Computer Vision API and the second uploads and analyzes the image.

public static ComputerVisionClient Authenticate(string endpoint, string key)
{
    var client =
        new ComputerVisionClient(new ApiKeyServiceClientCredentials(key))
            {Endpoint = endpoint};
    return client;
}

public static async Task<TagResult> AnalyzeImage(ComputerVisionClient client, string imagePath)
{
    Console.WriteLine($"Analyzing the image {Path.GetFileName(imagePath)}...");
    Console.WriteLine();
    // Analyze the URL image 
    return await client.TagImageInStreamAsync(
        File.OpenRead(imagePath ?? throw new ArgumentNullException(nameof(imagePath))));
}

The ComputerVisionClient is a class from Microsoft.Azure.CognitiveServices.Vision.ComputerVision library. If you interested in how to work with Microsoft Computer Vision, please refer to Microsoft Cognitive Services Documentation.

Update Meta information

To work with meta information in the Aspose.PDF library provides class DocumentInfo. According to our task, we will use DocumentInfo.Keywords property.

private static void SaveMetaData(
    string pdfFileName,
    IEnumerable<string> tags)
{
    var document = new Aspose.Pdf.Document(pdfFileName);
    _ = new DocumentInfo(document)
    {
        Keywords = string.Join("; ", tags)
    };
    document.Save(pdfFileName.Replace(".pdf","_tags.pdf"));
}

So, let look at whole code:

using System;
using System.Collections.Generic;
using System.Collections.Specialized;
using System.Drawing.Imaging;
using System.Threading.Tasks;
using System.IO;
using System.Linq;

using Aspose.Pdf;
using Microsoft.Azure.CognitiveServices.Vision.ComputerVision;
using Microsoft.Azure.CognitiveServices.Vision.ComputerVision.Models;


namespace Aspose.PDF.Demo.ImageClassification
{
    class Program
    {
        private const string SubscriptionKey = "<add key here>";
        private const string Endpoint = "https://<add endpoint here>.cognitiveservices.azure.com/";
        private const string LicenseFileName = @"<add license file here>";
        private const string PdfFileName = @"C:\tmp\<file>";

        private const string TempDir = "C:\\tmp\\extracted_images\\";
        private static readonly License License = new Aspose.Pdf.License();

        static void Main()
        {
            //you can use a trial version, but please note 
            //that you will be limited with 4 images. 
            //License.SetLicense(LicenseFileName);
            AnalyzeImageContent(PdfFileName);
        }

        private static void AnalyzeImageContent(string pdfFileName)
        {
            // Specify the directories you want to manipulate.
            var di = new DirectoryInfo(@TempDir);

            try
            {
                // Determine whether the directory exists.
                if (!di.Exists)
                    // Try to create the directory.
                    di.Create();

                var images = ExtractImages(pdfFileName);
                var tags = CollectImageTags(images, 0.9);
                SaveMetaData(pdfFileName, tags);

                // Delete the directory.
                di.Delete(true);
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex.Message);
            }
        }

        private static void SaveMetaData(string pdfFileName, IEnumerable<string> tags)
        {
            var document = new Aspose.Pdf.Document(pdfFileName);
            _ = new DocumentInfo(document)
            {
                Keywords = string.Join("; ", tags)
            };
            document.Save(pdfFileName.Replace(".pdf","_tags.pdf"));
        }

        private static IEnumerable<string> CollectImageTags(StringCollection imageFileNames, double confidence)
        {
            // Create a client for Computer Vision service
            var client = Authenticate(Endpoint, SubscriptionKey);
            // Create a set of tags
            var tags = new HashSet<string>();

            foreach (var fileName in imageFileNames)
            {
                // Upload image and recognize it
                var result = AnalyzeImage(client, fileName).Result;
                // Get the tags collection
                var imageTags =
                    result.Tags
                            // filter less valuable tags
                        .Where(iTag => iTag.Confidence > confidence)
                            // and select only names
                        .Select(iTag => iTag.Name);
                // add new tags into tag's set
                tags.UnionWith(imageTags);
            }
            return tags;
        }

        private static StringCollection ExtractImages(string pdfFileName)
        {
            var fileNames = new StringCollection();
            // Create an instance of ImagePlacementAbsorber
            var abs = new ImagePlacementAbsorber();
            // Fill ImagePlacements collection with images from PDF
            abs.Visit(new Aspose.Pdf.Document(pdfFileName));
            // Filter small images and make an array for the future handling
            var imagePlacements = abs.ImagePlacements
                .Where(i => (i.Rectangle.Width > 50) && (i.Rectangle.Height > 50))
                .ToArray();

            for (var i = 0; i < imagePlacements.Count(); i++)
            {
                var fileName = $@"{TempDir}\\image_{i}.jpg";
                // Create a file stream to store image in the temporary directory
                using (var stream = new FileStream(fileName, FileMode.Create))
                {
                    imagePlacements[i].Image.Save(stream, ImageFormat.Jpeg);
                    stream.Close();
                }
                // Add filename to the collection
                fileNames.Add(fileName);
            }
            return fileNames;
        }

        public static ComputerVisionClient Authenticate(string endpoint, string key)
        {
            var client =
                new ComputerVisionClient(new ApiKeyServiceClientCredentials(key))
                    {Endpoint = endpoint};
            return client;
        }

        public static async Task<TagResult> AnalyzeImage(
            ComputerVisionClient client,
            string imagePath)
        {
            Console.WriteLine($"Analyzing the image {Path.GetFileName(imagePath)}...");
            Console.WriteLine();
            // Analyze the URL image 
            return await client.TagImageInStreamAsync(
                File.OpenRead(imagePath ?? throw new ArgumentNullException(nameof(imagePath))));
        }
    }
}

Additional resources

Using PaperCSS with ASP.NET Core MVC 2.1 – Layout and Components

Andriy Andruhovski — Sun, 04 Nov 2018 23:50:41 +0000

In the previous part, we created a simple ASP.NET Core MVC application based on the PaperCSS framework, now we add two pages to show how we can make own layout and use components such as tables or cards.

Layout

PaperCSS uses naming conversion similar to Bootstrap: row, xs-, sm-, md-, lg-, col.

Let's change About.cshtml:

@{
    ViewData["Title"] = "About";
}
<section class="paper">
    <div class="row flex-middle">
        <div class="sm-6 md-8 lg-10 col">
            <h2>@ViewData["Title"]</h2>
            <h3>@ViewData["Message"]</h3>
        </div>
        <div class="sm-6 md-4 lg-2 col">
            <p>Use this area to provide additional information.</p>
        </div>
    </div>   
</section>

In the new version we created one row with two-column:

Additionally, we decorated row with flex-middle class to place the content in the middle of the cell.

Next, we will change the Contact.cshtml:

@{
    ViewData["Title"] = "Contact";
}
<style type="text/css">
    .contact {
         height: 500px;
     }
</style>

<div class="row">
    <div class="sm-12 md-6 col">
        <section class="paper contact">
            <h2>@ViewData["Title"]</h2>
            <h3>@ViewData["Message"]</h3>

            <address>
                One Microsoft Way<br/>
                Redmond, WA 98052-6399<br/>
                <abbr title="Phone">P:</abbr>
                425.555.0100
            </address>

            <address>
                <strong>Support:</strong> <a href="mailto:Support@example.com">Support@example.com</a><br/>
                <strong>Marketing:</strong> <a href="mailto:Marketing@example.com">Marketing@example.com</a>
            </address>
        </section>
    </div>
    <div class="sm-12 md-6 col">
        <aside class="paper contact">
            <iframe width="325" height="300" src="https://www.bing.com/maps/embed?h=300&w=325&cp=51.478418000000005~-0.18626199999999482&lvl=12&typ=d&sty=r&src=SHELL&FORM=MBEDV8" scrolling="no"></iframe>
            <div style="white-space: nowrap; text-align: center; width: 325px; padding: 6px 0;">
                <a id="largeMapLink" target="_blank" href="https://www.bing.com/maps?cp=51.478418000000005~-0.18626199999999482&amp;sty=r&amp;lvl=12&amp;FORM=MBEDLD">View Larger Map</a> &nbsp; | &nbsp;
                <a id="dirMapLink" target="_blank" href="https://www.bing.com/maps/directions?cp=51.478418000000005~-0.18626199999999482&amp;sty=r&amp;lvl=12&amp;rtp=~pos.51.478418000000005_-0.18626199999999482____&amp;FORM=MBEDLD">Get Directions</a>
            </div>
        </aside>
    </div>
</div>

In this view, we add Bing Maps fragment as the second cell and align both cells by height.

Components

In this post, we add two pages to show how to works the most popular components - table and cards. For demo purposes, we will add Event and Speaker classes

using System;
namespace PaperCssDemo.Models
{
    public class Event
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public string ShortDescription { get; set; }
        public DateTime StartDateTime { get; set; }
        public string Location { get; set; }
        public string ImageUrl { get; set; }
    }

    public class Speaker
    {
        public int Id { get; set; }
        public string FullName { get; set; }
        public string Address { get; set; }
        public string Email { get; set; }
        public string Phone { get; set; }
    }
}

and create 2 actions to display events in the card-style and speaker as a table:

public IActionResult Speakers()
{
    var speakers = new List<Speaker>();
    for (var i = 0; i < 10; i++)
    {
        speakers.Add(new Speaker
        {
            Id = i + 1,
            FullName = Faker.Name.FullName(NameFormats.Standard),
            Address = Faker.Address.City(),
            Email = Faker.Internet.Email(),
            Phone = Faker.Phone.Number()
        });
    }

    return View(speakers);
}

public IActionResult Events()
{
    var events = new List<Event>();
    for (var i = 0; i < 15; i++)
    {
        events.Add(new Event
        {
            Id = i + 1,
            Title = Faker.Extensions.ArrayExtensions.Random(new[] { "Meetup", "Conference", "Exhibition", "Party" }),
            ShortDescription = Faker.Lorem.Sentence(6),
            Location = $"{Faker.Address.City()}, {Faker.Address.Country()}",
            StartDateTime = new DateTime(2018, 10, Faker.RandomNumber.Next(1, 28)),
            ImageUrl = $"https://loremflickr.com/320/240?random={i + 1}"
        });
    }
    return View(events);
}

The table presentation is pretty straightforward. We can add table-hover or table-alternating to change the style of the table:

@model IEnumerable<PaperCssDemo.Models.Speaker>

@{
    ViewData["Title"] = "Speakers";
}

<h2>Speakers</h2>

<table class="table-hover">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Id)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.FullName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Address)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Email)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Phone)
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Id)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.FullName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Address)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Email)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Phone)
                </td>
            </tr>
        }
    </tbody>
</table>

The Speakers view will be look like the following screenshot:

The cards-style uses a few classes to decorate card: card, card-body, card-title, card-subtitle, card-text

@model IEnumerable<PaperCssDemo.Models.Event>

@{
    ViewData["Title"] = "View";
}

<div class="row">
    @foreach (var item in Model)
    {
        <div class="sm-6 md-4 col">
            <div class="card">
                <img src="@item.ImageUrl" alt="Card random image">

                <div class="card-body">
                    <h4 class="card-title">@Html.DisplayFor(modelItem => item.Title)</h4>
                    <h5 class="card-subtitle">@Html.DisplayFor(modelItem => item.Location), @Html.DisplayFor(modelItem => item.StartDateTime)</h5>
                    <div style="height:100px">
                        <p class="card-text">@Html.DisplayFor(modelItem => item.ShortDescription)</p>
                    </div>
                    <button>Let me go here!</button>
                </div>
            </div>
        </div>
    }
</div>

In this view, we show per 3 cards in line on the medium screen and per 2 cards on the small:

Finally, we add links in Layout.cshtml:

<a asp-area="" asp-controller="Home" asp-action="Events">Events</a>
<a asp-area="" asp-controller="Home" asp-action="Speakers">Speakers</a>

Using PaperCSS with ASP.NET Core MVC 2.1 – Step By Step

Andriy Andruhovski — Mon, 15 Oct 2018 22:38:02 +0000

Intro

In this article, I want to share my experience to use PaperCSS framework. I also wanted to see how the new Library Manager works in VS 2017.
PaperCSS is a framework that presents pages like paper pieces. As said authors, the goal of PaperCSS is to be as minimal as possible when adding classes.
To learn more about PaperCSS, please follow the official site.

UPD: You can find the second part of this article here.

Prerequisites

You should have installed the Visual Studio 2017 v.15.8.7 and .NET Core 2.1 Framework. You also need a fake data generator like Faker.Net.

Steps for creating a Web Application with PaperCSS

Step 1: Creating the ASP.NET Core MVC Project

To start with you have to create a Core MVC project. Follow the below to create the project.

Launch Visual Studio 2017;
Go to File menu and select New->Project;
In the left panel of the New Project, expand the Installed -> Templates -> Visual C# -> Web;
Select ASP.NET Core Web Application from the center pane. Enter the name of the project (PaperCss) and select the location. Then press the "OK" button;
In the New ASP.NET Core Web Application window, make sure ASP.NET Core 2.1 is selected at the top;
For this demo, I choose Web Application (MVC) with No Authentication and Configure for HTTPS.

Step 2: Replacing CSS framework.

Since the current version of ASP.NET Core Web Application template was not updated to the new version, we need to remove the content of the lib folder and create a new one. We should do it for two reasons: old content was tuned with Bower and we need to replace Bootstrap to PaperCSS.

Follow to the lib folder and remove all content except favicon.ico;
Right-click on the lib and select Add->Client-Side Library;
In Library textbox enter jquery@3.3.1 and click Install
Right-click on the lib and select Add->Client-Side Library again;
Choose provider unpkg and file Library textbox with papercss@1.5.4
Because we need only dist folder from PaperCSS, we select Choose specific folder option and check then dist folder in the tree and click Install.

Step 3: Modifying _Layout.cs

Now we can apply PaperCSS to our application. In this step, we will change a navigation bar in Views/Shared/_Layout.cs.

Replace links in line 7 and 11 to PaperCSS:
Replace scripts block at the end of the file with new:
Update the navigation bar with a new design:

For better appearance, you can also remove <hr> tag before footer-element.

Step 4: Modifying _CookieConsentPartial.cshtml

Replace the content of the file with a new one:

To learn more about the modal component, please follow to PaperCSS documentation

Step 5: Creating a new design for generated pages.

In this demo, the Index page will be used for news publishing, but About and Contact will be unchanged.

Create an Article model:
Change the Index action in HomeController
Replace Index view layout:
About and Contact views will have minimal changes. We just wrap content in view with <section class="paper">...</section> element.

After running our application will look like following screenshots:

Conclusion

In this post, we met with basic steps to use PaperCSS.
In the next posts, we will consider how to use PaperCSS grid layout, tables, and other components.

Generating SVG document using Aspose.HTML

Andriy Andruhovski — Tue, 09 Oct 2018 00:20:06 +0000

SVG - Scalable Vector Graphics (Scalable Vector Graphics) is a vector-based format for web developers. This type of format has become so popular due to the fact that its images can be displayed at high resolutions without quality losing since SVG is a vector format.

The impetus to the development of this language markup was first given by the World Wide Web Consortium in 1999. W3C has given the concept of SVG - language markup for creating two-dimensional graphical interfaces and images as part of HTML specification.

Introduction

Aspose.HTML supports parsing of HTML5 and SVG documents. It also enables to construct a W3C Document Object Model based documents. In the previous article, we considered how to generate an HTML document. Now we will talk about SVG images creation.

As in the case with HTML documents, we have a class that represents the root of the SVG image. This class named SVGDocument and it has methods and properties according to SVG element description in the W3C standard. Additionally, SVGDocument has methods Save and RenderTo.

Basic Shapes Created by SVG

We can use following SVG-elements to create shapes.

Line;
Circle;
Rect (rectangle);
Ellipse;
Polygon;
Polyline (a multiline shape);
Path;
Text;

Creating empty SVG document

The following snippet shows how to we create an empty SVG document:

public static void GenerateSvgDemo(string widthStr, string heightStr, string bkColorStr)
{
    //In this method, we demonstrate several techniques for setting values of width and height
    var width = float.Parse(widthStr);
    var height = float.Parse(heightStr); ;

    //Creat new (empty) image 
    var svgDocument = new SVGDocument(new Configuration());

    //Adjust image size
    svgDocument.RootElement.Width.BaseVal.ValueAsString = widthStr;
    svgDocument.RootElement.Height.BaseVal.ValueAsString = heightStr;

    svgDocument.RootElement.ViewBox.BaseVal.X = 0;
    svgDocument.RootElement.ViewBox.BaseVal.Y = 0;
    svgDocument.RootElement.ViewBox.BaseVal.Width = width;
    svgDocument.RootElement.ViewBox.BaseVal.Height = height;
}

Drawing SVG images

The SVGLine element

The line element draws the line. You can create a line definition by defining the starting and ending X and Y coordinates. Code to draw a line in SVG is given below:

//Line 
if (!(svgDocument.CreateElementNS(SvgXmlns, "line") is SVGLineElement line))
    throw new NullReferenceException("Line Element");

line.X1.BaseVal.ValueAsString = "25";
line.Y1.BaseVal.ValueAsString = "25";
line.X2.BaseVal.ValueAsString = "200";
line.Y2.BaseVal.ValueAsString = "200";
line.Style.CSSText = "stroke:green;stroke-width:3";

In the previous example, the attributes X1 and Y1 are the starting coordinates of the string, and the attributes X2 and Y2 are the trailing attributes of the line. You can also change the direction of the line by simply changing the coordinates of the line.

The SVGCircle Element

This element is used to define the circle. To define the circle you need to define a Cx, Cy attribute that will be the center of the circle and you need to define the radius R of the circle. The code to draw a circle in SVG is given below:

//Circle

if (!(svgDocument.CreateElementNS(SvgXmlns, "circle") is SVGCircleElement circle))

    throw new NullReferenceException("Circle Element");

circle.Cx.BaseVal.ValueAsString = "120";

circle.Cy.BaseVal.ValueAsString = "120";

circle.R.BaseVal.ValueAsString = "50";

circle.Style.CSSText = "stroke:black;stroke-width:2";

// another way to set style properties

circle.Style.SetProperty("fill", "red", string.Empty);

svgDocument.RootElement.AppendChild(circle);

The SVGRect Element

The SVGRectelement draws a rectangle. Creating the rectangle is as simple as defining a width and height. The code to draw a rectangle is given below:

// Rectangle

if (!(svgDocument.CreateElementNS(SvgXmlns, "rect") is SVGRectElement rect))

    throw new NullReferenceException("Rect Element");

rect.X.BaseVal.Value = 250;

rect.Y.BaseVal.Value = 250;

rect.Width.BaseVal.Value = width/4;

rect.Height.BaseVal.Value = height/4;

rect.Style.SetProperty("fill", "#" + bkColorStr, string.Empty);

svgDocument.RootElement.AppendChild(rect);

The SVGEllipse Element

The SVGEllipseElement element is used to draw an ellipse in SVG. Drawing of an ellipse is similar to drawing a circle but to define an ellipse you need to define 2 radiuses. The code to draw an ellipse in SVG is given below:

// Ellipse

if (!(svgDocument.CreateElementNS(SvgXmlns, "ellipse") is SVGEllipseElement ellipse))

    throw new NullReferenceException("Rect Element");

ellipse.Cx.BaseVal.Value = 100;

ellipse.Cy.BaseVal.Value = 250;

ellipse.Rx.BaseVal.Value = 20;

ellipse.Ry.BaseVal.Value = 30;

ellipse.Style.SetProperty("fill", "#112233", string.Empty);

svgDocument.RootElement.AppendChild(ellipse);

The SVGPolygon Element

Polygons are 2-dimensional shapes. They are made of straight lines and the shape is "closed" (all the lines connect).

// Polygon

if (!(svgDocument.CreateElementNS(SvgXmlns, "polygon") is SVGPolygonElement polygon))

    throw new NullReferenceException("Polygon Element");


polygon.SetAttribute("points", "210,10 10,260 300,260");

polygon.Style.SetProperty("fill", "#440066", string.Empty);

svgDocument.RootElement.AppendChild(polygon);

The SVGPolygonElement

A polyline is a drawing consisting of multiple line definitions. This example is mostly the similar to the previous:

// Polyline

if (!(svgDocument.CreateElementNS(SvgXmlns, "polyline") is SVGPolylineElement polyline))

    throw new NullReferenceException("Polyline Element");

polyline.SetAttribute("points", "0,50 50,50 50,100 100,100 100,150 150,150 150,200");

polyline.Style.CSSText = "fill:white;stroke:black;stroke-width:2";

svgDocument.RootElement.AppendChild(polyline);

The SVGPathElement

To draw all the elements and all other complex elements you can use the path element. Using the path element you can create an arbitrary drawing.

// Path

if (!(svgDocument.CreateElementNS(SvgXmlns, "path") is SVGPathElement path))

    throw new NullReferenceException("Path Element");

path.SetAttribute("d", "M 100 350 q 150 -300 300 0");

path.Style.CSSText = "stroke:black;stroke-width:2";

svgDocument.RootElement.AppendChild(path);

Drawing text

The last example shows how we can add text to SVG image:

if (!(svgDocument.CreateElementNS(SvgXmlns, "text") is SVGTextElement text))

    throw new NullReferenceException("Path Element");

text.SetAttributeNS(null, "x", (width / 2).ToString());

text.SetAttributeNS(null, "y", (height / 2).ToString());

text.TextContent = $"{widthStr}x{heightStr}";

text.Style.SetProperty("font-family", "Arial", string.Empty);

text.Style.SetProperty("font-weight", "bold", string.Empty);

text.Style.SetProperty("dominant-baseline", "central", string.Empty);

var fontSize = Math.Round(Math.Max(12, Math.Min(.75 * Math.Min(width, height), 0.75 * Math.Max(width, height) / 12)));

text.Style.SetProperty("font-size", $"{fontSize}px", string.Empty);

text.Style.SetProperty("fill", "purple", string.Empty);

text.Style.SetProperty("text-anchor", "middle", string.Empty);

svgDocument.RootElement.AppendChild(text);

Conclusion

That's all the basics of SVG, in the following articles will be considered more complex examples of the use of vector graphics, but now as a simple living example, I invite you to consider a Placeholder Generator.

Generating HTML document using Aspose.HTML for .NET

Andriy Andruhovski — Mon, 08 Oct 2018 21:11:52 +0000

From time to time you having a deal with a situation where you have to generate some HTML in C# code. Of course, the simplest way is to merge the strings and returns that result from the method. This is not the nicest solution, and it is good for some short strings.

In case you have a more complex HTML structure, the code becomes unsupported through many string formats and merging.

Although this is the worst way to do it, a lot of developers go with this approach but it means "it working now, but not it will not be supported in the future".

In this article, I want to show how to generate an HTML using Aspose.HTML for .NET.

Introduction

Aspose.HTML for .NET is both parser and page renderer. As parser, it provides access to the W3C-standard Document Object Model. So if familiar with DOM, you can easily generate an HTML document with Aspose.HTML

The Aspose.HTML library has an HTMLDocument class. This class is a root of the HTML hierarchy and holds the entire content.

The class contains several methods and properties that can help us create a simple page:

Methods

AppendChild - Adds the node newChild to the end of the list of children of this node. If the newChild is already in the tree, then it is removed;
CreateElement - Creates an element of the type specified. Note that the instance returned implements the Element interface, so attributes can be specified directly on the returned object;

Properties

ParentElement - Gets the parent Element of this node;
Body - The element that holds the content for the document;
ChildNodes - A NodeList that contains all children of this node. If there are no children, this is a NodeList containing no nodes.

The methods and properties described above use a NodeList. The NodeList provides the abstraction of an ordered collection of nodes, without defining or constraining how this collection is implemented. In real cases of usage, NodeList represents a list of DOM elements and depends on a query type.

Creating a simple HTML document

Let’s try to create a simple document, which contains one image, one ordered list and a table 3x3. We will use Visual Studio 2017 in this demo:

Step 1: Create a Project in Visual Studio

Open Visual Studio and select File >> New >> Project menu.

In New Project, you will see Installed Templates in the left side templates listing. On the left side, you have a choice to select a language - Visual C#. I selected Visual C#->Windows Classic Desktop->Console App (.NET Framework).

Step 2: Add Aspose.Html library

Go to Tools->Nuget Package Manager->Package Manager Console. Run command: Install-Package Aspose.Html

Step 3: Create an empty html document

Let’s try to create an empty HTML document and store it to local file c:\apsdemo\files\demo1.html. You need to create a folder for a demo file. One of the ways to implement this is running the command in the Package Manager Console: New-Item -ItemType Directory C:\asposedemo\files\

Add the following text to the Main method:

Run the application and examine the results. After the execution in the folder c:\asposedemo\files\ there appears file demo1.html with the initial document structure:

Step 4: Add the image element to the document

First, we need to create an instance of HTMLImageElement using document.CreateElement method and fill its properties with the appropriate value. In this example, we set an src, alt and title attributes and call AppendChild method to append this element to the Body.

Add the following code to the Main method before document.Save:

Run the application and examine the results. Please notice, that the image was stored in a folder with template name _files. After the execution in the folder c:\asposedemo\files\ there appears file demo01.html with the initial document structure:

Step 5: Add the ordered list to the document

We will use the same strategy as in the previous step:

create an instance of HTMLOListElement as a container for the list items,
create several list items and add them to the container,
add the container to the Body.

We will use TextContent property to save list item value.

Add the following code to the Main method before document.Save:

Run the application and examine the results. You will see something like this:

Step 6: Add the table to the document

As in the steps above, we need to:

create a table as a container of thead/tfoot/tbody,
create a tbody as a container of rows,
create rows and add cells to each row.

Please notice, that we will create 3 rows with 3 cells each. For each row, we will set an id attribute and for each cell, we well set id and a cell's value. It's only for demo purposes.

Add the following text to the Main method:

Run the application and examine the results. You will see something like this:

Additional step

In this example a <head>-element remained empty. We can use FirstChild property twice to get an instance <head>-element and add a <title>-element for example:

So, we have created a simple page with an image, a list, and a table. You can see full example here:

Aspose.PDF Cloud: Converting documents using CSharp SDK (part 3)

Andriy Andruhovski — Mon, 20 Aug 2018 15:49:32 +0000

Full sample can be downloaded from here.

In the previous part, we learned how to PDF docs can be converted to other formats, but only with default settings. Now will try to customize some conversion settings and get more flexible results. The number and purpose of the settings depend on the conversion format. It should also be noted that there are formats that do not require additional settings, for example, PDF to XPS or PDF to PDF/A. Therefore, we start learning from simple conversions to more complex ones.

In this part, we continue to use ASP.NET MVC5 application, but with changes:

we should rewrite Index.cshtml and call different actions for different formats;
we need new actions for each format in HomeController;

The new version of Index.cshtml is shown below:

Next, we remove unused and add new actions to HomeContoller.

In addition, we create a model for basic options and derive from it models for specific formats.

public class OptionsModel
{
    [Display(Name = "File Name:")]
    public string Name { get; set; }

    [Display(Name = "Folder:")]
    public string Folder { get; set; }
}

Convert files from PDF to XPS, SVG, PDF/A

As stated above, we have a few formats without additional settings - XPS, SVG and PDF/A. The code for XPS and SVG is very simple and doesn't require additional explanations.

public ActionResult ToSvg(string filename)
{
    SaaSposeResponse response;
    var outPath = $"{FolderName}/svg/{filename.Replace("pdf","zip")}";
    try
    {
        response = PdfApi.PutPdfInStorageToSvg(filename, outPath, folder: FolderName);
    }
    catch (ApiException ex)
    {
        return View("ConvertError", ex);
    }

    ViewBag.OutPath = outPath;
    return View("ConvertSuccess", response);
}

public ActionResult ToXps(string filename)
{
    SaaSposeResponse response;
    var outPath = $"{FolderName}/xps/{filename.Replace("pdf", "zip")}";
    try
    {
        response = PdfApi.PutPdfInStorageToXps(filename, outPath, FolderName);
    }
    catch (ApiException ex)
    {
        return View("ConvertError", ex);
    }

    ViewBag.OutPath = outPath;
    return View("ConvertSuccess", response);
}

Aspose.PDF Cloud supports two subformats: PDF/A-1a and PDF/A-1b, so we can clarify these subtypes.

public enum PdfaSubType
{
    [Display(Name = "PDF/A-1a – Level A (accessible) conformance")]
    PDFA1A,
    [Display(Name = "PDF/A-1b – Level B (basic) conformance")]
    PDFA1B
}
public class PdfaOptionsModel : OptionsModel
{
    public PdfaSubType PdfaSubType { get; set; }
}

For this and other types of transformations, we use the standard approach: we show possible settings for the user (by HTTPGet) and perform the conversion (by HTTPPost).

public ActionResult ToPdfa(string filename)
{
    var pdfaOptions = new PdfaOptionsModel
    {
        Name = filename,
        Folder = FolderName,
        PdfaSubType = PdfaSubType.PDFA1A
    };
    return View(pdfaOptions);
}

[HttpPost]
public ActionResult ToPdfa(PdfaOptionsModel options)
{            
    SaaSposeResponse response;
    var outPath = $"{options.Folder}/pdfa/{options.Name}";
    try
    {
        response = PdfApi.PutPdfInStorageToPdfA(
            options.Name,
            outPath,
            options.PdfaSubType.ToString(),                    
            options.Folder);
    }
    catch (ApiException ex)
    {
        return View("ConvertError", ex);
    }

    ViewBag.OutPath = outPath;
    return View("ConvertSuccess", response);
}

Convert files from PDF to DOC

Let's consider the more complex case. For this conversion we have the following settings:

Format - an output format: Word 2003 (doc) or Word 2007 (docx)
Mode - a recognition mode: TextBox or Flow. The TextBox mode applies when we need layout much closer to the original doc. We can use the Flow mode when the output document needs further editing. Paragraphs and text lines in the flow mode allow easy modification of text, but unsupported formatting objects will look worse than in the Textbox mode.
AddReturnToLineEnd - this setting allow to generate lines (true) or paragraphs (false)
MaxDistanceBetweenTextLines - max distance between text lines. This option allows customizing paragraph creation. The larger value allows creating fewer paragraphs and vice versa.
RelativeHorizontalProximity - this setting defines the width of space between text elements(letters, syllables) that must be treated as the distance between words during recognition of words in source PDF. It used only in cases when source PDF contains specific rarely used fonts for which optimal value cannot be calculated from the font.
RecoginzeBullets - a boolean switch for list markers detection
ImageResolutionX, ImageResolutionY - image resolution settings;

Here is DocxOptionsModel class:

public class DocxOptionsModel : OptionsModel
{
    [Display(Name = "File Format:")]
    [RegularExpression("doc|docx")]
    public string Format { get; set; }

    [Display(Name = "Recognition Mode:")]
    public RecognitionMode Mode { get; set; }

    [Display(Name = "Add return to line end:")]
    public bool AddReturnToLineEnd { get; set; }

    [Display(Name = "Max Distance between text lines:")]
    public int? MaxDistanceBetweenTextLines { get; set; }

    [Display(Name = "Relative horizontal proximity:")]
    public double? RelativeHorizontalProximity { get; set; }

    [Display(Name = "Recognize bullets:")]
    public bool RecognizeBullets { get; set; }

    [Display(Name = "Image Resolution X:")]
    public int? ImageResolutionX { get; set; }

    [Display(Name = "Image Resolution Y:")]
    public int? ImageResolutionY { get; set; }
}

Following snippet shows the code of ToWord action:

public ActionResult ToWord(string filename)

{

    var docOptions = new DocxOptionsModel

    {

        Name = filename,

        Folder = FolderName,

        AddReturnToLineEnd = false,

        Format = "docx",

        Mode = RecognitionMode.Flow

    };

    return View(docOptions);

}

[HttpPost]

public ActionResult ToWord(DocxOptionsModel options)

{

    SaaSposeResponse response;

    try

    {

        response = PdfApi.PutPdfInStorageToDoc(options.Name,

            $"{options.Folder}/{options.Format}/{options.Name.Replace("pdf", "docx")}",

            options.AddReturnToLineEnd,

            options.Format,

            options.ImageResolutionX,

            options.ImageResolutionY,

            options.MaxDistanceBetweenTextLines,

            options.Mode.ToString(),

            options.RecognizeBullets,

            options.RelativeHorizontalProximity,

            options.Folder

            );

    }

    catch (ApiException ex)

    {

        return View("ConvertError", ex);

    }

return View("ConvertSuccess", response);



}

Convert files from PDF to TIFF

The settings for this type conversions we can divide into 3 subsections:general, image and page layout settings.

The general settings include:

PageIndex - start page;
PageCount - number of pages to be converted;
SkipBlankPages - skip blank pages;

The next section allows customize image quality:

Brightness - a fractional number from 0.0 to 1.0,
Compression - a compression algoritm (RLE, CCITT3, CCITT4 or LZW),
TiffColorDepth - a color depth value (1, 4 or 8 bit per pixel);
ImageResolutionX, ImageResolutionY - image resolution settings;
Width, Height - dimensions for output image.

And the last section allows to make additional design for rendered page:
LeftMargin, RightMargin, TopMargin, BottomMargin and Orientation

The code of action ToTIFF is mostly the same as for DOC.

Conclusion

In most cases, Aspose.PDF Cloud performs the transformation qualitatively without additional settings but also allows you to configure the conversion. In this article, we looked at the most popular formats, but the Aspose.PDF Cloud API also makes it possible to convert PDF to EPUB, XLS, XML, to some other formats.

Aspose.PDF Cloud: Converting documents using CSharp SDK (part 2)

Andriy Andruhovski — Tue, 26 Jun 2018 20:50:03 +0000

In the previous part we considered a process of conversion from other formats to PDF. Now, we continue exploring API of Aspose.PDF Cloud and we will see how to PDF docs can be converted to other formats: DOC/DOCX, EPUB, HTML, LaTeX, TIFF, PPTX, SVG, XLS. Obviously, that conversion process is specific for each format, therefore, we first consider the general algorithm and then tune up additional params for some formats.

Unlike the previous post, we will use an ASP.NET MVC5 application template. This will allow us to see both sync and async methods in action.

So, let assume that we need to write an ASP.NET MVC5 application that shows the content of some folder from cloud storage to the user and he can convert PDF files from that folder to appropriate format.

Step 0. Basic preparations

Add new ASP.NET Web Application with name MvcConverter and select No Authentication and MVC template options
Add packages for Aspose.Cloud:
- Install-Package Aspose.Storage-Cloud
- Install-Package Aspose.PDF-Cloud
Update other packages
- Update-Package
Update layout in _Layout.cshtml

Step 1. Setup API client

We will create an additional controller class (i.g. AsposeCloudController) for more convenient work with the API.

public class AsposeCloudController : Controller
{
    private const string AppSid = "*** Put App Sid here ***";
    private const string AppKey = "*** Put App Key here ***";

    protected readonly StorageApi _storageApi;
    protected readonly PdfApi _pdfApi;

    public AsposeCloudController()
    {
        _storageApi = new StorageApi(AppKey, AppSid);
        _pdfApi = new PdfApi(AppKey, AppSid);
    }
}

Step 2. Modify HomeController

By default, ASP.NET MVC5 application template has HomeController with 3 actions: Index, About, Contacts. Let's change Index so that the list of files is displayed.

public class HomeController : AsposeCloudController
{
    protected string StorageName = "First Storage";
    protected string FolderName = "pdf-demo";
    public ActionResult Index()
    {
        // Check if the folder exists
        var fileExistResponse = _storageApi.GetIsExist(
            new GetIsExistRequest(FolderName, null, StorageName));
        if (fileExistResponse.Status.Equals("OK"))
        {
            if (fileExistResponse.FileExist.IsFolder == false)
            {
                return View("ApiError", new AsposeResponse
                {
                    Code = fileExistResponse.Code,
                    Status = "Folder not found"
                });
            }
        }
        else
        {
            return View("ApiError", fileExistResponse);
        }
        // Get the filelist
        var filesResponse = _storageApi.GetListFiles(    
         new GetListFilesRequest(FolderName, StorageName));
        if (filesResponse.Status.Equals("OK"))
            return View("ApiError", filesResponse);
        // Get .pdf files only
        var filesInCloudFolder =
            filesResponse.Files.Where(f => f.IsFolder == false || f.Name.EndsWith(".pdf",
                                        StringComparison.OrdinalIgnoreCase)).ToList();
        return View(filesInCloudFolder);
    }
//... other actions are omitted
}

Also, we need to create an Index view. We will show the data in a tabular form. One table row will contain the name, size, modified date of one file and links for converter actions.

Step 3. Add converter action

As you can see in the previous step we will use ConvertPDF action with 2 parameters: filename and desired format.

public ActionResult ConvertPDF(string filename, string format)
{
    if (string.IsNullOrEmpty(filename) || string.IsNullOrEmpty(format))
        return RedirectToAction("Index");
    format = format.ToLowerInvariant();           
    try
    {
        string outPath;
        switch (format)
        {
            case "tiff":
                outPath = $"{FolderName}/{format}/{filename.Replace("pdf", "tif")}";
                _pdfApi.PutPdfInStorageToTiff(filename, outPath, folder: FolderName);
                break;

            case "docx":
                outPath = $"{FolderName}/{format}/{filename.Replace("pdf", "docx")}";
                _pdfApi.PutPdfInStorageToDoc(filename, outPath, folder: FolderName, format: "docx");
                break;                    
            case "pdfa":
                outPath = $"{FolderName}/{format}/{filename}";
                _pdfApi.PutPdfInStorageToPdfA(filename, outPath, type: "PDFA1A", folder: FolderName);
                break;
            case "html":
                outPath = $"{FolderName}/{format}/{filename.Replace("pdf", "zip")}";
                _pdfApi.PutPdfInStorageToHtml(filename, outPath, folder: FolderName);
                break;
            case "svg":
                outPath = $"{FolderName}/{format}/{filename.Replace("pdf", "zip")}";
                _pdfApi.PutPdfInStorageToSvg(filename, outPath, folder: FolderName);
                break;
        }
    }
    catch (ApiException ex)
    {
        ViewBag.ErrorCode = ex.ErrorCode;
        ViewBag.ErrorMessage = ex.Message;
        return View();
    }

    ViewBag.Success = true;
    return View();
}

Despite the fact that we use the similar calls PutPdfInStorageTo... to convert to different formats, I must add some explanations.
In the simplest case, it's enough to call PutPdfInStorageTo... with two parameters: input filename and output file path. Other parameters are optional and they used as necessary, eg. folder - used, when we list the files in subfolders (not in root).

It should also be understood that the result of the conversion is not always a one-page document and some formats are multipage in their nature, but others are not. Also, we can't store additional resources in HTML. So if we will convert to TIFF or DOC/DOCX, we no need to care about multipage and resource storing, but for HTML or SVG we need it. Obviously, for the last two formats, we need some container. Aspose.PDF Cloud uses ZIP-archive as the container.

The last thought: some formats need to clarify their subtypes. This concerns, for example, to Microsoft Word DOC/DOCX or PDF/A-1a, PDF/A-1b.

Final step. View results and handle error

In this demo, we have a pretty straightforward view that only display a static message with result status.

To sum up: we considered a general algorithm how to use Aspose.PDF Cloud conversion API in ASP.NET MVC applications. What's next? In the next part, we will learn how to tune up the converter from PDF to other formats.

Rendering HTML5 Canvas to PDF documents using Aspose.HTML

Andriy Andruhovski — Mon, 04 Jun 2018 20:52:12 +0000

In many cases, HTML documents are used to create templates for various reports with subsequent conversion into PDF docs. The Canvas API is a powerful tool for creating images and it can also be used to place graphics in PDF documents. This API is used by writing JS-scripts that can access the canvas area through a full set of drawing functions, thus allowing for dynamically generated graphics.

Aspose.HTML supports two methods of accessing to canvas elements:

via JavaScript code - this is a traditional method and it is preferable when we use standard HTML docs;
via Aspose.HTML API - this method is more convenient for creating in-memory HTML docs;

Since the first method is very popular, we will consider only a small example of its usage.

As has been said before, we will use the Aspose.HTML API in the second method. This method has some differences from the previous, mainly because of the features of the .NET platform, but the main concept is the same.
As an example, consider the following problem: suppose that we need to generate a report for one (or several) images on which we need to mark certain regions (faces, animals, etc) and add it with text. Thus, our solution will consist of the following steps:

Generate a template;
Get details about the image (from external service);
Generate report as HTML document;
Convert HTML document to PDF one.

Step 1 is pretty straightforward:

In step 2, we will use Microsoft Cognitive Services (Face API). You may learn more about this service on Microsoft Docs. In short, we call the REST API and get the result with a set of detected faces with additional info.

Now we can add the data to report: modify canvas and add p element after the canvas. In order to modify canvas, we need to get the context of this element and make the drawing.

The resulting object from the previous step is an array, which contains rectangles, that describes face locations on the image. So, we run the loop and draw the rectangles in the manner as in JavaScript code. At the last, we add details as p elements below canvas.

Оbtained HTML document we can easily convert to PDF.

You can see full example here:

Aspose.PDF Cloud: Converting documents using C# SDK

Andriy Andruhovski — Tue, 29 May 2018 22:52:04 +0000

In the previous post, we taught upload files to Aspose.Cloud. Now we will consider basic steps to convert documents with Aspose.Cloud API v1.0.
For the first example, we will use converting HTML to PDF. Let assume for easy that source files will be located in "Html-Demo" folder on the default storage and we will store resultant files on "Pdf-Demo" folder.

As in the previous post, we create a console application, but now we will add two packages:

to manage storage (Install-Package Aspose.Storage-Cloud)
to manipulate documents (Install-Package Aspose.PDF-Cloud)

UPD: This post is valid for Aspose.PDF-Cloud v.18.8

The next step is to declare the necessary fields and constants in our class.

So, we are ready to convert our files from HTML to PDF. To get a list of files we call a GetListFiles method and filter the results.

All that's left to do is call a conversion API method PutCreateDocument with appropriate parameters. It should be noted that this method has parameters for several cases of converting, but we set values required only for this one:

name - destination filename (only name, not a path);
templateFile - the source file path;
templateType - the content type of source file, can be xml, html, bmp, jpg, png, tiff, emf, cgm, tex;
folder - destination folder;
storage - storage name.

In this case, we deal with an ApiException. This class is similar to the generic exception, but it has an additional field ErrorContent. This field usually holds JSON-string with the error message.

The following snippet holds the full code of our function:

As you can see above, we can convert to PDF from different file types. Let's try to change HTML to JPEG:

In this case, we get the PDF document too, but with raster image per file.
To combine a series of images into one PDF we need to call PutCreateDocumentFromImages method. The following snippet shows how we can combine JPEG files into one PDF. To reduce the explanation, named arguments were used.

So, in this post, we were considered how to create PDF from different formats. In the next article, we will consider the reverse process - converting from PDF to another file formats.

3 simple steps to start using Aspose.Cloud Storage

Andriy Andruhovski — Tue, 15 May 2018 16:31:27 +0000

Solving the problems of document processing, we often encounter the problem of getting source documents from different sources and from different providers. Aspose.Cloud Storage is a component of Aspose.Cloud platform, which releases a transparent interface for access to different sources. Now Aspose.Cloud Storage supports popular services from Amazon, Dropbox, Google, Microsoft. Let's see how we can use this component.

Step 1: Create an Aspose.Cloud account

We can create a free Aspose.Cloud account using the link "Create a new Account" on http://dashboard.aspose.cloud or sign in with GitHub or Google Account.

When registering, for each account an Aspose.Cloud Storage is created. We add another storage later, and now we are trying to access the current storage using C#. To do this we need to get an application credential.

Step 2: Get an Application credentials

Aspose.Cloud Application allows us to manage access to Cloud API. By default, each account has one application named "First App". Using the "My Apps" tab, we can see the list of all applications, change settings or get the credential.

The application credentials (App SID/App Key) are placed directly on the "First App" tile, but if you want to change the settings of the "First App", just click on tile heading. for testing purposes, we have enough default settings, so we will proceed to the next step, writing the client application. In this example, we will use a "Console Application" template in Microsoft Visual Studio 2017.

Step 3: Create a Client application

To demonstrate the main concept of the cloud storage working, we will write an application that will synchronize certain local folder with a cloud folder with the same name. So, let's start.

Create a console application (in VS2017 File->New->Project>Windows Classic Desktop->Console App);
Install Aspose.Storage for Cloud SDK (in Package Manager Console: Install-Package Aspose.Storage-Cloud)

Step 3a: Setup an API client

To be able making API requests, we must initialize an API client. It's pretty straightforward: declare StorageApi object and initialize it with AppKey and AppSID.

Step 3b: Write own code using API client

This part of our example will show the usage of most frequent API requests:

Check if a file exists
Create a folder
Get a list of files
Create (upload) file to cloud storage

It is worth noting, that all StorageApi methods accept a request object and returns a response object. All response objects have common properties such us Code and Status and we can use there to check if API call was successful.

According to our problem, we need to synchronize certain local folder with a cloud folder with the same name. So first, we must ensure that the cloud folder exists, otherwise create one. Storage API provides GetIsExist and PutCreateFolder.
Thus, checking if the cloud folder would look like this:

Next step, we prepare a file list for upload. What will we do? It's easy: we need to get a list of all files from the local folder and a list of files in the cloud. The difference of these lists give us a list of files need to upload.

Finally, we will call PutCreateDocument the loop through the resultant list.

Conclusion

Q: Is it one-way synchronizer?
A: Yes. It showed the main ways of usage Aspose.Cloud Storage, and you can improve it yourself.
Q: And what about other storages?
A: Learn more in the article "How to Configure 3rd Party Cloud Storages".
Q: What's next?
A: In the next posts, we will continue to deal with the Aspose.Cloud features.

Generating PDF file using C#

Andriy Andruhovski — Mon, 02 Apr 2018 07:40:00 +0000

In this post, I want to share some of my experience in generating PDF documents using Aspose.PDF for .NET and introduce basic render techniques.

As an example, I chose a frequently used document - an invoice. Our document will consist of 5 sections:

header section - contains the corporate logo and general info;
address section - contains the info about the seller and the customer;
grid section - contains the table of product items and the totals subsection;
terms section - contains the list of strings for additional;
footer - optional section with one string placed at the bottom of the page.

Disclaimer: please note, that Apose.PDF is a paid product, but a trial version is fully appropriate to make some experiments like creating a document up to 4 pages.

Step 0. Creating a model of the document. For convenient work, we will create several classes for describing invoice details.

Class LogoImage will be used for a render company logo in the upper left corner.

namespace Aspose.PDF.Invoicer
{
    public class LogoImage
    {
        public string FileName;
        public int Width;
        public int Height;

        public LogoImage(string filename, int width, int height)
        {
            FileName = filename;
            Width = width;
            Height = height;
        }
    }
}

Class TotalRow will be used for render row in the totals subsection.

namespace Aspose.PDF.Invoicer
{
    public class TotalRow
    {
        public string Text;
        public decimal Value;

        public TotalRow(string text, decimal value)
        {
            Text = text;
            Value = value;
        }                
    }
}

Class ProductItem represents one product item in the grid section.

namespace Aspose.PDF.Invoicer
{
    public class ProductItem
    {
        public string Id;
        public string Name;
        public decimal Price;
        public int Quantity;
        public decimal Total => Price * Quantity;

        public ProductItem(string id, string name, decimal price, int quantity)
        {
            Id = id;
            Name = name;
            Price = price;
            Quantity = quantity;
        }
    }
}

And the last class will be used to represent a PDF document.

using System;
using System.Collections.Generic;
using System.IO;
using Aspose.Pdf;
using Aspose.Pdf.Text;

namespace Aspose.PDF.Invoicer
{

    public class Invoice: IDisposable
    {
        #region Private memebers
        private static readonly License Licence = new License();
        private Color _textColor, _backColor;
        private readonly Font _timeNewRomanFont;
        private readonly TextBuilder _builder;
        private readonly Page _pdfPage;
        private readonly Document _pdfDocument;
        private readonly Rectangle _logoPlaceHolder;        
        #endregion

        public string ForegroundColor
        {
            get { return _textColor.ToString(); }
            set { _textColor = Color.Parse(value); }
        }
        public string BackgroundColor
        {
            get { return _backColor.ToString(); }
            set { _backColor = Color.Parse(value); }
        }

        //Invoice details
        public string Number;
        public uint PaymentPeriod = 14;
        public LogoImage Logo;
        public List<string> BillFrom;
        public List<string> BillTo;
        public List<ProductItem> Items;
        public List<TotalRow> Totals;
        public List<string> Details;
        public string Footer;

        public Invoice()
        {
            _pdfDocument = new Document();
            _pdfDocument.PageInfo.Margin.Left = 36;
            _pdfDocument.PageInfo.Margin.Right = 36;
            _pdfPage = _pdfDocument.Pages.Add();
            _textColor = Color.Black;
            _backColor = Color.Transparent;
            _logoPlaceHolder = new Rectangle(20, 700, 120, 800);
            _timeNewRomanFont = FontRepository.FindFont("Times New Roman");
            _builder = new TextBuilder(_pdfPage);
        }
        public void Save(Stream stream)
        {
            HeaderSection();
            AddressSection();
            GridSection();
            TermsSection();
            FooterSection();

            _pdfDocument.Save(stream);
        }
        private void HeaderSection()
        {
            // TODO: Generate header section
        }
        private void AddressSection()
        {
            // TODO: Generate Address section
        }
        private void GridSection()
        {
            // TODO: Generate Grid section
        }
        private void TermsSection()
        {
            // TODO: Generate Terms section
        }
        private void FooterSection()
        {
            // TODO: Generate Footer section
        }
        #region IDisposable Support
        private bool disposedValue = false; // To detect redundant calls

        protected virtual void Dispose(bool disposing)
        {
            if (!disposedValue)
            {
                if (disposing)
                {                    
                    _pdfPage.Dispose();
                    _pdfDocument.Dispose();
                }
                disposedValue = true;
            }
        }

        public void Dispose()
        {            
            Dispose(true);           
        }
        #endregion
    }
}

Step 1. Writing a simple application for testing. In this console application, we create the invoice with C:\aspose\company-logo-design.png as a logo image, 3 product items, some comments, and a demo footer.

using System.Collections.Generic;
using System.IO;
using System.Linq;
using Aspose.PDF.Invoicer;

namespace ConsoleDemo
{
    class Program
    {
        static void Main()
        {
            var productItems = new List<ProductItem> {
                new ProductItem ("1", "Chocolate with Milk", 166.66M, 20),
                new ProductItem ("2", "Chocolate with Nuts", 166.66M, 20),
                new ProductItem ("3", "Chocolate with Pepper", 166.66M, 20)
            };
            var subTotal = productItems.Sum(i => i.Total);
            var invoice = new Invoice
            {
                ForegroundColor = "#0000CC",
                BackgroundColor = "#FFFFFF",
                Number = "ABC-123",
                Logo = new LogoImage(@"C:\aspose\company-logo-design.png", 160, 120),
                BillFrom = new List<string> { "Eastern Chocolate Factory", "Eastern Chocolate House", "44 Shirley Ave.", "West Chicago", "IL 60185" },
                BillTo = new List<string> { "Eastern Chocolate Cafe", "Eastern Chocolate House", "44 Shirley Ave.", "West Chicago", "IL 60185" },
                Items = productItems,
                Totals = new List<TotalRow>
                {
                    new TotalRow("Sub Total", subTotal),
                    new TotalRow("VAT @ 20%", subTotal*0.2M),
                    new TotalRow("Total", subTotal*1.2M)
                },
                Details = new List<string> {
                    "Terms & Conditions",
                    "Payment is due within 15 days",
                    string.Empty,
                    "If you have any questions concerning this invoice, contact our sales department at sales@east-chocolate.factory",
                    "", "Thank you for your business."
                },
                Footer = "https://www.facebook.com/AsposePDF/"
            };


            var fileStream = new FileStream(@"C:\\aspose\\invoice.pdf", FileMode.OpenOrCreate);
            invoice.Save(fileStream);
            fileStream.Close();

        }
    }
}

Step 2. Rendering the header section. The Aspose.PDF library provides several ways to place elements in the document. The simplest way to place a sequence of elements with minimal settings is by using the Document Object Model. According to this conception, the Document object contains a collection of Page objects. This collection, in turn, contains a collection of BaseParagraph objects. Descendants of BaseParagraph is TextFragment, FloatingBox, Table etc.
We will use the TextFragment object to place lines "Invoice", "DATE:" and "DUE DATE". The first line will be centered, and the rest is right-aligned. Logo image breaks the hierarchy of DOM elements and must be placed in the upper left corner, so to place the logo we will apply another technique - adding a resource to the page. A detailed explanation of using resources is not the aim of this post. We will return to this technique in future posts. In short, we complete the following steps:

Add image to Images collection of Page Resources
Save current graphics state
Define a Matrix object for placing the image in the appropriate location
Apply matrix to the image
Restore graphics state

The following snippet contains the full implementation of the HeaderSection() method.

private void HeaderSection()
{
    var lines = new TextFragment[3];
    // Create text fragment
    lines[0] = new TextFragment($"INVOICE #{Number}");
    lines[0].TextState.FontSize = 20;
    lines[0].TextState.ForegroundColor = _textColor;
    lines[0].HorizontalAlignment = HorizontalAlignment.Center;

    _pdfPage.Paragraphs.Add(lines[0]);

    lines[1] = new TextFragment($"DATE: {DateTime.Today:MM/dd/yyyy}");
    lines[2] = new TextFragment($"DUE DATE: {DateTime.Today.AddDays(PaymentPeriod):MM/dd/yyyy}");
    for (var i = 1; i < lines.Length; i++)
    {
        // Set text properties                
        lines[i].TextState.Font = _timeNewRomanFont;
        lines[i].TextState.FontSize = 12;
        lines[i].HorizontalAlignment = HorizontalAlignment.Right;

        // Add fragment to paragraph
        _pdfPage.Paragraphs.Add(lines[i]);
    }
    // Logo 
    // Set coordinates
    _logoPlaceHolder.URX = _logoPlaceHolder.LLX + Logo.Width;
    _logoPlaceHolder.URY = _logoPlaceHolder.LLY + Logo.Height;


    // Load image into stream
    var imageStream = new FileStream(Logo.FileName, FileMode.Open);
    // Add image to Images collection of Page Resources
    _pdfPage.Resources.Images.Add(imageStream);
    // Using GSave operator: this operator saves current graphics state
    _pdfPage.Contents.Add(new Operator.GSave());
    // Create Rectangle and Matrix objects

    var matrix = new Matrix(new[] { _logoPlaceHolder.URX - _logoPlaceHolder.LLX, 0, 0,
        _logoPlaceHolder.URY - _logoPlaceHolder.LLY,
        _logoPlaceHolder.LLX, _logoPlaceHolder.LLY });
    // Using ConcatenateMatrix (concatenate matrix) operator: defines how image must be placed
    _pdfPage.Contents.Add(new Operator.ConcatenateMatrix(matrix));
    var ximage = _pdfPage.Resources.Images[_pdfPage.Resources.Images.Count];
    // Using Do operator: this operator draws image
    _pdfPage.Contents.Add(new Operator.Do(ximage.Name));
    // Using GRestore operator: this operator restores graphics state
    _pdfPage.Contents.Add(new Operator.GRestore());
}

Step 3. Rendering the address section. We apply the two-column layout with mirror alignment: the left column is left-aligned and the right column is right-aligned. Such fragments can be easily rendered with FloatingBox class. To perform this layout we need to complete 4 steps:

Create an object of the FloatingBox class;
Add text fragments to the left column;
Add 1 text fragment to the to the right column with properties IsFirstParagraphInColumn=true and HorizontalAlignment = HorizontalAlignment.Right;
Add the rest fragments to the right column with the right alignment.

The following snippet shows these steps:

private void AddressSection()
{
    var box = new FloatingBox(524, 120)
    {
        ColumnInfo =
        {
            ColumnCount = 2,
            ColumnWidths = "252 252"
        },
        Padding =
        {
            Top = 20
        }
    };
    TextFragment fragment;

    BillFrom.Insert(0, "FROM:");
    foreach (var str in BillFrom)
    {
        fragment = new TextFragment(str);
        fragment.TextState.Font = _timeNewRomanFont;
        fragment.TextState.FontSize = 12;
        // Add fragment to paragraph
        box.Paragraphs.Add(fragment);
    }

    fragment = new TextFragment("BILL TO:") { IsFirstParagraphInColumn = true };
    fragment.TextState.Font = _timeNewRomanFont;
    fragment.TextState.FontSize = 12;
    fragment.TextState.HorizontalAlignment = HorizontalAlignment.Right;
    box.Paragraphs.Add(fragment);

    foreach (var str in BillTo)
    {
        fragment = new TextFragment(str);
        fragment.TextState.Font = _timeNewRomanFont;
        fragment.TextState.FontSize = 12;
        fragment.TextState.HorizontalAlignment = HorizontalAlignment.Right;
        // Add fragment to paragraph
        box.Paragraphs.Add(fragment);
    }
    _pdfPage.Paragraphs.Add(box);
}

Step 4. Rendering the grid section. We will use the Table object to represent data in tabular format. First, we need to define table columns and the default decoration of cells. Please, note that the ColumnWidths property implicitly defines a number of columns by setting their widths. In our grid, we will use an inverse color scheme for header rows. The following algorithm is used to create table rows:

Call table.Rows.Add() to create the row and get the reference to the new row;
Call row.Cells.Add() to create each cell and get the reference to the new cell;
Set cell decoration if needed;

The totals subsection is created similarly, but for a better view, we join up the 4 first cells by using the ColSpan property.

private void GridSection()
{
    // Initializes a new instance of the Table
    var table = new Table
    {
        ColumnWidths = "26 257 78 78 78",
        Border = new BorderInfo(BorderSide.Box, 1f, _textColor),
        DefaultCellBorder = new BorderInfo(BorderSide.Box, 0.5f, _textColor),
        DefaultCellPadding = new MarginInfo(4.5, 4.5, 4.5, 4.5),
        Margin =
        {
            Bottom = 10
        },
        DefaultCellTextState =
        {
            Font = _timeNewRomanFont
        }
    };

    var headerRow = table.Rows.Add();
    var cell = headerRow.Cells.Add("#");
    cell.Alignment = HorizontalAlignment.Center;
    headerRow.Cells.Add("Item");
    headerRow.Cells.Add("Price");
    headerRow.Cells.Add("Quantity");
    headerRow.Cells.Add("Sum");
    foreach (Cell headerRowCell in headerRow.Cells)
    {
        headerRowCell.BackgroundColor = _textColor;
        headerRowCell.DefaultCellTextState.ForegroundColor = _backColor;
    }

    foreach (var productItem in Items)
    {
        var row = table.Rows.Add();
        cell = row.Cells.Add(productItem.Id);
        cell.Alignment = HorizontalAlignment.Center;
        row.Cells.Add(productItem.Name);
        cell = row.Cells.Add(productItem.Price.ToString("C2"));
        cell.Alignment = HorizontalAlignment.Right;
        cell = row.Cells.Add(productItem.Quantity.ToString());
        cell.Alignment = HorizontalAlignment.Right;
        cell = row.Cells.Add(productItem.Total.ToString("C2"));
        cell.Alignment = HorizontalAlignment.Right;
    }

    foreach (var totalRow in Totals)
    {
        var row = table.Rows.Add();
        var nameCell = row.Cells.Add(totalRow.Text);
        nameCell.ColSpan = 4;
        var textCell = row.Cells.Add(totalRow.Value.ToString("C2"));
        textCell.Alignment = HorizontalAlignment.Right;
    }

    _pdfPage.Paragraphs.Add(table);
}

Step 5. Rendering theTerms and Conditions section.
This section contains only text fragments, and their rendering is the same as described above.

private void TermsSection()
{
    foreach (var detail in Details)
    {
        var fragment = new TextFragment(detail);
        fragment.TextState.Font = _timeNewRomanFont;
        fragment.TextState.FontSize = 12;
        _pdfPage.Paragraphs.Add(fragment);
    }
}

Step 6. Rendering Footer section
According to the previously declared layout, the last section is optional and must be placed at the bottom of the page. That is means we can't use adding the text fragment to the paragraph collection because this adding placed our fragment already after the 'Terms and Conditions' section.
In this case, we need to use a TextBuilder class. This class helps us to place text in any location. Additionally, the following snippet shows how we can add a hyperlink to the text fragment.

private void FooterSection()
{
    var fragment = new TextFragment(Footer);
    var len = fragment.TextState.MeasureString(fragment.Text);
    fragment.Position = new Position(_pdfPage.PageInfo.Width / 2 - len / 2, 20);
    fragment.Hyperlink = new WebHyperlink(Footer);
    var builder = new TextBuilder(_pdfPage);

    builder.AppendText(fragment);
}

Conclusion

In this post, we considered how to create a simple PDF document from scratch. Most of the parameters such as font size, the width of the cell's border, column's width in the table are adjusted manually based on A4 page size.
It's obvious that we are able to tune these parameters in proportion to the size of the page, but this will slightly complicate the example, but will not change the technique of creating the document as a whole.

A fundamentally different approach is working with some templates and replacing part of the content.

Extract the text data from PDF file using Aspose.PDF for .NET

Andriy Andruhovski — Mon, 12 Mar 2018 22:54:24 +0000

While dealing with Portable Document Format files, at times, you might need to extract text from a PDF file.
Aspose.PDF several classes to extract the data:

The easiest way to extract the data from PDF is using TextFragmentAbsorber with the default options:

TextAbsorber performs text extraction and provides access to the result via Text object. In this case, we'll get all text data in one single object.
Call the Accept method on a particular page of the Document object. The Index is the particular page number from where text needs to be extracted.

Sometimes we need to extract the text from the particular area (i.e. the left upper corner of the page). TextAbsorber also can do it. We'll need to setup TextSearchOptions property. In the following example, we'll set up a LimitToPageBounds property and a Rectangle property. The last takes Rectangle object as a value and using this property, we can specify the region of the page from which we need to extract the text. In our example, the LimitToPageBounds property indicates that text is searched within the page bound and the Rectangle property indicates to the upper half of page.

The TextFragmentAbsorber object is basically used in text search scenario. When the search is completed the occurrences are represented as text fragments collection. The TextFragment object provides access to the search occurrence text, text properties, and allows to edit text and change the text state (font, font size, color etc).

The ParagraphAbsorber class performs the search for sections and paragraphs of text and provides access for rectangles and polygons that describe it in text coordinate space.