HTML要素画像化ライブラリ elem2img.js
elem2img.jsはHTML上の要素をスクリーンショットのように画像化し、必要に応じてそのファイルを画面表示やダウンロードさせることができる軽量Javascriptライブラリです。
文字にwebフォントを使用している場合でも表示通り画像化することができ、保存形式はwebp、PNG、JPEGから選択できます。
また、本ライブラリは画面キャプチャAPIを使用していないため、ユーザーに確認ダイアログを提示することなく処理を実行できるほか、画面外にある要素を画像化することも可能です。
なお、ライブラリ本体及びサンプルコードは著作権フリー(パブリックドメイン)であり、営利・非営利を問わず無料でご利用いただけます。
動作デモ
elem
IMG
この文章は編集可能です
この文章は編集可能です
使用方法
(1) ダウンロードしたZIPファイルを解凍し、elem2img.jsをwebアプリケーションのフォルダ内にコピーします。(2) HTMLファイルのheadタグ内に以下のコードを記載してelem2img.jsを読み込みます。ファイルパスは環境に応じて変更してください。
<script src="elem2img.js"></script>
(3) Elm2Imgクラスをインスタンス化して要素の画像化処理を実行します。
・IDが「sample」の要素を拡大率等倍で品質75のwebp画像としてダウンロードさせる場合は以下のようにします。
var elem = document.getElementById("sample");
var file_name = "Sample.webp";
var scale = 1;
var quality = 75;
var e2i = new Elem2Img();
e2i.save_webp(elem, file_name, scale, quality);
なお、JPEG画像とする場合はsave_jpeg、PNG画像とする場合はsave_pngを使用します。
save_pngでは品質値を使用しないため、引数はelem、file_name、scaleの3つとなります。
・IDが「sample」の要素を拡大率2倍で品質50のJPEG画像として表示させる場合は以下のようにします。
var elem = document.getElementById("sample");
var scale = 2;
var quality = 50;
var e2i = new Elem2Img();
e2i.get_jpeg(function (img_data) {
var img_elem = document.createElement("img");
img_elem.src = img_data;
document.getElementsByTagName("body")[0].appendChild(img_elem);
//表示と同時にダウンロードもさせる場合
Elem2Img.save_image(img_data, "Sample.jpeg");
}, elem, scale, quality);
なお、webp画像とする場合はget_webp、PNG画像とする場合はget_pngを使用します。
get_pngではsave_pngと同様品質値を使用しません。
また、webp画像とJPEG画像を扱うメソッドでは、品質を最高(100)とする場合は品質値を省略可能です。
制約
ブラウザのセキュリティ関連の仕様等に従い、本ライブラリでの画像化処理には以下のような動作の制約が存在します。- ドキュメントが別ドメインのファイル(CSS、画像、webフォント等)を呼び出している場合、そのファイルのヘッダーにAccess-Control-Allow-Originが適切に指定されていなければ、本ライブラリはそのファイルを無視します。
- 上記の動作により、本ライブラリをローカルファイル(localhostを除く)で実行した場合、画像やlinkタグで呼び出されるスタイルシートは全て無視されます。
- 画像化対象の要素の中に動画やインラインフレームを埋め込むことはできません。
- inputタグの入力内容やリンクやボタンなどのマウスホバー時のスタイル変化は画像に反映されません。
- HTML上に存在していない要素(document.createElementで要素が作成されたあと、appendChildによる親要素の指定が行われていない場合など)は要素の表示サイズが不確定であるため、画像化を実行できません。
- Safariではget_webpとsave_webpが利用できません。
