11
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

html2canvasを試す

HTML の Element を画像に変換するライブラリ html2canvas を試しました。Chrome では良好ですが、Firefox では文字のサイズが変わってレイアウトが崩れるようです。

See the Pen Test: html2canvas by 七誌 (@7shi) on CodePen.

↑ 左が撮影元の Element、右がそれを画像化したものです。内容はデザインでよく使われる lorem ipsum と呼ばれるダミーテキストで、意味はありません。

シリーズの記事です。

  1. dom-to-imageを試す
  2. html2canvasを試す ← 今回の記事
  3. 複数の画像を生成してローカルに保存

html2canvas

公式: http://html2canvas.hertzen.com/

驚異的な力技で実装されているようです。

html2canvasは、WebページのDOMやCSSを読み込み、その結果を元に解釈した結果をCanvasエレメント上に描画するライブラリです。 すなわち、実際にスクリーンショットを撮っているわけではなく、挙動としてはレンダリングエンジンに近いです。 (CSSの解釈はなんと1つ1つ実装されているので、作者は本当にすごいと思います)

利用方法

自前でどこかに置かなくても、jsDelivr 経由で参照できます。

<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js"></script>

README のサンプルコードを元に async/await で書き換えます。

(async () => {
  dst.appendChild(await html2canvas(src));
})();

動作結果

この記事の冒頭に貼ったサンプルのスクリーンショットを見ます。

Chrome では上に少し余白ができますが、文字のサイズはそのままで画像化されます。
image.png
Firefox では文字のサイズが変わってしまうため、単語間のスペースが潰れたり文字が重なったりします。
image.png
撮影対象がブラウザに依存するのでなければ、Chrome で利用するのが無難なようです。

※ 手動ですが Firefox で Element を画像化する方法は前回の記事を参照してください。

参考

以下の記事では CDN にあるバージョンは古いとありますが、jsDelivr では npm に登録されている最新版が利用できます。

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
11
Help us understand the problem. What are the problem?