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則是百度分享列表的選項