Select HTML Elements to Exclude from Image

You can exclude selected parts of an HTML page from conversion to an image by specifying a CSS selector. This allows you to choose exactly which content will be excluded from the image and to either remove or simply hide the excluded elements.

The CSS selector can be assigned to the HtmlToImageConverterExcludedElementsSelector property. For example, you can exclude an HTML element by its ID using the #ExcludedHtmlElementID selector, or exclude elements with a specific CSS class using the .ExcludedHtmlElementClass selector.

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

Code Sample - Select HTML Elements to Convert to Image

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

// Use Winnovative Namespace
using Winnovative.Pdf.Next;

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

            // Set license key received after purchase to use the converter in licensed mode
            // Leave it not set to use the library in demo mode
            Licensing.LicenseKey = "3FJDU0ZDU0NTQkddQ1NAQl1CQV1KSkpKU0M=";

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

            bool enableExcludedElementsSelector = model.EnableExcludedElementsSelector;
            if (enableExcludedElementsSelector)
            {
                // The CSS selector used to identify the elements to exclude from conversion to image
                htmlToImageConverter.ExcludedElementsSelector = model.ExcludedElementsSelector;

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

            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_Exclude_from_Image.png";

            return fileResult;
        }
    }
}

See Also