JavaScript | html2canvasを使ってHTML要素を画像に変換する
JavaScriptでhtml2canvasライブラリを使ってHTML要素を画像に変換する実装方法とサンプルコードを紹介しています。
html2canvasの実装サンプル
以下の表示は、実際にhtml2canvasライブラリを利用してHTML要素を画像に変換したのもを表示しています。
画像に変換するHTML要素
変換した画像の表示場所
html2canvasの実装サンプルコード
実装サンプルでのHTMLには、画像に変換したい要素「container」というID名を持つDIV要素を設置しています。
また、html2canvasライブラリで変換した画像を表示するIMG要素を空のまま設置、ID名は「image」としています。
<p>画像に変換するHTML要素</p>
<div id="container">
<div class="square"></div>
</div>
<p>変換した画像の表示場所</p>
<img id="image">画像に変換する要素、<div id="container">には<div class="square">という要素でCSSによる四角形の描画のみが含まれています。
#container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
aspect-ratio: 2 / 1;
background-color: #202020;
}
.square {
width: 100px;
height: 100px;
background: royalblue;
}html2canvasライブラリの実行には、html2canvas()をPromiseオブジェクト式で記述します。
then()にて処理を実行していきますが、引数名「canvas」にはHTML要素をCanvas化したものが代入されています。
toDataURL('image/png')にて、「canvas」をPNG画像データ（サンプルコードでは「canvas_image」）に変換します。
PNG画像データをどうするかは、目的に合わせて処理しますが、サンプルコードではHTMLに設置しているID名「image」の画像タグのsrcに「canvas_image」を追加してブラウザで表示するようにしています。
html2canvas(document.querySelector("#container"), {
// オプション
}).then(canvas => {
let canvas_image = canvas.toDataURL('image/png');
document.querySelector("#image").setAttribute("src", canvas_image);
});