用JavaScript截图

 

使用JavaScript截图,这里我要推荐两款开源组件:一个是Canvas2Image,它可以将Canvas绘图编程PNG/JPEG/BMP的图像;但是光有它还不够,我们需要给任意DOM(至少是绝大部分)截图,这就需要html2canvas,它可以将DOM对象转换成一个canvas对象。两者的功能结合起来,就可以把页面上的DOM截图成PNG或者JPEG图像了,很酷。

Canvas2Image

它的原理是利用了HTML5的canvas对象提供了toDataURL()的API:

1
2
var strDataURI = oCanvas.toDataURL(); 
// returns "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..."

这样的结果是base64编码的(事实上,image也可以通过这种方式以字符串的形式写死到页面上),所以我们还需要一个base64编解码的lib。

但是目前的缺陷也有不少,比如目前Opera和Safari只支持PNG,FireFox的支持性则好得多。

生成图片有两种方式写入页面,一种是生成一个图片对象写入页面DOM树中,这也是支持性比较好的方式:

1
2
// returns an <img> element containing the converted PNG image 
var oImgPNG = Canvas2Image.saveAsPNG(oCanvas, true);

但是如果你做一个JavaScript截图功能的话,你可能希望截图后能够自动打开保存文件的“保存”对话框:

1
2
Canvas2Image.saveAsPNG(oCanvas);
// will prompt the user to save the image as PNG.

这个方式调用会生成一个mimeType为“image/octet-stream”的数据流到浏览器,但是“保存”对话框无法识别出图片适当的后缀名,默认保存的文件在FireFox下是“xxx.part”这种名字,这是令人遗憾的地方,但是似乎没有什么好办法解决。

html2canvas

它作用于DOM加载的过程,收集其中的信息,再来绘制canvas图像,也就是说,其实它并不是将展现的DOM树截成canvas图,而是仿照DOM树重新绘制了一张canvas图。于是很多CSS样式都无法被准确识别出来,无法准确反映到图上。

其它的限制还有不少,比如:

  • javascript必须是同域的,对于跨域的情况需要使用代理服务器(API中有参数可以指定),对于image也同样;
  • frame内的DOM树无法被准确绘制;
  • 因为要绘制的是canvas图,所以像IE8这样的浏览器需要使用FlashCanvas这样的第三方库。

这个页面可以测试各个网站使用它来截图的效果,效果相当不错:

API使用的例子:

1
2
3
4
5
6
7
8
9
10
11
html2canvas(
    [dom1, dom2],
    {
        logging: false,
        useCORS: false,
        proxy:   false,
        onrendered: function(canvas){
            // canvas 就是绘制的canvas是对象
        }
    }
);

对于这一类相对小众的类库,文档都是很差的,包括API的定义,需要阅读源码,代码上写得挺清楚的。

另外,该站点下载包里面还有一个JQuery的插件,对这个API做了一个封装,可以无视。

文章未经特殊标明皆为本人原创,未经许可不得用于任何商业用途,转载请保持完整性并注明来源链接《四火的唠叨》

用JavaScript截图的更多相关文章

  1. js 利用canvas + flv.js实现视频流 截屏 、本地下载功能实现,兼容火狐,谷歌;canvas截屏跨域问题,无音频视频流加载不显示问题

    项目:物联网监控项目----后台视频流管理(前端实现视频截屏功能) 本文就不同视频源分情况展示: 1 本地视频(项目同目录视频)截屏(canvas.getContext("2d).drawI ...

  2. JavaScript+html5 canvas实现本地截图教程

    这篇文章主要介绍了JavaScript+html5 canvas实现本地截图教程,对截图功能感兴趣的小伙伴们可以参考一下 最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canva ...

  3. 利用JavaScript将页面截图生成图片传给后台的插件:html2canvas

    利用JavaScript将页面截图生成图片传给后台的插件:html2canvas 一.总结 一句话总结: 10 <script type="text/javascript"& ...

  4. 【Selenium04篇】python+selenium实现Web自动化:文件上传,Cookie操作,调用 JavaScript,窗口截图

    一.前言 最近问我自动化的人确实有点多,个人突发奇想:想从0开始讲解python+selenium实现Web自动化测试,请关注博客持续更新! 这是python+selenium实现Web自动化第四篇博 ...

  5. 初探JavaScript的截图实现

    最近参与了网易炉石盒子的相关页面开发,在做卡组分享页(地址:炉石盒子卡组分享),有个需求:用户可以把这个卡组以图片的形式分享给好友.最初的的做法是使用服务器把该页面转换成图片,然后把图片地址返回给前端 ...

  6. 利用javascript实现页面截图

    html2canvas可以通过纯JS对浏览器端经行截屏,但截图的精确度还有待提高,部分css不可识别,所以在canvas中不能完美呈现原画面样式 兼容性: Firefox 3.5+ Google Ch ...

  7. JavaScript性能优化

    如今主流浏览器都在比拼JavaScript引擎的执行速度,但最终都会达到一个理论极限,即无限接近编译后程序执行速度. 这种情况下决定程序速度的另一个重要因素就是代码本身. 在这里我们会分门别类的介绍J ...

  8. Android混合开发之WebView与Javascript交互

    前言: 最近公司的App为了加快开发效率选择了一部分功能采用H5开发,从目前市面的大部分App来讲,大致分成Native App.Web App.Hybrid App三种方式,个人觉得目前以Hybri ...

  9. JavaScript特性(attribute)、属性(property)和样式(style)

    最近在研读一本巨著<JavaScript忍者秘籍>,里面有一篇文章提到了这3个概念. 书中的源码可以在此下载.我将源码放到了线上,如果不想下载,可以直接访问在线网址,修改页面名就能访问到相 ...

随机推荐

  1. Android 五种方式实现Android底部导航栏

    https://segmentfault.com/a/1190000007697941

  2. 连接服务器的mysql

    在服务器配置好Mysql 数据库,在客户端连接,报错: 解决方法: 1.在MySQL 数据库中修改user表,将host 中的localhoust 改为 %: 2.配置访问数据库的全选 根据需要配置权 ...

  3. SqlBulkCopy实现大批量数据导入

    //自增列重新生成:SqlBulkCopy bc = new SqlBulkCopy(conn) //自增列保留原值:SqlBulkCopy bc = new SqlBulkCopy(conn,Sql ...

  4. HTML 5 <aside> 标签

    定义和用法 <aside> 标签定义 article 以外的内容.aside 的内容应该与 article 的内容相关. 实例 <p>Me and my family visi ...

  5. Java_大数值_16.5.12

    如果基本的整数和浮点数精度不能满足要求,那么可以使用java.math包中的BigInteger和BigDecimal这两个类.这两个类可以处理包含任意长度数字序列的数值.BigInteger类实现了 ...

  6. GEO/SRA数据库

    GEO数据库 GEO数据库隶属于NCBI,是最大最全面的基因表达数据库,主要是芯片和转录组测序数据.除储存数据外,也提供一些数据挖掘工具,因此利用好这个数据库,没有实验,没有自己的数据也能发好文章! ...

  7. Nuxt.js使用详解

    首先来讲一下服务端渲染 直白的说就是在服务端拿数据进行解析渲染,直接生成html片段返回给前端.具体用法也有很多种比如: 传统的服务端模板引擎渲染整个页面 服务渲染生成htmll代码块, 前端 AJA ...

  8. Python isalpha() 方法检测字符串是否只由字母组成。

    Python isalpha() 方法检测字符串是否只由字母组成.

  9. 第四次作业——项目Alpha测试

    这个作业属于哪个课程 <课程链接> 这个作业要求在哪里 <作业要求> 团队名称 飞猪们 这个作业的目标 发布项目α版本,对项目进行用例测试,以及项目情况总结 一.团队成员学号列 ...

  10. 还没更换RubyGems镜像?

    相信用过Ruby的人都知道 gem install 命令,但是在国内该命令安装的速度甚是不稳定(你懂的),导致尝试数次便是等待数时,记得之前在安装redmine的时候便是如此,之前不懂什么意思,还以为 ...