Web开发之html2canvas 实现纯JS网页截图简单例子
2017-10-12 17:22
831 查看
代码库地址: https://github.com/niklasvh/html2canvas
自己修改其中的 test.js (主要是其中的一些库的路径) 把test.js external文件夹 src文件夹 放在同一目录下
在主页中包含 test.js 然后调用 screenshot 函数就可以在控制台看到图片了,该数据可以上传至服务器。
===========================================================================
使用JavaScript截图,这里我要推荐两款开源组件:一个是Canvas2Image,它可以将Canvas绘图编程PNG/JPEG/BMP的图像;但是光有它还不够,我们需要给任意DOM(至少是绝大部分)截图,这就需要html2canvas,它可以将DOM对象转换成一个canvas对象。两者的功能结合起来,就可以把页面上的DOM截图成PNG或者JPEG图像了,很酷。
Canvas2Image
它的原理是利用了HTML5的canvas对象提供了toDataURL()的API:
这样的结果是base64编码的(事实上,image也可以通过这种方式以字符串的形式写死到页面上),所以我们还需要一个base64编解码的lib。
但是目前的缺陷也有不少,比如目前Opera和Safari只支持PNG,FireFox的支持性则好得多。
生成图片有两种方式写入页面,一种是生成一个图片对象写入页面DOM树中,这也是支持性比较好的方式:
但是如果你做一个JavaScript截图功能的话,你可能希望截图后能够自动打开保存文件的“保存”对话框:
这个方式调用会生成一个
html2canvas
它作用于DOM加载的过程,收集其中的信息,再来绘制canvas图像,也就是说,其实它并不是将展现的DOM树截成canvas图,而是仿照DOM树重新绘制了一张canvas图。于是很多CSS样式都无法被准确识别出来,无法准确反映到图上。
其它的限制还有不少,比如:
javascript必须是同域的,对于跨域的情况需要使用代理服务器(API中有参数可以指定),对于image也同样;
frame内的DOM树无法被准确绘制;
因为要绘制的是canvas图,所以像IE8这样的浏览器需要使用FlashCanvas这样的第三方库。
这个页面可以测试各个网站使用它来截图的效果,效果相当不错:
对于这一类相对小众的类库,文档都是很差的,包括API的定义,需要阅读源码,代码上写得挺清楚的。
另外,该站点下载包里面还有一个JQuery的插件,对这个API做了一个封装,可以无视。
自己修改其中的 test.js (主要是其中的一些库的路径) 把test.js external文件夹 src文件夹 放在同一目录下
var h2cSelector, h2cOptions; (function(document, window) { var scrStart = '<script type="text/javascript" src="', scrEnd = '"></script>'; document.write(scrStart + 'external/jquery-1.6.2.js' + scrEnd); var html2canvas = ['Core', 'Generate', 'Parse', 'Preload', 'Queue', 'Renderer', 'Util', 'renderers/Canvas', 'plugins/jquery.plugin.html2canvas'], i; for (i = 0; i < html2canvas.length; ++i) { document.write(scrStart + 'src/' + html2canvas[i] + '.js' + scrEnd); } window.onload = function() { h2cSelector = [document.body]; if (window.setUp) { window.setUp(); } }; }(document, window)); function screenShot() { setTimeout(function() { $(h2cSelector).html2canvas($.extend({ flashcanvas: "external/flashcanvas.min.js", logging: true, profile: true, useCORS: true, onrendered:function(canvas ) { var screenshot; screenshot = canvas.toDataURL( "image/png" ); console.info(screenshot); } }, h2cOptions)); }, 100); }
在主页中包含 test.js 然后调用 screenshot 函数就可以在控制台看到图片了,该数据可以上传至服务器。
===========================================================================
使用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这样的第三方库。
这个页面可以测试各个网站使用它来截图的效果,效果相当不错:
用JavaScript截图
API使用的例子:html2canvas( [dom1, dom2], { logging: false, useCORS: false, proxy: false, onrendered: function(canvas){ // canvas 就是绘制的canvas是对象 } } );
对于这一类相对小众的类库,文档都是很差的,包括API的定义,需要阅读源码,代码上写得挺清楚的。
另外,该站点下载包里面还有一个JQuery的插件,对这个API做了一个封装,可以无视。
相关文章推荐
- html2canvas 实现纯JS网页截图简单例子
- html2canvas 实现纯JS网页截图简单例子
- html2canvas根据DOM元素样式实现网页截图
- html2canvas根据DOM元素样式实现网页截图
- js通过html2canvas,jspdf,canvg来对网页进行截图生成pdf
- web 开发之js---js 实现网页中播放wav的一种方法(flash播放器)
- html2canvas根据DOM元素样式实现网页截图
- Web开发之用canvas2image.js将canvas保存为图片(实现页面截图下载功能)
- JS 使用html2canvas实现截图功能的问题记录和解决方案
- JAVA Web开发实现网页的简单打印
- 自己开发简单web服务器二(Node.js实现)
- Web开发之html2canvas截图如何解决跨域的问题?
- 把Html插入canvas实现网页截图
- JS 使用html2canvas实现页面截图功能
- web开发-邮件编写HTML网页正常显示实现方法-学习笔记八
- HTML5+JS手机web开发之jQuery Mobile
- 简单快速开发C\S架构程序用最简单的不分层最快的效率达到功能要求的例子程序FrmCommnetList 所有评论列表的功能实现
- 指尖下的js ——多触式web前端开发之二:处理简单手势
- 简单用js实现网页时间的实时显示
- 简单快速开发C\S架构程序用最简单的不分层最快的效率达到功能要求的例子程序FrmCommnets 显示某个对象的评论列表的功能实现