Consultant Designer & Developer
downloadHtmlAsImage(sampleHTML)
downloadHtmlAsImage(sampleHTML, {
label: "Download @4x PNG",
filename: "scaled@4x",
// options for html2canvas
scale: 4
})
function downloadHtmlAsImage(el, options) {
const { label, ...restOptions } = Object.assign(
{ label: "Download as PNG", scale: window.devicePixelRatio },
options
);
const ui = Inputs.button(label, {
value: null,
reduce: generateDownloader(el, restOptions)
});
return ui;
}
function generateDownloader(el, options) {
return async function () {
let resolve, reject;
const { filename = "untitled", ...html2canvasOptions } = options;
const canvas = await html2canvas(el, html2canvasOptions);
const blob = await canvas2blob(canvas);
FileSaver(blob, filename);
};
}
async function canvas2blob(canvas) {
let resolve, reject;
const promise = new Promise((y, n) => ((resolve = y), (reject = n)));
canvas.toBlob((blob) => {
if (blob == null) {
return reject();
}
resolve(blob);
});
return promise;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
