JavaScript で HTML を画像に変換する
この記事では、HTML を画像としてレンダリングする方法を学習します。 これは、HTML を含む Web ページの 2D スナップショットを取得し、それを Web ページに表示するか、画像をダウンロードすることを意味します。
外部の JavaScript ライブラリを使用して、以下のメソッドで HTML を画像にレンダリングしました。
html2canvas JavaScript ライブラリを使用して HTML を画像に変換する
以下の例では、html2canvas ライブラリを使用して、HTML を画像に変換し、Web ページにレンダリングしています。
たとえば、ID が異なる 2つの div 要素、my-div と ShowImage を作成しました。 my-div ID を持つ div 要素のスナップショットを取得し、ID ShowImage を持つ div 要素内にスナップショットを表示します。
また、<button> 要素を作成し、そのための onclick イベントを追加しました。 ユーザーがボタンをクリックすると、convertToImage() 関数が呼び出され、HTML が画像に変換されます。
<body>
<div id="my-div">This is sample div element.</div>
<div id="ShowImage"></div>
<button onclick="convertToImage()">Convert</button>
</body>
以下の CSS の div 要素にいくつかのスタイルを適用しました。 CSS プロパティを使用して、div 要素の height、width、および background-color を設定しました。
また、すべての div 要素のマージンを設定して、周囲にスペースを残します。
div {
display: block;
margin: 20px;
}
#my-div {
height: 300px;
width: 300px;
background-color: red;
}
html2canvas ライブラリを使用するには、(https://html2canvas.hertzen.com/) からローカル コンピュータにダウンロードする必要があります。 その後、ユーザーは <script> タグの src 属性にライブラリ ファイルの正しいパスを割り当てることにより、<script> タグを介してライブラリを HTML コードに追加できます。
<script src="html2canvas.js" type="text/javascript"></script>
convertToImage() 関数には、HTML を画像に変換する JavaScript コードが含まれています。
以下のコード例では、JavaScript で ID を使用して ID my-div を持つ div 要素にアクセスし、html2canvas 関数を適用してその特定の HTML 要素の画像をキャプチャしています。 canvas は画像を保存し、その画像を ID ShowImage の div 要素に追加しました。
<script>
function convertToImage() {
html2canvas(document.getElementById("my-div")).then(function (canvas) {
document.getElementById("ShowImage").appendChild(canvas);
});
}
</script>
出力：
上記の出力アニメーションでは、convert ボタンをクリックすると、ドキュメント本文内の <div> 要素の新しい画像がレンダリングされることがわかります。
さらに、キャプチャした画像をローカルにダウンロードして保存するための HTML リンクを作成できます。
ここでは、document.createElement("a") を使用して新しい <a> 要素を作成し、anchor 変数内に保存しました。 また、document.body.appendChild(anchor) を使用して、ドキュメント本文に <a> 要素を追加しました。
次に、anchor.download = "sample.jpg" を使用してダウンロード可能な画像ファイルに名前を付け、canvas 変数の toDataURL プロパティを使用して anchor の href 属性を設定しました。 また、イメージをダウンロード可能にするために、anchor の target 属性に _blank 値を設定しました。
出力は、convert ボタンをクリックすると、div 要素の画像を Web ページに追加し、同じ画像ファイルをローカル コンピューターにダウンロードすることも示しています。
<script>
function convertToImage() {
html2canvas(document.getElementById("my-div")).then(function (canvas) {
var anchor = document.createElement("a");
document.body.appendChild(anchor);
document.getElementById("ShowImage").appendChild(canvas);
anchor.download = "sample.jpg";
anchor.href = canvas.toDataURL();
anchor.target = "_blank";
anchor.click();
});
}
</script>
出力：
dom-to-image JavaScript ライブラリを使用して HTML を画像に変換する
以下の HTML コードは、上記の例で使用されているものとほぼ同じで、id 属性の値が異なる 2つの div 要素が含まれています。
<div id="my-div">Demo texts.</div>
<div id="ShowImage"></div>
<button onclick="convertToImage()">Convert to image</button>
以下の CSS コードには HTML コードのスタイルが含まれており、上記のコード例で使用したものとほぼ同じです。
div {
display: block;
margin: 20px;
}
#my-div {
height: 100px;
width: 100px;
background-color: blue;
}
domtoimage ライブラリを使用するには、ローカルにダウンロードするか、その CDN を使用する必要があります。 ここで、ユーザーは、HTML コードの <head> セクションに domtoimage ライブラリの以下の CDN を埋め込む必要があります。
<script
src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"
integrity="sha512-01CJ9/g7e8cUmY0DFTMcUw/ikS799FHiOA0eyHsUWfOetgbx/t6oV4otQ5zXKQyIrQGTHSmRVPIgrgLcZi/WMA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
以下の JavaScript コードでは、ID を使用して div 要素にアクセスし、element 変数に格納しています。
次に、domtoimage ライブラリを使用して、HTML を png 画像に変換しました。 new Image() コンストラクターを使用して新しい空の画像を作成し、newImage 変数内に保存しました。
また、newImage 変数の src 属性に URL 値を割り当てています。 その後、newImage を Web ページに追加します。
また、catch ブロックを使用してエラーを処理しました。
<script>
function convertToImage(){
var element = document.getElementById("my-div");
domtoimage
.toPng(element)
.then(function (URL) {
var newImg = new Image();
newImg.src = URL;
document.getElementById('ShowImage').appendChild(newImg);
})
.catch(function (error) {
console.error("error");
});
}
</script>
出力：
ユーザーは、青い div のスナップショットを撮っていることを確認できます。 ボタンをクリックするたびに、コードは青い div の新しいスナップショットをドキュメント本文に追加します。
関連記事 - HTML Image
- HTML 画像にキャプションを追加
- HTML 画像の不透明度
- フォルダーから HTML に画像を追加する
- 画像をクリックまたはホバーすると、HTML で拡大されます
- HTML で Base64 画像を表示する