Select HTML Elements to Convert to Image

You can convert only selected parts of an HTML page to an image by specifying a CSS selector. This allows you to choose exactly which content will be included in the image and to either remove or simply hide the unselected elements.

The CSS selector can be assigned to the HtmlToImageConverterConvertedElementsSelector property of the converter. For example, you can select an HTML element by its ID using the #ConvertedHtmlElementID selector or select elements with a specific CSS class using the .ConvertedHtmlElementClass selector.

Furthermore, you can use the HtmlToImageConverterRemoveUnselectedElements property to specify what happens to the unselected elements. By default, this property is set to true, and the unselected elements are removed from the layout, allowing the content to reflow naturally. If you set this property to false, the unselected elements are simply hidden, and the space they originally occupied in the HTML page remains reserved in the layout.

When you convert only a part of the HTML page, it is also recommended to set the HtmlToPdfConverterHtmlViewerHeight property to a minimum value of 1 pixel to obtain an image that accurately matches the rendered content.

Code Sample - Select HTML Elements to Convert to Image

C#
using System.ComponentModel.DataAnnotations;
using Microsoft.AspNetCore.Mvc;
using EvoPdf_Next_AspNetDemo.Models;
using EvoPdf_Next_AspNetDemo.Models.HTML_to_Image;

// Use EVO PDF Namespace
using EvoPdf.Next;

namespace EvoPdf_Next_AspNetDemo.Controllers.HTML_to_Image
{
    public class Select_HTML_Elements_to_Convert_to_ImageController : Controller
    {
        [HttpPost]
        public ActionResult ConvertHtmlToImage(Select_HTML_Elements_to_Convert_to_Image_ViewModel model)
        {
            if (!ModelState.IsValid)
            {
                var errorMessage = ModelStateHelper.GetModelErrors(ModelState);
                throw new ValidationException(errorMessage);
            }

            // Set the license key received after purchase to use the library in licensed mode; leave it commented for demo mode
            // Licensing.LicenseKey = "your-license-key";

            // Create a HTML to Image converter object with default settings    
            HtmlToImageConverter htmlToImageConverter = new HtmlToImageConverter();

            bool enableElementsSelector = model.EnableElementsSelector;
            if (enableElementsSelector)
            {
                // The CSS selector used to identify the elements to include in the image
                htmlToImageConverter.ConvertedElementsSelector = model.ConvertedElementsSelector;

                // Specify whether elements that are not matched by ConvertedElementsSelector
                // should be completely removed from the layout rather than just hidden
                htmlToImageConverter.RemoveUnselectedElements = model.RemoveUnselectedElements;

                // Allow image to auto-resize at minimum height
                htmlToImageConverter.HtmlViewerHeight = 1;
            }

            byte[] outImageBuffer = null;

            if (model.HtmlPageSource == "Html")
            {
                string htmlWithForm = model.HtmlString;
                string baseUrl = model.BaseUrl;

                // Convert a HTML string to a PNG image
                outImageBuffer = htmlToImageConverter.ConvertHtml(htmlWithForm ?? string.Empty, baseUrl, ImageType.Png);
            }
            else
            {
                string url = model.Url;

                // Convert the HTML page to a PNG image
                outImageBuffer = htmlToImageConverter.ConvertUrl(url, ImageType.Png);
            }

            // Send the image file to browser
            FileResult fileResult = new FileContentResult(outImageBuffer, "image/png");
            fileResult.FileDownloadName = "Select_HTML_Elements_to_Convert_to_Image.png";

            return fileResult;
        }
    }
}

See Also