最近、全体的な異常な情報記録を解決するために、プロジェクトはブラウザの完全な画面スクリーンショット関数を研究しているため、ユーザーは迅速にスクリーンショットを発見し、異常を見つけたら管理者に送信できます。最終記録に記録されている究極の情報は、上記の[スクリーンショットレポートマネージャー]を使用して達成されます。
html2canvasの紹介過去には、他のスクリーンショットツールを介して画像をインターセプトできました。最新のブラウザの機能は、H5の段階的な普及により、スクリーンショットを撮ることができます。 HTML2Canvasはそのようなフロントエンドプラグインであり、その原則はキャンバスにDOMノードを描画することです。便利ですが、次の限界があります。
私の使用シナリオは単純であるため、自分で定義されており、異常なページも自分で定義されているため、HTML2Canvasで十分です。
インスタンスを使用します引用jQuery、html2canvasを使用でき、コードは簡単です。ここでは、HTML2Canvas 0.5.0バージョンを使用しています
html2canvas（#tbl_exception）、{onRendered：function（canvas）{canvas.todataurl（）; pngto（body）;最初のパラメーターはスクリーンショットのDOMオブジェクトであり、2番目のパラメーターは回復キャンバスの後にレンダリングされます。
| 名前 | タイプ | デフォルト | 説明 |
|---|---|---|---|
| 許可 | ブール | 間違い | クロスオリジン画像がキャンバスを汚染することを許可するかどうか |
| 背景 | 弦 | #fff | キャンバスの背景色は、透明に設定されていない場合はありません |
| 身長 | 番号 | ヌル | キャンバスのheigtをピクセルで定義します。 |
| レターレンダリング | ブール | 間違い | 各文字を個別にレンダリングするかどうか。 |
| ロギング | ブール | 間違い | コンソールにイベントを記録するかどうか。 |
| プロキシ | 弦 | 未定義 | プロジェクトへのURLは、クロスオリジン画像のロードに使用されます。 |
| 汚染テスト | ブール | 真実 | 描画する前にキャンバスを汚染する場合、各画像をテストするかどうか |
| タイムアウト | 番号 | 0 | イメージを0に設定するためのタイムアウトは、タイムアウトが発生しません。 |
| 幅 | 番号 | ヌル | キャンバスの幅をピクセルで定義します。 |
| ユーザー | ブール | 間違い | プロキシに戻る前に、クロスオリジン画像をCORS Servadとしてロードしようとするかどうか |
紹介した後、使用中に遭遇した問題について話すとき、スクリーンショットは現在の画面のコンテンツのみを傍受できます。プラグインソースコードとデバッグをチェックした後、ソリューションを見つけます。ソースコードと変更されたコードを以下に投稿します
ソースコード：
RENDERDOCUMENT（node.Owndocume、option、node.Owndocument.defaultVidth、node.Owndocument.defaultView.innerheight、inde x）{ifof（optionof（options.onrended）== confunce）{log）。 {log）（options.onrederedは廃止され、html2canvas returnはキャンバスを含む約束です。コードの変更：
// 2016-02-18ソースコードを使用して、var width = options.width.headをサポートするためにカスタム幅を追加できません！= null？ ）{log（options.onended is Depated、html2canvasは、canvasを含む約束を返します。主に、ユーザーが呼び出しのときにDOMオブジェクトの幅と高さをカスタマイズできるようにします
$（#btn_screen）.on（click、function（）{html2canvas（$（#tbl_exception）、{height：$（#tbl_exception）.outerheight（） + 20、onRendered：fuins。（canvas）{var url = canvas。 todataurl（）; [0] .click（）;要約しますフロントエンドプラグを通して、ブラウザの完全なスクリーンショット機能が実装されています誰もがvevb wulin.comをサポートすることを願っています。