移动端H5页⾯截图【含domtoimage、html2canvas】起因：
由于云栖⼤会项⽬需要⽀持 名⽚保存到本地功能【如下图红框】，所以，需要单独截取页⾯中的名⽚信息，并且保存到本地。
推荐给：需要获取页⾯内容，给页⾯截图的⼩伙伴
介绍两个⼯具：
html2canvas
官⽅地址：
优点：
1.使⽤⼈数多，资料更全
缺点：
1.感觉不怎么维护更新了
domtoimage
官⽅地址【github例⼦很全了】：
优点：
1.有⼈维护
2.git活跃，作者发⾔
3.使⽤⽅便
缺点：
1.新控件，使⽤⼈数少，资料不全
2.IOS⼿机不能截图，污染了DataURL会报错【⽬前还没解决】（参考链接：）
svg canvas
报错信息如下："SECURITY_ERR: DOM Exception 18: The operation is insecure"
修改dom-to-image.js源码如下：
function toPng(node, options) {
return draw(node, options || {})
.then(function(result) {
try {
/
/ 原来的
var image = DataURL("image/png", 1.0);
return image;
// 改为svg更清楚
// console.log(result.svg.src);
// return result.svg.src;
} catch (err) {
console.warn(err);
// alert(result.svg.src);
// console.log(result.svg.src);
return "error";
}
});
}
最终⽅案选择：
参考了很多资料，最后决定IOS使⽤html2canvas ，Android使⽤domtoimage 代码：
cropCard() {
let self = this;
// 获取dom结构
let card_target = pyCardArea;
//andriod
if (dataUrl != "error") {
// alert("domtoimage");
self.setState({
imgUrl: dataUrl,
isDownloadImg: true,
})
}
// ios
else {
let b64;
html2canvas(card_target, {
useCORS: true
}).then(function(canvas) {
try {
b64 = DataURL("image/png");
} catch (err) {
console.log(err)
// alert(err)
}
self.setState({
imgUrl: b64,
isDownloadImg: true,
})
}).catch(function onRejected(error) {});
}
});
}
⼿机淘宝兼容：
⼿淘禁⽌了，⽤户使⽤截图，推荐使⽤官⽅JSBridge
⽅法：WVScreen.capture
缺点：
1.只能截取整个屏幕，不能只获取名⽚信息
2.不知道是不是react的原因，直接使⽤，会有部分情况截取到灰⾊蒙版的效果，所以延迟300毫秒截图引⼊：
<script src="//g.alicdn/mtb/lib-windvane/2.1.8/windvane.js"></script>
代码：
window.setTimeout(() => {
this.taobaoCapture();
}, 300);
taobaoCapture() {
let self = this;
var params = {
// 是否将截屏结果保存⼀份到相册中
inAlbum: 'true'
};
window.WindVane.call('WVScreen', 'capture', params, function(e) {
// alert('success: ' + JSON.stringify(e));
// 截图成功提⽰话语
self.setState({
isTips: true,
line1: tipWords.saveCardS.line1,
line2: tipWords.saveCardS.line2,
});
}, function(e) {
// alert('failure: ' + JSON.stringify(e));
// 截图失败提⽰话语
self.setState({
isTips: true,
line1: tipWords.saveCardF.line1,
line2: tipWords.saveCardF.line2,
});
});
}
写在最后：
domtoimage 和 html2canvas截图PNG格式，都会损失部分图⽚精度，使图⽚变模糊。如果不是在移动端的话，建议使⽤SVG格式，更为清晰。
两个插件个⼈更喜欢 domtoimage ~
DEMO:

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。