一、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还是一个非常方便的截图工具，值得前端开发者进一步学习和探讨。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/190896.html
微信扫一扫 
支付宝扫一扫 