JavaScript实现网页截图功能
使用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做了一个封装，可以无视。
相关文章
这篇文章主要介绍了Javascript中的arguments与重载介绍,本文讲解了Javscript 重载、Javascript arguments不是一个数组等内容,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了JS实现自动变换的菜单效果代码,可实现自动变换菜单选中项的技巧,涉及JavaScript定时函数触发页面样式属性变换的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
双向数据绑定是一种编程模式,用于在用户界面和数据模型之间实现数据的同步更新,它允许用户界面中的数据变化自动更新到数据模型中,在这篇文章中,我会使用基于观察者模式和基于Proxy对象来实现JS的自定义双向数据绑定2023-08-08
Bootstrap每天必学之折叠（Collapse）插件，折叠插件可以很容易地让页面区域折叠起来，感兴趣的小伙伴们可以参考一下2016-04-04
这篇文章主要为大家详细介绍了小程序实现列表展开收起效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-07-07
本篇文章主要介绍了Javascript实现页面滚动时导航智能定位，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要介绍了js显示文本框提示文字的方法,涉及javascript鼠标事件及样式操作的相关技巧,非常简单实用,需要的朋友可以参考下2015-05-05
微信小程序下拉刷新组件加载图片(三个小点)不显示刷新状态的问题
很多朋友跟小编反馈这样一个问题，微信小程序中列表页面下拉刷新 ，顶部不显示三个小点的刷新状态，今天通过本文给大家介绍下小程序下拉刷新不了的解决方法，感兴趣的朋友跟随小编一起看看吧2022-10-10
这篇文章主要介绍了javascript按钮禁用和启用的效果实例代码,需要的朋友可以参考下2017-10-10
这篇文章主要介绍了JS实现简单的tab切换选项卡效果,涉及javascript结合鼠标事件对页面元素属性动态操作的相关技巧,需要的朋友可以参考下2016-09-09
最新评论