Rendering

edit

The library lays the pages out and paints them, but it draws no pixel by itself: the core package has no graphics dependency. A rendering backend draws the pages. The Meziantou.Framework.WebPlatform.Imaging package provides one, with Meziantou.Framework.Imaging: fully managed, with no native dependency, so the same page gives the same pixels on every platform.

dotnet package add Meziantou.Framework.WebPlatform.Imaging

using var context = new BrowsingContext(new BrowsingContextOptions
{
    Viewport = new ViewportOptions { Width = 1280, Height = 720, DevicePixelRatio = 2 },
    DocumentLoader = DocumentLoader.Create(),
    RenderingBackend = new ImagingRenderingBackend(),
});

context.Navigate("https://example.com/");
await context.EventLoop.RunUntilIdleAsync();

await File.WriteAllBytesAsync("page.png", context.TakeScreenshotAsPng());            // the viewport: 2560x1440 pixels
using var title = context.Document.QuerySelector("h1")!.TakeScreenshot();           // an element, as an Image<Rgba32>

// Print the document: the print media type, the @page rules, one image per page
var pages = context.RenderPagesAsPng(new PrintOptions { PageWidth = 794, PageHeight = 1123 }); // A4 at 96 dpi

What the backend does

Give an ImagingRenderingBackend to BrowsingContextOptions.RenderingBackend. It is used for:

the screenshots of the pages and of the elements, and the pages printed as images;
the 2D canvases (canvas.getContext("2d"), OffscreenCanvas) and the images of the paint worklets;
the decoding of the images of the pages: PNG (and animated PNG), JPEG, GIF, WebP, AVIF, JPEG XL, BMP and ICO, with their EXIF orientation and their color profile;
the encoding of the canvases as JPEG and WebP (toDataURL(), toBlob()).

Without a backend, the layout and the geometry work the same, but the images are not decoded (only their size is read), getContext("2d") returns null, and the documents do not keep the bytes of their images. A backend can be shared by several browsing contexts.

In this section

Screenshots: the viewport, the full page, an element or an area, as an image, PNG or JPEG.
Printing pages: lay a document out for printing, with the @page rules, one image per page.
PDF output: print a document to a PDF with selectable text, links and bookmarks.
Canvas: draw on the canvases of a page from .NET or from its scripts.
Fonts: the bundled fonts, the web fonts and the fonts of the machine.