Aspose html and Imaging - Takes around 2 seconds to convert html to Image

Aspose.Total Product Family
1

We are using below method which includes multiple aspose libraries to get SVG html to Image in form of Memory stream bytes. I have used random SVG here ,which gets bind runtime in application.

Takes around 2 seconds to convert html to Image. We want to reduce time taken.

We are using Aspose.Html (18.9.0) and Aspose.Imaging (19.1.0)
Kindly suggest as soon as possible.

     public static string HtmlToImage()
        {
            string inputHtmlFile = Path.Combine("D:\\", "InputFile" + ".html");
        string inputImageFile = Path.Combine("D:\\", "InputFile" + ".png");
        string tempImageFile = Path.Combine("D:\\", "InputFile_1" + ".png");

            using (FileStream fs = File.Create(inputHtmlFile))
            {
                using (StreamWriter sw = new StreamWriter(fs))
                {
                    sw.Write(@"<!DOCTYPE html>
<html lang='en' class='no-js no-svg has-left-panel'><head><meta http-equiv='Content-Type' content='text/html; charset=windows-1252'></head>
    <body class='has-left-panel Chrome' style='opacity: 1;'>
      <div id='divSignContent'>
        <svg width='400' height='176.1772' id='svgId'>
            <path d='M21.67 3.955l-2.825-2.202.665-.753 4.478 3.497-4.474 3.503-.665-.753 2.942-2.292h-4.162c-3.547.043-5.202 3.405-6.913 7.023 1.711 3.617 3.366 6.979 6.913 7.022h4.099l-2.883-2.247.665-.753 4.478 3.497-4.474 3.503-.665-.753 2.884-2.247h-4.11c-3.896-.048-5.784-3.369-7.461-6.858-1.687 3.51-3.592 6.842-7.539 6.858h-2.623v-1h2.621c3.6-.014 5.268-3.387 6.988-7.022-1.72-3.636-3.388-7.009-6.988-7.023h-2.621v-1h2.623c3.947.016 5.852 3.348 7.539 6.858 1.677-3.489 3.565-6.81 7.461-6.858h4.047z'/>
        </svg>
      </div>
    </body>
</html>");
                }
            }
            Aspose.Html.Rendering.Image.ImageRenderingOptions pdf_options = new Aspose.Html.Rendering.Image.ImageRenderingOptions();
           
            // Instantiate ImageDevice object while passing HtmlRenderingOptions and resultant file path as arguments
            using (Aspose.Html.Rendering.Image.ImageDevice png_device = new Aspose.Html.Rendering.Image.ImageDevice(pdf_options, inputImageFile))
            // Create HtmlRenderer object
            using (Aspose.Html.Rendering.HtmlRenderer renderer = new Aspose.Html.Rendering.HtmlRenderer())
            // Create HtmlDocument instance while passing path of already created HTML file
            using (Aspose.Html.HTMLDocument html_document = new Aspose.Html.HTMLDocument(inputHtmlFile))
            {
                // Render the output using HtmlRenderer
                renderer.Render(png_device, html_document);
            }

            using (Aspose.Imaging.RasterImage rasterImage = (Aspose.Imaging.RasterImage)Aspose.Imaging.Image.Load(tempImageFile))
            {
                if (!rasterImage.IsCached)
                {
                    rasterImage.CacheData();
                }

                // Create an instance of Rectangle class with desired size, Perform the crop operation on object of Rectangle class and Save the results to disk
                Aspose.Imaging.Rectangle rectangle1 = new Aspose.Imaging.Rectangle(20, 45, 1300, 500);
                rasterImage.Crop(rectangle1);
                using (var memoryStream = new MemoryStream())
                {
                    rasterImage.Save(memoryStream);
                    return Convert.ToBase64String(memoryStream.ToArray());
                }
            }

        }
2

@cyginfo,

I have observed your requirements and like to share that you in your scenario, you are performing two iterations using two different APIs of Aspose suite. The 2 seconds time seems justified. Moreover, we are unable to use the provided sample code owing to unclear declaration of variables. Can you please share the definition of following variable as I am unable to understand where temp image is saved.

tempImageFile


               renderer.Render(png_device, html_document);
           }

           using (Aspose.Imaging.RasterImage rasterImage = (Aspose.Imaging.RasterImage)Aspose.Imaging.Image.Load(tempImageFile))
           {
3

@mudassir.fayyaz , I have updated the question, Flow is such as that all the files will be created during the method execution, I have added random path for your understanding. I have tested same as well. Let me know in case of any concerns.

4

@cyginfo,

I have tried using the updated code and still facing the same issue. I don’t have definition of tempImageFile. In your code, you are loading this file available on path, tempImageFile. However, this file is neither generated in your code nor shared externally.

image.png (91.4 KB)

5

You will need to declare the variable and assign the path in the start of the method.

string inputHtmlFile = Path.Combine(“D:\”, “InputFile” + “.html”);
string inputImageFile = Path.Combine(“D:\”, “InputFile” + “.png”);
string tempImageFile = Path.Combine(“D:\”, “InputFile_1” + “.png”);

I hope the declaration was done at your end in the start of the method like it is done for

inputHtmlFile

and

inputImageFile

6

@cyginfo,

I like to inform that we have worked with source code and sample project on our end and this whole process took 4 seconds to complete which seems reasonable to us. Also please try to use Aspose.HTML and Aspose.Imaging latest version on your end.

7

So I suppose you have used latest version of Aspose.HTML, Aspose.Imaging and executed the sample code. Yet the time taken for whole process is 4 seconds. If so, then is there any other way around to optimize the whole process using latest version?

8

@cyginfo,

I like to inform that currently we are working on to improve rendering performance. I request for your patience and always try to use latest version to see improvements in products performance.