html2canvas 实现纯JS网页截图简单例子

最新推荐文章于 2024-09-13 07:14:44 发布

SQZHAO

最新推荐文章于 2024-09-13 07:14:44 发布

阅读量1.7w

点赞数 2

代码库地址： https://github.com/niklasvh/html2canvas

自己修改其中的 test.js （主要是其中的一些库的路径）把test.js external文件夹 src文件夹放在同一目录下

 1 var h2cSelector, h2cOptions;
 2 (function(document, window) {
 3     var scrStart = '<script type="text/javascript" src="', scrEnd = '"></script>';
 4     document.write(scrStart + 'external/jquery-1.6.2.js' + scrEnd);
 5     var html2canvas = ['Core', 'Generate', 'Parse', 'Preload', 'Queue', 'Renderer', 'Util', 'renderers/Canvas',  'plugins/jquery.plugin.html2canvas'], i;
 6     for (i = 0; i < html2canvas.length; ++i) {
 7         document.write(scrStart + 'src/' + html2canvas[i] + '.js' + scrEnd);
 8     }
 9     window.onload = function() {
10         h2cSelector = [document.body];
11 
12         if (window.setUp) {
13             window.setUp();
14         }
15 
16         
17     };
18 }(document, window));
19 
20 function screenShot()
21 {
22     setTimeout(function() {
23             $(h2cSelector).html2canvas($.extend({
24                 flashcanvas: "external/flashcanvas.min.js",
25                 logging: true,
26                 profile: true,
27                 useCORS: true,
28                 onrendered:function(canvas )
29                 {
30                     var screenshot;
31                     screenshot = canvas.toDataURL( "image/png" );
32                     console.info(screenshot);
33                 }
34             }, h2cOptions));
35         }, 100);
36 }

在主页中包含 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这样的第三方库。

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

API使用的例子：

 
        html2canvas( 
       
        [dom1, dom2], 
       
        { 
       
        logging:  
        false 
        , 
       
        useCORS:  
        false 
        , 
       
        proxy:    
        false 
        , 
       
        onrendered:  
        function 
        (canvas){ 
       
        // canvas 就是绘制的canvas是对象 
       
        } 
       
        } 
       
        );