html 2 canvas DOM要素スタイルに基づいてWebページのスクリーンショットを実現

html 2 canvasはかなり良いJavaScriptクラスライブラリで、html 5とcss 3のいくつかの新しい機能特性を使用して、クライアントでウェブページをスクリーンショットする機能を実現しました.html 2 canvasは、ページのDOMと要素のスタイル情報を取得し、canvasピクチャにレンダリングすることで、ページのスクリーンショット機能を実現します.
サーバからレンダリングする必要はありません.画像全体がクライアントブラウザで作成されます.ブラウザがCanvasをサポートしていない場合は、FlashcanvasまたはExplorerCanvasテクノロジーを使用して実装されます.以下のブラウザはこのスクリプトをよくサポートすることができます:Firefox 3.5+、Google Chrome、Operaの新しいバージョン、IE 9以上のブラウザ.
ブラウザごとにページをレンダリングする方法が異なるため、生成される画像も異なります.まだ開発段階ですが、期待できます.
このプラグインはjQueryプラグインに依存しており、最新版を使用することをお勧めします.
互換性
html 2 canvasは、以下のブラウザで完璧に動作します.

Firefox 3.5+

Chrome

Opera

IE9

使用方法
1、ファイルを導入する
まず、jQueryライブラリとhtml 2 canvasプラグインファイルを導入する必要があります.html 2 canvasプラグインファイルは必ずjQueryの後ろに導入しなければなりません.そうしないと、エラーが発生します.

2、プラグインを び す
html 2 canvasメソッドでプラグインを び します.このメソッドは2つのパラメータを け れます.1つ はスクリーンショットを するDOM で、2つ のパラメータはプラグインの です.

html2canvas(document.body, {
    allowTaint: true,
    taintTest: false,
    onrendered: function(canvas) {
        canvas.id = "mycanvas";
        //document.body.appendChild(canvas);
        //  base64    
        var dataUrl = canvas.toDataURL();
        var newImg = document.createElement("img");
        newImg.src =  dataUrl;
        document.body.appendChild(newImg);
    }
});

したスクリーンショットは、コールバック によって されます.
のドメイン
Webページの で、ドメイン の がある 、toDataURLを び すとエラーが します

SecurityError: The operation is insecure.

は、ドメイン のサーバにheaderを してドメイン リクエストを することです.

access-control-allow-origin: *  access-control-allow-credentials: true

ホームページ:http://html2canvas.hertzen.com/
この は のとおりです.http://www.uedsc.com/html2canvas.html
:https://www.cnblogs.com/dreammyle/p/4872574.html