ホームページ  >  記事  >  ウェブフロントエンド  >  html5ブラウザのスクリーンショットの例

html5ブラウザのスクリーンショットの例

巴扎黑
巴扎黑オリジナル
2017-09-02 09:56:072924ブラウズ

この記事では主に html2canvas を使用してブラウザのスクリーンショットを実装する html5 の例を紹介します。これは非常に実用的です。

最近のプロジェクトでは、グローバル例外情報レコードを解決するために、ユーザーが異常を見つけたときにすぐにスクリーンショットを撮って管理者に送信できる便利なブラウザーの全画面スクリーンショット機能を研究しました。最終的に記録される例外情報は以下のとおりです。上記の[管理者へのスクリーンショット報告]は、html2canvasフロントエンドプラグインを使用して実装されています。

html2canvasの紹介

以前は、他のスクリーンショットツールを介してのみ画像をキャプチャできました。最近のブラウザの機能はますます強力になり、H5 が徐々に普及するにつれて、ブラウザ自体でスクリーンショットを撮ることができるようになりました。 html2canvas はそのようなフロントエンド プラグインであり、その原理は Canvas に Dom ノードを描画することです。非常に便利ですが、次の制限があります。

  • は iframe をサポートしません

  • はクロスドメイン画像をサポートしません

  • はブラウザのプラグインで使用できません

  • SVG 画像は一部のブラウザではサポートされていません

  • Flash はサポートされていません

  • 古いブラウザと IE はサポートされていません 特定のブラウザがサポートされているかどうかを確認したい場合は、http://deerface.sinaapp にアクセスしてください。 .com/ と試してみてください:)

私の使用シナリオは非常に単純なので、例外情報を記録し、例外ページも自分で定義したので、html2canvas を使用するだけで十分です。

使用例

jqueryとhtml2canvasを引用するだけで、コードも非常にシンプルです。ここではhtml2canvasバージョン0.5.0を使用しています


 html2canvas($("#tbl_exception"), {
         onrendered: function (canvas) {
             var url = canvas.toDataURL();
              //以下代码为下载此图片功能
             var triggerDownload = $("<a>").attr("href", url).attr("download", getNowFormatDate()+"异常信息.png").appendTo("body");
               triggerDownload[0].click();
               triggerDownload.remove();
           }
   });

最初のパラメータはスクリーンショットを撮るDomオブジェクト、2番目のパラメータはレンダリング完了後にコールバックされるcanvasオブジェクトです。

使用方法を紹介した後、使用中に発生した問題について説明します。スクリーンショットは現在の画面の内容のみをキャプチャします。プラグインのソース コードを表示してデバッグした結果、解決策が見つかりました。ソースコードと改造コードは以下に掲載しています ソースコード:
 return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight, index).then(function(canvas) {
        if (typeof(options.onrendered) === "function") {
            log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
            options.onrendered(canvas);
        }
        return canvas;
    });
主に、呼び出し時にインターセプトする必要がある Dom オブジェクトの幅と高さをユーザーがカスタマイズできるようにします。現在の呼び出し方法は以下の通りです
            $("#btn_screen").on("click", function () {               
                html2canvas($("#tbl_exception"), {
                    height: $("#tbl_exception").outerHeight() + 20,
                    onrendered: function (canvas) {
                        var url = canvas.toDataURL();
                        //以下代码为下载此图片功能
                        var triggerDownload = $("<a>").attr("href", url).attr("download", getNowFormatDate()+"异常信息.png").appendTo("body");
                        triggerDownload[0].click();
                        triggerDownload.remove();
                    }
                });
            });
名前 タイプ デフォルト 説明
allowTaint boolean false クロスオリジン画像によるキャンバスの汚染を許可するかどうか
背景 文字列 #fff DOM で何も指定されていない場合は、キャンバスの背景色を透明に設定します
高さ 数値 null null の場合、ピクセル単位でキャンバスの高さを定義します。 window.
letterRendering boolean false 各文字を個別にレンダリングするかどうか。コンソールにイベントを記録するかどうか。 xy、つまりクロスオリジン画像のロードに使用されます。空のままにすると、クロスオリジン画像はロードされません。
timeout number 0 画像の読み込みのタイムアウト (ミリ秒単位) を 0 に設定すると、タイムアウトは発生しません。
width number null キャンバスの幅を定義します。 null の場合、ウィンドウの全幅でレンダリングします。
プロキシに戻る前に、CORS boolean false を使用して、CORSが提供するクロスオリジン画像のロードを試みます
問題分析
改造コード:
   //2016-02-18修改源码,解决BUG 对于部分不能截屏不能全屏添加自定义宽高的参数以支持
    var width = options.width != null ? options.width : node.ownerDocument.defaultView.innerWidth;
    var height = options.height != null ? options.height : node.ownerDocument.defaultView.innerHeight;
    return renderDocument(node.ownerDocument, options, width, height, index).then(function (canvas) {
        if (typeof(options.onrendered) === "function") {
            log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
            options.onrendered(canvas);
        }
        return canvas;
    });

以上がhtml5ブラウザのスクリーンショットの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。