html2canvasを使ってcanvasにhtmlの内容を書き込んで画像を生成する方法

前回は、canvas の基本的な使い方を簡単に説明しましたが、今回は、canvas に html の内容を記述して画像を生成する方法を説明します。

html2canvasの公式サイトです。 http://html2canvas.hertzen.com

I: html2canvas プラグインをダウンロードする

1: html2canvas プラグインを直接ダウンロードする。

html2canvas.min.jsを直接クリックし、直接ctrl+sで保存してください。

画像

2：ダウンロードにnpmを使用する

npm install html2canvas

II：html2canvasの使い方の紹介

html2canvasで使用される主な方法は次の2つです。

1: キャンバスにhtmlコンテンツを書き込む

html2canvas(element, options).then((canvas) =>{})

パラメータの説明です。

要素：canvasにhtmlコンテンツを書き込む必要があるjQueryオブジェクト

オプション：設定情報

よく使われる設定基本情報です。

scale: スケール、デフォルトは1

allowTaint: キャンバスのクロスドメイン画像汚染を許可するかどうか、デフォルトはfalse

useCORS: サーバーから画像を読み込む際にCORSを使用しようとするかどうか、デフォルトはfalseです。

width: キャンバスの幅。デフォルトは jQuery オブジェクトの幅。

height: キャンバスの高さ。デフォルトは jQuery オブジェクトの高さです。

backgroundColor: /デフォルトは透明（#fff）、パラメータには#の色、またはrgbaを使用できます。

2: キャンバス情報をbase64形式の画像に変換する

canvas.toDataURL("image/png")

htmlコンテンツに、キャンバスに書き込まない内容を指定した場合、タグに以下の属性を追加します。

data-html2canvas-ignore="true"

III：簡単な例

1: html2canvasの紹介

<script src="js/html2canvas.min.js"></script>

または、import を使って html2canvas を導入する。

import html2canvas from 'html2canvas';

2: 変換されるhtmlの内容

<div class="capture">
    <img src=". /wj.jpg" alt="">
    <div>
        <span style="color: #f00;letter-spacing: 20px">This is text text</span>
        <span data-html2canvas-ignore="true">Do not write to canvas</span>
    </div>
</div>

3: キャンバスにhtmlコンテンツを書き、base64画像に変換する

html2canvas(document.getElementsByClassName("capture")[0], {
        scale: 2,//Scale, default is 1
        allowTaint: false,//Whether to allow cross-domain image pollution of the canvas
        useCORS: true,//whether to try to use CORS to load images from the server
        width: '500',//the width of the canvas
        height: '500',//the height of the canvas
        backgroundColor: '#000000',//the background color of the canvas, default is transparent
    }).then((canvas) => {
        // convert canvas to base64 format
        var imgUri = canvas.toDataURL("image/png");
    });
Note here that the jQuery object is do

ここで、jQueryオブジェクトはdocument.getElementsByClassName("capture")[0]であり、documentではないことに注意。 getElementsByClassName("capture") はDOMネイティブオブジェクトで、jQueryオブジェクトではありません。

以上のことから、htmlの内容をcanvasに書き込んでbase64画像に変換し、その時点でbase64の内容をサーバーに渡して、画像を保存することができるようになります

以上、本記事の全内容を紹介しましたが、学習の一助となり、さらにスクリプトハウスを応援していただければ幸いです。