Javascript Web ページのスクリーンショットを撮る方法を一緒に学びましょう-jsチュートリアル-php.cn

Javascript Web ページのスクリーンショットを撮る方法を一緒に学びましょう

coldplay.xixi

リリース： 2020-06-19 17:00:30

転載

2190 人が閲覧しました

Javascript Web ページのスクリーンショットを撮る方法を一緒に学びましょう

以前、キャンバスグラフィックを画像に変換する方法とキャンバスイメージをダウンロードする方法について書きましたが、これらはすべてこのプラグインの技術的な準備です。

技術的なルートは非常に明確です。Web ページの特定の領域のコンテンツから画像を生成し、キャンバスに保存します。次に、キャンバスのコンテンツを画像に変換し、ローカルに保存し、最後にWeiboにアップロードします。

インターネットで検索したところ、指定した Web ページ要素のコンテンツからキャンバス画像を生成できる JavaScript ツールである html2canvas を見つけました。この JS ツールの使用法は非常に簡単です。JS ファイルをページに導入し、html2canvas() 関数を呼び出すだけです。

html2canvas(document.body, {
    onrendered: function(canvas) {
        /* canvas is the actual canvas element,
           to append it to the page call for example
           document.body.appendChild( canvas );
        */
    }
});

ログイン後にコピー

Thishtml2canvas( )関数にはパラメータがあります。上記の例では、渡されるパラメータは document.body で、ページ全体の画像をキャプチャします。特定の p または特定の table のスクリーンショットを撮るなど、1 つの領域のみをキャプチャしたい場合は、この p のスクリーンショットを撮るか、特定の table パラメータとして渡します。

実験中にいくつかの問題が見つかったので、最終的には js ツール html2canvas を選択しませんでした。

まず第一に、クロスドメインの問題です。この問題を説明するための例を示します。たとえば、私の Web ページの URL は http://www.webhek.com/about/ で、このページに画像があります。この画像は www.webhek からのものではありません。 com ドメイン。CDN 画像サーバー www.webhek-cdn.com/images/about.jpg から取得されます。この画像は、この Web ページと同じドメインにないため、html2canvas はこの種の画像のスクリーンショットを撮ることができません。 Web サイトのすべての画像は別の画像サーバーに配置されます。html2canvas を使用して Web ページ全体のスクリーンショットを撮ると、すべての画像が空白であることがわかります。

この問題には、プロキシを使用するという解決策もあります:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>html2canvas php proxy</title>
        <script src="html2canvas.js"></script>
        <script>
        //<![CDATA[
        (function() {
            window.onload = function(){
                html2canvas(document.body, {
                    "logging": true, //Enable log (use Web Console for get Errors and Warnings)
                    "proxy":"html2canvasproxy.php",
                    "onrendered": function(canvas) {
                        var img = new Image();
                        img.onload = function() {
                            img.onload = null;
                            document.body.appendChild(img);
                        };
                        img.onerror = function() {
                            img.onerror = null;
                            if(window.console.log) {
                                window.console.log("Not loaded image from canvas.toDataURL");
                            } else {
                                alert("Not loaded image from canvas.toDataURL");
                            }
                        };
                        img.src = canvas.toDataURL("image/png");
                    }
                });
            };
        })();
        //]]>
        </script>
    </head>
    <body>
        <p>
            <img alt="google maps static" src="http://maps.googleapis.com/maps/api/staticmap?center=40.714728,-73.998672&zoom=12&size=800x600&maptype=roadmap&sensor=false">
        </p>
    </body>
</html>

ログイン後にコピー

この方法は、自分のサーバーでのみ使用できます。他人の Web のスクリーンショットを撮っている場合は、ページ、それでも動作しません。

実験中、html2canvas を使用してキャプチャした画像にはテキストが重なっている場合があることもわかりました。 html2canvas がページコンテンツの解析や CSS の処理が完璧ではないためだと思います。

最後に、Firefox の公式 Web サイトで drawWindow() メソッドを見つけました。このメソッドと上記の html2canvas の違いは、ページ要素を解析しないことです。領域のみを対象としています。つまり、この領域のどこにページコンテンツがあっても、受け入れられるパラメータは 4 つの数字でマークされた領域です。

void drawWindow(
  in nsIDOMWindow window,
  in float x, 
  in float y,
  in float w,
  in float h,
  in DOMString bgColor,
  in unsigned long flags [optional]
);

ログイン後にコピー

このネイティブ JavaScript メソッドは完璧に見え、まさに私が必要としているものです。ただし、このメソッドはセキュリティホールを引き起こすことが Firefox で公式に判明したため、通常の Web ページでは使用できません。このバグは修正されました。以前は、「Chrome 権限」を持つコードのみがこの drawWindow() 関数を使用できます。

大きな制限はありますが、工夫次第で使えるようになります私が開発したFirefoxアドオンプラグインでは、main.jsが「Chrome権限」を持つコードとなっています。 Firefox プラグイン SDK に付属するコードサンプルをインターネットで見つけました。

var window = require(&#39;window/utils&#39;).getMostRecentBrowserWindow();
var tab = require(&#39;tabs/utils&#39;).getActiveTab(window);
var thumbnail = window.document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
thumbnail.mozOpaque = true;
window = tab.linkedBrowser.contentWindow;
thumbnail.width = Math.ceil(window.screen.availWidth / 5.75);
var aspectRatio = 0.5625; // 16:9
thumbnail.height = Math.round(thumbnail.width * aspectRatio);
var ctx = thumbnail.getContext("2d");
var snippetWidth = window.innerWidth * .6;
var scale = thumbnail.width / snippetWidth;
ctx.scale(scale, scale);
ctx.drawWindow(window, window.scrollX, window.scrollY, snippetWidth, snippetWidth * aspectRatio, "rgb(255,255,255)");
// thumbnail now represents a thumbnail of the tab

ログイン後にコピー

このコードは非常に明確に記述されており、ニーズに合わせてこれに基づいてわずかな変更を加えるだけで済みます。

推奨チュートリアル: 「JavaScript ビデオチュートリアル」

以上がJavascript Web ページのスクリーンショットを撮る方法を一緒に学びましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。