何かしらのスクリーンショットを取りたい要望があったとしても、余分なものが映ったり、画面が要素に対して小さすぎるが故に画像化できない時があります。そういった要望を解決できる任意要素を画像化し、ダウンロードする方法を紹介します。
使うライブラリは html2canvas です。これは任意の HTML 要素に描画された内容を canvas に描画して canvas 要素として返してくれるライブラリです。
html2canvas – Screenshots with JavaScript
niklasvh/html2canvas： Screenshots with JavaScript
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Hello world!</h4>
</div>
html2canvas(document.querySelector("#capture")).then(canvas => {
document.body.appendChild(canvas)
});
このライブラリを使うことで簡単に要素を canvas 化できます。
canvas にはデータを URL にするメソッドが組み込みでついています。
HTMLCanvasElement.toDataURL() – Web API ｜ MDN
ある canvas 要素があった場合、次だけで canvas に描かれた内容をダウンロードできます。
/** canvas 要素インスタンスの canvasEl をあらかじめ用意 */
const aEl = document.createElement('a');
aEl.href = canvasEl.toDataURL('image/png');
aEl.download = 'ファイル名.png';
aEl.click();
これらを組み合わせて次の様に任意要素の画像をダウンロードできます。
// 要素からダウンロード。 React の ref 等ならこちらから呼出し
const downloadElAsPng = (el: HTMLElement, filename: string) => {
return html2canvas(el).then((canvasEl) => {
const aEl = document.createElement('a');
aEl.href = canvasEl.toDataURL('image/png');
aEl.download = filename;
aEl.click();
});
};
// クエリセレクタからダウンロード
const downloadElAsPngFromQuery = (query: string, filename: string) => {
const el = document.querySelector(query);
if (!el) {
console.error(`要素が見つかりませんでした。query: ${query}`);
return new Promise(() => null);
}
return downloadElAsPng(el, filename);
};
// ex.
downloadElAsPngFromQuery('#seat-table', '座席表.png')
