一、背景:
使用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則是百度分享列表的選項