1. 截图.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>html2canvas</title>
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
</head>
<script type="text/javascript">
function takeScreenshot() {
html2canvas(document.getElementById('body'), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
// 这个url是base64码 只有用服务启动后toDataURL()才可以正常使用
var url = canvas.toDataURL();
/**
* 注意: 下载效果放开1 分享放开2
*/
// 1.PC下载图片 手机UC不好用(直接下载base64码，暂时没找到解决方案)
/*var triggerDownload = $("<a>").attr("href", url).attr("download", "邀请函.png");
triggerDownload[0].click();
triggerDownload.remove(); */
// 2.这个是微信分享
/*Wechat.share({
message: {
title: "Hi, there",
description: "This is description.",
thumb:url,
mediaTagName: "TEST-TAG-001",
messageExt: "这是第三方带的测试字段",
media: {
type:Wechat.Type.IMAGE,
image:url
}
},
scene: Wechat.Scene.SESSION // share to Timeline//Wechat.Scene.TIMELINE 表示分享到朋友圈 //Wechat.Scene.SESSION 表示分享给好友
}, function () {
alert("Success");
}, function (reason) {
alert("Failed: " + reason);
});*/
},
width: 1000,
height: 700
});
}
</script>
<body id="body">
<a href="12345679">123456</a>
<div id="view" style="background:url(test.jpg) 50%; width: 1000px;height: 700px;">
<input type="button" value="截图" onclick="takeScreenshot()">
</div>
</body>
</html>
2. 图片命名为test.jpg
3. 分享需要 cordova.js、cordova_plugins.js
