【JavaScript】「html-to-image」ライブラリを使って指定した要素をSVG画像に変換する

今回は、HTML の特定の要素を画像に変換する方法についてです。
私の場合は、先日投稿した「【React】手書きキャンバスを実装できるライブラリ「react-signature-canvas」」で描画したものを、画像として保存するのに使用しました。

使用した html-to-image ライブラリの GitHub ページはこちらから。

GitHub – bubkoo/html-to-image: ✂️ Generates an image from a DOM node using HTML5 canvas and SVG.
https://github.com/bubkoo/html-to-image

導入方法ですが、まずライブラリを下記コマンドでインストールします。

npm install --save html-to-image

上記コマンドの実行が完了したら、あとは任意の場所に実装していきます。

サンプルコードは下記のとおりです。

import * as htmlToImage from 'html-to-image';

htmlToImage.toSvg(document.getElementById('[画像に変換したい要素のID]'))
  .then(function (dataUrl) {
    // 成功時に実行したい処理を記述する
    // 私の場合はダウンロード処理を実行
    const a = document.createElement('a')
    a.download = 'Image.svg';
    a.href = dataUrl;
    a.click();
  });

成功時には、変換した画像の Base64 データが取得できますので、<img> タグの src に渡して Web ページに表示することもできます。

なお、私は SVG 画像に変換したかったので、htmlToImage.toSvg() を使いましたが、JPEG や PNG 形式に変換することも可能です。
また、画像以外にも、.toBlob() で PNG 画像の BLOB を取得したり、.toCanvas() で <canvas> 要素に変換することも可能です。
こちらはやりたいことに合わせて、適したものを選んでください。

以上、HTML ページの指定した要素を SVG 画像に変換できるライブラリ「html-to-image」のご紹介でした。
ご参考になれば幸いです。