HTML要素画像化ライブラリ「elem2img.js」を公開しました！
公開日時: 2024-04-25 06:54:32更新日時: 2024-05-08 21:09:49本日(2024/4/25)、Midari Createの配布ページにて、HTML要素をスクリーンショットのように画像化する軽量Javascriptライブラリ「elem2img.js」を公開しました。本ライブラリは、2年前に当ブログで紹介したJavascriptでHTMLをPNG画像化するサンプルコードを、鉄道運用Hubに組み込むにあたって、利用しやすいようにライブラリ化するとともに、大幅な機能強化を行ったものです。
elem2img.jsでは、中心となる処理は以前のサンプルコードのものを引き継ぎながらも、CSS取り込み処理の自動化や、外部画像の埋め込み機能など、ライブラリとして有用な機能を追加したほか、対応画像形式もwebp、PNG、JPEGの3種類に拡張しました。
ライセンスについてはサンプルコードから変わらず無権利創作宣言に準拠した著作権放棄となっており、営利・非営利を問わず自由にご利用いただけます。
なお、2年前に公開したサンプルコードのクラス名は「elm2img」でしたが、近年のJavascriptサンプルコードではHTML要素の変数名として「elem」が用いられている例を多く見かけることから、本ライブラリの名称もそれに合わせるかたちで「elem2img」としています。
この記事のタグ:
elem2img
elem2img
この記事へのコメント
2: かぁくん(管理者)
質問ありがとうございます。mask-imageについては、Google Chromeにて、表示通り画像化されることを確認しています。
ただし、ブラウザのセキュリティ仕様により、オフラインのファイルや別ドメインに存在するファイルはそのままでは画像出力時に解析することができません。
使用している画像が別ドメインやオフライン環境(file://でのアクセス)にある場合は、同一ドメイン上で公開状態にするか、BASE64エンコードしてCSSに直接埋め込むなどして、再度試してみてください。2024-10-10 22:52:11
3: 六丸
素早いお返事をありがとうございます！web上にアップロードしてみたところ、問題なく機能しました！
オフライン上で試していたのが悪かったみたいです。
他のhtml画像化ツールではmask-imageに対応しておらず、一瞬マスクが効いた気がしたこのライブラリならもしかするとほんとに対応しているかもしれない……と思って思い切って質問してみましたが、対応してくださっていて本当に助かりました。
良いツールを生み出していただき、そして質問に丁寧に答えてくださり、本当にありがとうございました！2024-10-11 15:10:27
4: 水生
（すみません、いつも使っているハンドルネームがまろび出てしまいました……！ 六丸は最初の質問者の水生で間違いないです！）2024-10-11 15:11:165: かぁくん(管理者)
正常に動作したようでなによりです。まだまだ機能不足感も否めない拙作ですが、役立ててもらえて、こちらこそありがとうございます。2024-10-14 22:35:39
1: 水生
elem2imgに関する質問です！elem2imgはcssのプロパティ「mask-image」に対応していますでしょうか？
mask-imageを多用するツールを作った際に、htmlで重ねたものを画像化するのにelem2imgを使用してみました。
ですが、結果画像として表示・出力されるのはマスクが効いていない状態のものでした。
もし対応していないのであれば、今後対応していただけるかどうか知りたく、また、既に対応しているのであれば、自分の書いたコードに何か問題があるのだと分かります。
お手数おかけしますが、お教えいただけますと幸いです。2024-10-07 17:16:13