首頁 > 文章 > web前端 > 一起學習Javascript網頁截圖的方法

一起學習Javascript網頁截圖的方法

coldplay.xixi轉載: 2020-06-19 16:59:552113瀏覽

之前我曾寫過如何將canvas圖形轉換成圖片和下載canvas圖像的方法，這些都是在為這個外掛程式做技術準備。

技術路線很清晰，將網頁的某個區域的內容生成圖像，保持到canvas裡，然後將canvas內容轉換成圖片，保存到本地，最後上傳到微博。

我在網路上搜尋到html2canvas這個能將指定網頁元素內容產生canvas圖片的javascript工具。這個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 );
        */
    }
});

這個html2canvas()函數有個參數，上面的範例裡傳入的參數是document.body，這會截取整個頁面的圖像。如果你想只截取一個區域，例如對某個p或某個table截圖，你就將這個p或某個table當做參數傳進去。

我最後並沒有選用html2canvas這個js工具，因為在我的實驗過程中發現它有幾個問題。

首先，跨域問題。我舉個例子說明這個問題，例如我的網頁網址是http://www.webhek.com/about/，而我在這個頁面上有個張圖片，這個圖片並不是來自www.webhek.com網域，而是來自CDN圖片伺服器www.webhek-cdn.com/images/about.jpg，那麼，這張圖片就和這個網頁不是同域，那麼html2canvas就無法對這種圖片進行截圖，如果你的網站的所有圖片都放在單獨的圖片伺服器上，那麼用html2canvas對整個網頁進行截圖是就會發現所有圖片的地方都是空白。

這個問題也有補救的方法，就是用代理：

<!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>

這個方法只能用在你自己的伺服器裡，如果是對別人的網頁截圖，還是不行。

試驗的過程中也發現用html2canvas截圖出來的圖像有時會出現文字重疊的現象。我估計是因為html2canvas在解析頁面內容、處理css時不是很完美的原因。

最後，我在火狐瀏覽器的官方網站上找到了drawWindow()這個方法，這個方法和上面提到html2canvas不同之處在於，它不分析頁面元素，它只針對區域，也就是說，它接受的參數是四個數字標誌的區域，不論這個區域中什麼地方，有沒有頁面內容。

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方法看起來非常的完美，正是我需要的，但這個方法不能使用在普通網頁中，因為火狐官方發現這個方法會引起有安全漏洞，在這個bug修復之前，只有具有「Chrome privileges」的程式碼才能使用這個drawWindow()函數。

雖然有很大的限制，但周折一下還是可以用的，在我開發的火狐addon插件中，main.js就是具有「Chrome privileges」的程式碼。我在網路上發現了一段火狐插件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網頁截圖的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文轉載於：webhek.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：用JavaScript偵測出目前瀏覽器是否為無頭瀏覽器下一篇：用JavaScript偵測出目前瀏覽器是否為無頭瀏覽器

看更多