javascript实现网页截屏操作介绍

在当前javascript还不能够实现网页截屏操作，如果将来可以实现，那么也是浏览器提供了对应的接口。

当前我们的实现方式是通过拿到像素点的信息来”拼凑”图片。

常见的截屏方式:

phantomJS它提供了一个截屏函数，通过它可以整屏获取页面截图，而且他支持的格式也比较多：JPG/PNG/GIF/PDF。通过简单的两句命令就可以把一个网页截取下来：

// render.js
var webPage = require('webpage');
var page = webPage.create();
 
page.viewportSize = { width: 1920, height: 1080 };
page.open("http://www.taobao.com", function start(status) {
  page.render('taobao_home.jpeg', {format: 'jpeg', quality: '100'});
  phantom.exit();
});

安装 phantomjs 之后执行下上面的文件：

phantomjs render.js

一张宽度很窄的淘宝首页图就保存到了同目录下的 taobao_home.jpeg 中。也有使用phantomjs做了很多有意思的东西，比如每隔 100ms 截图，然后对比图像之间的差异，分析网页的加载情况和性能问题，甚至做网页的监控。好吧，话题收回来，继续说说其他的截屏方式。

前端截屏方案：

能够导出图片的，目前只有 canvas。页面上的元素，除了图片、视音频、SVG等，其他都是文字，都可以使用 css 样式变换出来。我们知道，在 canvas 中是可以绘制图片和文字的，那么问题就很好解决了。

（1）.遍历页面的所有元素，提取DOM数。

（2）.获取渲染之后的每个 DOM 节点的内联、外链 CSS 属性

（3）.将样式转换成 canvas 的属性，利用 offset 等属性辅助摆放位置，将节点对应到 canvas 上。

这个方案比较粗糙，但是对于简单的页面，以上操作就能导出一张几乎与原状一模一样的图片。当然，我们想到的，也有人实现出来了，html2canvas 就是一个关注度很高的 js 截屏库，它考虑的内容会更多更全面。下面是简单的实现代码片段:

html2canvas(document.body).then(function (canvas) {
  canvas.id = 'screenshotCanvas';
  document.body.appendChild(canvas);
});

此时，页面的截图已经 append 到了 body 中。canvas 提供了导出图片的函数：

var can = documeng.getElementById("screenshotCanvas");
var imgDataURI = can.toDataURL('image/png');