使用html2canvas進行網頁截圖：解決無法全屏截圖的問題

一、html2canvas簡介

html2canvas是一個能夠將HTML頁面截圖的JavaScript庫。其依據HTML5 Canvas元素技術，利用JavaScript在前台通過訪問網頁的DOM結構，將指定的HTML節點繪製成canvas圖像，再使用toDataURL()方法將canvas圖像轉化為Base64格式的圖片數據，最後通過HTML “標籤或ajax上傳到後台完成保存。

在網頁加入這個JS庫後，只需要傳入要截取的DOM節點，即可生成指定節點的截圖。

二、無法全屏截圖的問題

雖然html2canvas很方便，但是也有一些問題存在。其中最常見的問題是無法截取全屏。

原因是html2canvas默認只會截取網頁可視範圍內的內容，而且由於某些限制，html2canvas無法訪問瀏覽器的Chrome、Firefox等安全性設置很高的控制項。這就導致了一些模塊、部分區域截圖的難題。

三、解決方法一：添加插件

一種可行的方法是利用html2canvas許多前端開發者編寫的插件。

這些插件對於不同的需求可以根據具體情況選擇，比如我們要做截圖縮放，可以使用插件html2canvas-webkit-scaling。這個插件允許在WebKit瀏覽器中改變截圖縮放比例，幫助解決部分無法截屏的問題。

以html2canvas-webkit-scaling為例，需要額外添加如下代碼：

// 載入插件
 
// 執行插件
html2canvas(document.body, { // 選擇全屏截取
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  },
  scale: 2, // 縮放比例為2
  canvas: {
    width: 640,
    height: 720
  }
});

四、解決方法二：限制截圖範圍

另外一種方法是限制截圖範圍，即手動指定要截圖的區域，然後通過改變截圖區域的大小以達到全屏截屏的目的。

以jquery fullpage網頁為例，可以通過以下代碼實現全屏截圖：

// 設置fullpage屬性
$.fn.fullpage({
    // 設置sections屬性
    sectionsColor: ['#ccc', '#ddd', '#fff', '#000'],
    // 監聽渲染完成事件
    afterRender: function () {
        // 初始化屏幕高度
        var viewHeight = $(window).height();
        $('.section, .slide, #homepage').height(viewHeight);
        // 添加點擊事件
        $('.control span').on('click', function () {
            html2canvas($('.section').get(0), {
                onrendered: function (canvas) {
                    // 將截圖顯示在網頁中
                    document.body.appendChild(canvas);
                },
                width: $('.section').width(),  // 指定區域寬度為全屏
                height: viewHeight / 2 * 3  // 指定區域高度為3/2全屏
            });
        });
    }
});

五、解決方法三：調整樣式

還有一種解決方法是在html文件的head標籤中添加如下meta標籤：

然後在執行截屏之前，動態增加HTML頁面的樣式屬性，代碼如下：

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '* { -webkit-text-size-adjust: none; }';
document.getElementsByTagName('head')[0].appendChild(style);

這個方法的原理是設置viewport，並且防止webview縮放的影響。

六、總結

使用html2canvas進行網頁截圖是前端開發者經常會遇到的問題。在本文中，我們介紹了三種解決無法全屏截圖的方法。

首先，可以通過在html文件中引入插件的方式解決。其次，可以通過限制截圖範圍來達到全屏截圖的目的。最後，我們還介紹了一種在head標籤中添加meta標籤的方法，以及設置樣式屬性的方式。

根據具體的需求，大家可以選擇最適合自己的方法。綜上，html2canvas還是一個非常方便的截圖工具，值得前端開發者進一步學習和探討。