Converting HTML to Image Using Telerik Document Processing
Environment
| Version | Product | Author |
|---|---|---|
| 2025.4.1104 | RadWordsProcessing | Desislava Yordanova |
Description
This knowledge base article shows how to convert a string with HTML content to an image (JPEG or PNG) in a Blazor WASM application running on .NET 8 (or newer).
Solution
To convert HTML content into an image, use the Telerik Document Processing libraries. This process requires converting the HTML to PDF first, then exporting the PDF pages to images. Follow these steps:
- Import the HTML content as a RadFlowDocument using the HtmlFormatProvider from the WordsProcessing library.
- Export the RadFlowDocument to a PDF byte array using the Flow PdfFormatProvider.
- Import the PDF byte array as a RadFixedDocument with the Fixed PdfFormatProvider from the PdfProcessing library.
- Export each page of the RadFixedDocument to an image using the SkiaImageFormatProvider (available in .NET Standard).
Code Example
RadFlowDocument htmlDocument;
HtmlFormatProvider htmlFormatProvider = new HtmlFormatProvider();
string htmlString = @"<!DOCTYPE html>
<html>
<body>
<p>I am normal</p>
<p style=""color:red;"">I am red</p>
<p style=""color:blue;"">I am blue</p>
<p style=""font-size:50px;"">I am big</p>
</body>
</html>";
htmlDocument = htmlFormatProvider.Import(htmlString, TimeSpan.FromSeconds(10));
var flowPdfFormatProvider = new Telerik.Windows.Documents.Flow.FormatProviders.Pdf.PdfFormatProvider();
var htmlToPdfArray = flowPdfFormatProvider.Export(htmlDocument, TimeSpan.FromSeconds(10));
var fixedPdfFormatProvider = new Telerik.Windows.Documents.Fixed.FormatProviders.Pdf.PdfFormatProvider();
RadFixedDocument pdfHtml = fixedPdfFormatProvider.Import(htmlToPdfArray, TimeSpan.FromSeconds(10));
SkiaImageFormatProvider imageProvider = new SkiaImageFormatProvider();
int count = 1;
foreach (RadFixedPage page in pdfHtml.Pages)
{
byte[] resultImage = imageProvider.Export(page, TimeSpan.FromSeconds(10));
File.WriteAllBytes(@"C:\Temp\Page " + count++ + ".png", resultImage);
}
For .NET Framework, consider these articles for image export: