HTML Snapshot

Method that helps you take the snapshot of a HTMLElement and obtain the resulting Blob.

Syntax

// method
Pacem.Utils.snapshotElement(element: HTMLElement | SVGElement, backgroundColor?: string, type?: string, quality?: number) : Promise<Blob>

Arguments

• element: the target DOM element to snapshoot.
• backgroundColor (optional): background color, in case of transparent element.
• type (optional): image mime-type (e.g. image/jpeg).
• quality (optional): compression quality [0..1] for those types that allow compression.

Demo

// example: snapshoothing a div element then forcing the download of the resulting blob
const div = document.querySelector("div.to-snap");
Pacem.Utils.snapshotElement(div, "#fff", "image/jpeg", 0.9)
    .then(blob => { Pacem.Utils.download(blob, "snapped.jpg")) });

Snapshoot the above code block by clicking the button below.

Examples

Snapshot of a map control.
This code sample allows you to snapshoot a LeafletJs map (works also for canvas-rendered maps, see below).

Uses a fine-tuned method from the MapAdapter that exploits snapshotElement() under the hood.