JS页面截图技术

来源：互联网发布：asp编程培训编辑：程序博客网时间：2024/05/19 22:58

一、背景：

使用JS页面截图技术实现将网页内容截图并分享到媒体（微博、空间、贴吧等）。

二、实现思路：

1. 将html页面转换成canvas

2. 将canvas转换成base64图片

3. 将base64图片上传到云端

4. 通过百度分享技术将图片分享到媒体

三、具体实现：

1. 将html页面转换成canvas

使用html2canvas实现html到canvas的转换：

html2canvas(document.getElementById(id), {        onrendered:function(canvas) {            //canvas为html转换成的canvas        },        proxy:  url,        useCors: true,        letterRendering: true});

在使用html2canvas插件的过程有以下几点需要注意：

1.当Dom页面元素太多时，调用html2canvas会失败

2. html2canvas是异步调用，想将该方法改成同步，必须修改源代码

2. 将canvas转换成base64图片

使用Canvas2Image实现canvas到base64 png图片的转换：

html2canvas(document.getElementById(id) {    onrendered: function(canvas) {        var oImg   = Canvas2Image.saveAsPNG(oCanvas,true);    }});

相当于： toDataURL("image/png");

3. 将base64位图片上传到云端

使用接口将base64图片上传到云端

4. 通过百度分享技术将图片分享到媒体（微博、空间、贴吧等）

function share(){        var bd_share_config = {                common : {                     bdPic:url,                            },                image : [{                    viewList :['tsina','tqq','qzone','renren','more']                }]            };        window._bd_share_main.init(bd_share_config);}

其中bdPic定义了分享图片的地址，viewList则是百度分享列表的选项

0 0