JS页面截图技术

一、背景:

 

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

 

二、实现思路:

JS页面截图技术_第1张图片

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


你可能感兴趣的:(JavaScript,js,技术,截图)