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');
网站出售中,有意者加微信:javadudu

回复

我来回复
  • 暂无回复内容