html2canvas を使用して HTML コードを画像に変換する方法

コードを画像に変換するには

html2canvas は、ブラウザから Web ページのスクリーンショットを撮るための非常に有名なオープンソースライブラリです。使いやすく、強力な機能を備えています。

html2canvasの使用

html2canvas の使い方は非常に簡単です。DOM 要素を渡して、コールバックを通じてキャンバスを取得するだけで済みます。

実際に使用する際に注意すべき点が 2 つあります。

1.html2canvas は、要素の実際のスタイルを解析してキャンバスイメージコンテンツを生成するため、要素の実際のレイアウトと視覚的な表示に関する要件があります。完全なスクリーンショットを撮りたい場合は、要素をドキュメントフローから分離するのが最適です（例：position: absolute）

2. デフォルトで生成されたキャンバス画像は、Retina デバイスでは非常にぼやけています。画像を 2 倍に処理すると、この問題を解決できます。

var w = $("#code").width();  
var h = $("#code").height(); // キャンバスの幅と高さを、コンテナーの幅と高さの 2 倍に設定します。var canvas = document.createElement("canvas");  
    キャンバスの幅 = w * 2;  
    キャンバスの高さ = h * 2;  
    キャンバスの幅 = w + "px";  
    キャンバスの高さ = h + "px";  
var context = canvas.getContext("2d"); //次に、キャンバスを拡大縮小し、画像を 2 倍に拡大してキャンバスに描画します。context.scale(2,2);  
    html2canvas(document.querySelector("#code"), {          
キャンバス: キャンバス、         
 onrendered: 関数(キャンバス) 
{...        
  }    
});

html2canvas の実際の使用例

1.htmlコード構造

<セクション class="share_popup" id="html2canvas">  
<p>html2canvas は非常に簡単に使用できます。DOM 要素を渡して、コールバックを通じてキャンバスを取得するだけです。</p>  
<p><img src="1.jpg"></p>  
<p>html2canvas は非常に簡単に使用できます。DOM 要素を渡して、コールバックを通じてキャンバスを取得するだけです。</p>  
 </セクション>

2.jsコード構造

var str = $('#html2canvas');  
// コンソールログ(str);  
html2canvas([str.get(0)], {  
    onrendered: 関数 (キャンバス) {  
        var image = canvas.toDataURL("image/png");  
        var pHtml = "<img src="+画像+" />";  
        $('#html2canvas').html(pHtml);  
    }  
});

要約する

上記は、html2canvas を使用して HTML コードを画像に変換する方法についての編集者による紹介です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。編集者がすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<: sshとは何ですか?使い方は？どのような誤解があるのでしょうか?

>>: CSS3アニメーション: マウスが画像上にあると画像が徐々に大きくなり、マウスが画像から離れると徐々に小さくなります。