移動端H5頁面截圖【含 domtoimage、html2canvas 】

起因：

由于雲栖大會項目需要支援 名片儲存到本地功能【如下圖紅框】，是以，需要單獨截取頁面中的名片資訊，并且儲存到本地。

推薦給：需要擷取頁面内容，給頁面截圖的小夥伴

介紹兩個工具：

html2canvas

官方位址：https://github.com/niklasvh/html2canvas

優點：

1.使用人數多，資料更全

缺點：

1.感覺不怎麼維護更新了

domtoimage

官方位址【github例子很全了】：https://github.com/tsayen/dom-to-image

優點：

1.有人維護

2.git活躍，作者發言

3.使用友善

缺點：

1.新控件，使用人數少,資料不全

2.IOS手機不能截圖，污染了canvas.toDataURL會報錯【目前還沒解決】（參考連結：https://github.com/tsayen/dom-to-image/issues/40）

   報錯資訊如下："SECURITY_ERR: DOM Exception 18: The operation is insecure"

   修改dom-to-image.js源碼如下：

[javascript] view plain copy

1. //IOS相容   
2. function toPng(node, options) {  
3.     return draw(node, options || {})  
4.         .then(function(result) {  
5.             try {  
6.                 // 原來的  
7.                 var image = result.canvas.toDataURL("image/png", 1.0);  
8.                 return image;  
9.                 // 改為svg更清楚  
10.                 // console.log(result.svg.src);  
11.                 // return result.svg.src;  
12.             } catch (err) {  
13.                 console.warn(err);  
14.                 // alert(result.svg.src);  
15.                 // console.log(result.svg.src);  
16.                 return "error";  
17.             }  
18.         });  
19. }  

最終方案選擇：

參考了很多資料，最後決定IOS使用html2canvas ，Android使用domtoimage

代碼：

[javascript] view plain copy

1. // 裁剪名片  
2. cropCard() {      
3.   let self = this;  
4.   // 擷取dom結構  
5.   let card_target = this.refs.copyCardArea;   
6.   domtoimage.toPng(card_target).then(function(dataUrl) {  
7.     //andriod   
8.     if (dataUrl != "error") {  
9.       // alert("domtoimage");  
10.       self.setState({  
11.         imgUrl: dataUrl,  
12.         isDownloadImg: true,  
13.       })  
14.     }  
15.     // ios  
16.     else {  
17.       let b64;  
18.       html2canvas(card_target, {  
19.         useCORS: true  
20.       }).then(function(canvas) {  
21.         try {  
22.           b64 = canvas.toDataURL("image/png");  
23.         } catch (err) {  
24.           console.log(err)  
25.             // alert(err)  
26.         }  
27.         self.setState({  
28.           imgUrl: b64,  
29.           isDownloadImg: true,  
30.         })  
31.       }).catch(function onRejected(error) {});  
32.     }  
33.   });  
34. }  

手機淘寶相容：

手淘禁止了，使用者使用截圖，推薦使用官方JSBridge

WindVane連結：http://h5.alibaba-inc.com/api/WindVane-API.html

方法：WVScreen.capture

缺點：

1.隻能截取整個螢幕，不能隻擷取名片資訊

2.不知道是不是react的原因，直接使用，會有部分情況截取到灰色蒙版的效果，是以延遲300毫秒截圖

引入：

[javascript] view plain copy

1. <script src="//g.alicdn.com/mtb/lib-windvane/2.1.8/windvane.js"></script>  

代碼：

[javascript] view plain copy

1. window.setTimeout(() => {  
2.   this.taobaoCapture();  
3. }, 300);  

[javascript] view plain copy

1. taobaoCapture() {  
2.   let self = this;  
3.   var params = {  
4.     // 是否将截屏結果儲存一份到相冊中  
5.     inAlbum: 'true'  
6.   };  
7.   window.WindVane.call('WVScreen', 'capture', params, function(e) {  
8.     // alert('success: ' + JSON.stringify(e));  
9.     // 截圖成功提示話語  
10.     self.setState({  
11.       isTips: true,  
12.       line1: tipWords.saveCardS.line1,  
13.       line2: tipWords.saveCardS.line2,  
14.     });  
15.   }, function(e) {  
16.     // alert('failure: ' + JSON.stringify(e));  
17.     // 截圖失敗提示話語  
18.     self.setState({  
19.       isTips: true,  
20.       line1: tipWords.saveCardF.line1,  
21.       line2: tipWords.saveCardF.line2,  
22.     });  
23.   });  
24. }  

寫在最後：

domtoimage 和 html2canvas截圖PNG格式，都會損失部分圖檔精度，使圖檔變模糊。

如果不是在移動端的話，建議使用SVG格式，更為清晰。

兩個插件個人更喜歡 domtoimage ~

DEMO:

https://codepen.io/CandyQiu/pen/XzmGNL?editors=0010

轉載：http://blog.csdn.net/candy_home/article/details/78424642