这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JavaScript 实现网页截图功能, 本文介绍了 2 款实现 JavaScript 截图的开源组件, 一个是 Canvas2Image, 一个是 html2canvas, 需要的朋友可以参考下
使用 JavaScript 截图,这里我要推荐两款开源组件:一个是 Canvas2Image,它可以将 Canvas 绘图编程 PNG/JPEG/BMP 的图像;但是光有它还不够,我们需要给任意 DOM(至少是绝大部分)截图,这就需要 html2canvas,它可以将 DOM 对象转换成一个 canvas 对象。两者的功能结合起来,就可以把页面上的 DOM 截图成 PNG 或者 JPEG 图像了,很酷。
Canvas2Image
它的原理是利用了 HTML5 的 canvas 对象提供了 toDataURL() 的 API:
- var strDataURI = oCanvas.toDataURL();
- // returns "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..."
这样的结果是 base64 编码的(事实上,image 也可以通过这种方式以字符串的形式写死到页面上),所以我们还需要一个 base64 编解码的 lib。
但是目前的缺陷也有不少,比如目前 Opera 和 Safari 只支持 PNG,FireFox 的支持性则好得多。
生成图片有两种方式写入页面,一种是生成一个图片对象写入页面 DOM 树中,这也是支持性比较好的方式:
- // returns an <img> element containing the converted PNG image
- var oImgPNG = Canvas2Image.saveAsPNG(oCanvas, true);
但是如果你做一个 JavaScript 截图功能的话,你可能希望截图后能够自动打开保存文件的 "保存" 对话框:
- 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 使用的例子:
- html2canvas(
- [dom1, dom2],
- {
- logging: false,
- useCORS: false,
- proxy: false,
- onrendered: function(canvas){
- // canvas 就是绘制的canvas是对象
- }
- }
- );
对于这一类相对小众的类库,文档都是很差的,包括 API 的定义,需要阅读源码,代码上写得挺清楚的。
另外,该站点下载包里面还有一个 JQuery 的插件,对这个 API 做了一个封装,可以无视。
来源: http://www.phperz.com/article/17/0417/274567.html