javaScript網頁截屏方法，你get到了嘛？

時間 2021-02-02

標籤 javascript php css html java web canvas api 跨域瀏覽器欄目 JavaScript 简体版

原文原文鏈接

以前我曾寫過如何將canvas圖形轉換成圖片和下載canvas圖像的方法，這些都是在爲這個插件作技術準備。
javascript

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

我在網上搜尋到html2canvas這個能將指定網頁元素內容生成canvas圖像的javascript工具。這個js工具的用法很簡單，你只須要將它的js文件引入到頁面裏，而後調用html2canvas()函數：css

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當作參數傳進去。html

我最終並無選用html2canvas這個js工具，由於在個人實驗過程當中發現它有幾個問題。java

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

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

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

這個方法只能用在你本身的服務器裏，若是是對別人的網頁截圖，仍是不行。api

試驗的過程當中還發現用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('window/utils').getMostRecentBrowserWindow(); var tab = require('tabs/utils').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

這段代碼寫的很是清楚，只須要依據它作稍微的修改就能適應本身的需求。