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

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

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

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

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

 var w = $(#code).width(); var h = $(#code).height();//キャンバスの幅と高さをコンテナの幅と高さの2倍に設定します var Canvas = document .createElement(キャンバス); キャンバス.幅 = w * 2; キャンバス.スタイル.幅 =​​ h + ピクセル; Canvas.getContext(2d);//次に、キャンバスを拡大縮小し、画像を 2 倍にしてキャンバス上に描画します context.scale(2,2); html2canvas(document.querySelector(#code), { Canvas: Canvas, onrendered: function (キャンバス) { ... } });

1.htmlコード構造

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

2.jsのコード構造

var str = $('#html2canvas'); //console.log(str); html2canvas([str.get(0)], { onrendered: function (canvas) { var image = Canvas.toDataURL(image/png) ; var pHtml = <img src=+image+ /> $('#html2canvas') } });

上記は html2canvas を使用して HTML コードを画像に変換する方法についての編集者による紹介です。ご質問があれば、メッセージを残してください。編集者がすぐに返信します。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！