移动端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.   
10.                 // 改为svg更清楚  
11.                 // console.log(result.svg.src);  
12.                 // return result.svg.src;  
13.             } catch (err) {  
14.                 console.warn(err);  
15.                 // alert(result.svg.src);  
16.                 // console.log(result.svg.src);  
17.                 return "error";  
18.             }  
19.         });  
20. }  

 

 

最终方案选择：

参考了很多资料，最后决定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.youkuaiyun.com/candy_home/article/details/78424642