JS页面截图技术

一、背景：

使用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则是百度分享列表的选项