HTML要素を要素内の<img>も含めて画像化する

2022/08/11

(この記事の文字数: 673)

更に追記: rasterizeHTML.jsをCDN版ではなく、githubのサンプルで参照しているものをコピーして使ったところ、スマホでも画像が表示されるようになりました。

追記: この記事の方法だとスマホから見たときにラスタライズされた画像が初回表示されませんでした。ページをリロードするとなぜか表示されるようになりました。

HTML内の要素を画像に変換するのは結構面倒です。特に画像パスURLをデータURLに変換するのが手間です。調べてみると、HTML要素を画像にしてくれるライブラリはいくつかあるんですが、画像のデータURL変換周りは自分でやらないといけないものが多かったので、今まで自前で変換して凌いでいました。

改めて面倒だなぁと思った今日この頃、rasterizeHTML というライブラリでは画像パスのままでも中で変換してくれるとの情報を得たので使ってみました。

以下が実行結果です。images/twitter.png というパス指定の画像をちゃんと画像化してくれました(文字スタイルが違うのはCSSを与えていないため)。これは嬉しい。後はcanvasを画像として保存すればいいだけですね。(制限事項はあるので詳しくはrasterizeHTMLの説明を参照してください)

元の要素:

パスURL指定:

データURL指定:

Hello, world!

結果:

要素をシリアライズしたテキスト:

以下がソースコードです。CDN版を使用しているので画像パスだけ変更すればそのまま動くと思います。

<script src="https://cdnjs.cloudflare.com/ajax/libs/rasterizehtml/1.3.1/rasterizeHTML.allinone.min.js"
integrity="sha512-8oluEnt1t+gexGfDJb99W//rKC167lnwXrpJYdmYt+hUlptb6zuGORyZsTQD2+5vcNlyli8iP8V4j+IUNwNlMw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>

元の要素:<br />
<div id="source" style="background-color: lightblue;">
    <p>
    <img src="images/twitter.png">
    </p>
    <p>Hello, world!</p>
    <p>Hello, world!</p>
    <p>Hello, world!</p>
    <p>Hello, world!</p>
</div>

結果:<br />
<canvas id="resultCanvas"></canvas>


<script>

function drawElementToCanvas(sourceElem, canvas) {
    let serialized = new XMLSerializer().serializeToString(sourceElem);

    const padding = 20; // レンダリング時に上下左右に隙間が入ってしまうので、その分をcanvasサイズに加味

    canvas.height = sourceElem.offsetHeight + padding * 2;
    canvas.width = sourceElem.offsetWidth + padding * 2;
    rasterizeHTML.drawHTML(serialized, canvas);
}

window.addEventListener('load', (event) => {
    let sourceElem = document.getElementById("source");
    let canvas = document.getElementById("resultCanvas");
    drawElementToCanvas(sourceElem, canvas);
});
</script>