使用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为例，需要额外添加如下代码：

// 载入插件
<script src="html2canvas-webkit-scaling.js"></script> 
// 执行插件
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缩放的影响。