浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【JavaScript】html2canvas を使って任意の要素を画像としてダウンロード

 何かしらのスクリーンショットを取りたい要望があったとしても、余分なものが映ったり、画面が要素に対して小さすぎるが故に画像化できない時があります。そういった要望を解決できる任意要素を画像化し、ダウンロードする方法を紹介します。
 使うライブラリは 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')

  • この記事いいね! (0)