Select HTML Elements to Exclude from Image

You can exclude selected parts of an HTML page from conversion to 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 of the converter. 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 of the converter 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 without them. If you set this property to false, the excluded elements are simply hidden and the space they originally occupied in the HTML page is still reserved in the content layout.

Code Sample - Select HTML Elements to Convert to Image

C#
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

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

namespace Winnovative_Chromium_AspNetDemo.Controllers.HTML_to_Image
{
    public class Select_HTML_Elements_to_Exclude_from_ImageController : Controller
    {
        private readonly IWebHostEnvironment m_hostingEnvironment;
        public Select_HTML_Elements_to_Exclude_from_ImageController(IWebHostEnvironment hostingEnvironment)
        {
            m_hostingEnvironment = hostingEnvironment;
        }

        [HttpPost]
        public ActionResult ConvertHtmlToImage(IFormCollection collection)
        {
            // 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 = "fvDh8eDx4fHg4P/h8eLg/+Dj/+jo6Og=";

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

            bool enableExcludedElementsSelector = collection["enableExcludedElementsSelectorCheckBox"].Count > 0;
            if (enableExcludedElementsSelector)
            {
                // The CSS selector used to identify the elements to exclude from conversion to image
                htmlToImageConverter.ExcludedElementsSelector = collection["excludedElementsSelectorTextBox"];

                // Specify whether elements that are not matched by ExcludedElementsSelector
                // should be completely removed from the layout rather than just hidden
                htmlToImageConverter.RemoveExcludedElements = collection["removeExcludedElementsCheckBox"].Count > 0;
            }

            byte[] outImageBuffer = null;

            if (collection["HtmlPageSource"] == "convertHtmlRadioButton")
            {
                string htmlWithForm = collection["htmlStringTextBox"];
                string baseUrl = collection["baseUrlTextBox"];

                // Convert a HTML string to a PNG image
                outImageBuffer = htmlToImageConverter.ConvertHtml(htmlWithForm, baseUrl, ImageType.Png);
            }
            else
            {
                string url = collection["urlTextBox"];

                // 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