html で作った要素を画像化してダウンロードしたい時って、ありませんか？
私はあります。
そんなときに使えるのが、「html2canvas」というパッケージです。
html2canvas とは、html の要素をキャンバスに描画して、画像として保存できる JavaScript 製のライブラリです。
このライブラリを使えば、html で作ったグラフや表など、画像化がめんどくさそうな要素でも簡単に画像としてダウンロードすることができます。
この記事では、html2canvas の基本的な使い方と、ダウンロードする画像のオプションを変更する方法を紹介します。
html2canvas の使い方
まずはデモを見てください。
html2canvas を使うには、まずライブラリを読み込む必要があります。CDN を利用する場合、以下のように script タグで指定します。
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>もしくは、npm 経由でインストールし、import しておきます。
# npm
npm install html2canvas
# Yarn
yarn add html2canvas
# pnpm
pnpm add html2canvas次に、画像化したい要素を指定します。例えば、次のような div 要素があったとします。
<div id="target" style="padding: 10px; background: #f5da55">
<p style="color: #000">Hello world!</p>
</div>これを画像化するには、以下のように html2canvas を呼び出します。
html2canvas(document.querySelector("#target")).then((canvas) => {
// canvas には描画された内容が入っている
});第一引数には、画像化したい DOM 要素を入れます。複数指定することはできないので、全体をラップするような div 要素等を作るとよいと思います。
第二引数には、オブジェクトの形式でオプションを設定します。
なお、レンダリング処理は非同期なので、複数の要素をそれぞれ画像化したい場合は、ループ処理と Promise を組み合わせると良いかと思います。
html2canvas 関数が返してくるのは canvas 要素そのままなので、組み込みの変換メソッド等もそのまま使えます。以下のように記述するだけで簡単にダウンロードを実装することが可能です。
// canvas 要素インスタンスの canvasEl をあらかじめ用意
const aEl = document.createElement("a");
aEl.href = canvasEl.toDataURL("image/png"); // image/jpg とすることで jpeg にも変換可能
aEl.download = "ファイル名.png";
aEl.click();これらを組み合わせて次のように任意要素の画像をダウンロードできます。
function downloadElAsPng() {
const el = document.querySelector("#target");
if (!el) {
console.error("要素が見つかりませんでした。");
return;
}
html2canvas(el).then((canvasEl) => {
const aEl = document.createElement("a");
aEl.href = canvasEl.toDataURL("image/png");
aEl.download = "result.png";
aEl.click();
});
};
downloadElAsPng();使うにあたっての注意
このように、ユーザーにスクショを撮ってもらわなくてもページの画像を取ってこれる便利なライブラリですが、使用する上で気をつけておきたいことが2つあります。
実際にスクリーンショットを撮っているわけではない
最初にも書いた通り、html2canvas は、Web ページの DOM や CSS を読み込んで、その結果を元にパースした結果を Canvas に描画するライブラリです。
つまり、実際にスクリーンショットを撮っているわけではなく、挙動としては satori とかと同じ、レンダリングエンジンに近いです。
これが理由で、一部の新しい CSS プロパティのパースができなかったり、Chrome や Safari 等の一般的なブラウザとは異なる表示がされてしまう場合があります。導入する際は、実際の html と一致する画像が生成されているかを確かめながら実装を進めたほうが、後からの修正がなくスムーズだと思います。
クロスオリジンの制限がある
画像化する要素に外部の画像やフォントなどがあった場合、cross origin (cors) の制限に引っかかることがあります。
制限に引っかかってしまうと、その canvas はいわゆる「汚染」された状態になり、toDataURL() や toBlob() などの画像化に関する関数が実行できなくなってしまいます。
解決策は以下の通りです。
サーバー (外部) 側で cors ヘッダーの設定を行う
cors について、詳しくは MDN などを見てほしいですが、簡単に説明すると、別オリジンのリソースにアクセスする際に、サーバー側でアクセス許可を与える仕組みです。サーバー側でAccess-Control-Allow-Originヘッダーを設定し、クライアント側で画像要素に crossOrigin 属性を設定します。
<img crossOrigin="anonymous" src="https://example.com/hoge.png">proxyとuseCORSオプションを設定する
html2canvas のオプションでプロキシサーバーを設定することによっても回避が可能です。
html2canvas(element, {
proxy: "https://example.com/proxy.php", // プロキシサーバーの URL
useCORS: true, // CORS を有効にする
}).then((canvas) => { ... };まとめ
以上、html2canvas を使って html 要素を画像としてダウンロードする方法を紹介しました。
この記事がお役に立てば幸いです。
最後までお読みいただき、ありがとうございました。
コメント