loading... Pacem JS

HTML Snapshot

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


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



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


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.