Provide sample code for HTML to Image (PNG/JPG) in C#

Need help in sample code to convert HTML string into image (PNG/JPG) using c#.

@Yatinn

Thank you for contacting support.

We would like to request you to use below code snippet with Aspose.HTML for .NET 18.3, in your environment and then share your kind feedback with us.

        String InputHtml = dataDir + "Aspose.HTMLinput.html";
        using (FileStream fs = File.Create(InputHtml))
        {
            using (StreamWriter sw = new StreamWriter(fs))
            {
                sw.Write(@"<!DOCTYPE html><html><head><style>body, p, ul, ol, li, div, td, th{ font-family: Times New Roman; color: #FF0000; font-size: 12px; }</style></head><body>TEST STRING</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, dataDir + @"HTMLtoPNG_18.3.jpg"))
        // 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(InputHtml))
        {
            // Render the output using HtmlRenderer
            renderer.Render(png_device, html_document);
        }

This code snippet can be used to convert an HTML string to a PNG as well as a JPG image, as per your requirements. We hope this will be helpful. Please feel free to contact us if you need any further assistance.

Hi @Farhan.Raza, thanks for the help.
Will I can return the data into array of bytes?

I only need to convert the html string into image and then return into array of bytes.

@Yatinn

We have updated the code snippet as per your requirements. Please use it in your environment and then share your kind feedback with us.

        byte[] imageBytes;
        String InputHtml = dataDir + "Aspose.HTMLinput.html";
        using (FileStream fs = File.Create(InputHtml))
        {
            using (StreamWriter sw = new StreamWriter(fs))
            {
                sw.Write(@"<!DOCTYPE html><html><head><style>body, p, ul, ol, li, div, td, th{ font-family: Times New Roman; color: #FF0000; font-size: 12px; }</style></head><body>TEST STRING</body></html>");
            }
        }

        MemoryStream imageStream = new MemoryStream();

        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, imageStream))
        // 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(InputHtml))
        {
            using (MemoryStream imageStreamm = new MemoryStream())
            {
                // Render the output using HtmlRenderer
                renderer.Render(png_device, html_document);

                imageBytes = imageStream.ToArray();
            }
        }
        return imageBytes;

We hope this will be helpful. Please let us know if you need any further assistance.

@Farhan.Raza, thanks for the help again.

Here’s I am having a doubt;
Is it necessary to fetch html file from directory ?

I am already having HTML string in the code and after some modifications I need then it to convert in image.

This solution only works if I fetch file from my solution directory and then proceed.

I have seen a issue while printing the image in web print (Google Chrome) it will print the image larger in size i.e. not showing the actual size image in web print.

@Yatinn

We would like to share with you that no overload of HTMLDocument constructor accepts HTML string as an argument, so it is imperative to fetch the HTML from directory or some URL as supported by HTMLDocument class.

Moreover, regarding the issue about size of printed image, please create a separate topic while sharing source and generated files along with the code snippet. So that we may try to reproduce and investigate it in our environment.

Thanks @Farhan.Raza for the help. I will surely contact for further assistance.