社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
//IOS兼容
function toPng(node, options) {
return draw(node, options || {})
.then(function(result) {
try {
// 原来的
var image = result.canvas.toDataURL("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";
}
});
}
// 裁剪名片
cropCard() {
let self = this;
// 获取dom结构
let card_target = this.refs.copyCardArea;
domtoimage.toPng(card_target).then(function(dataUrl) {
//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 = canvas.toDataURL("image/png");
} catch (err) {
console.log(err)
// alert(err)
}
self.setState({
imgUrl: b64,
isDownloadImg: true,
})
}).catch(function onRejected(error) {});
}
});
}
手淘禁止了,用户使用截图,推荐使用官方JSBridge
WindVane链接:http://h5.alibaba-inc.com/api/WindVane-API.html
方法:WVScreen.capture
<script src="//g.alicdn.com/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 ~
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!