html5 - html2canvas生成的图片，checkbox和radio的选中项无法截图。
本文介绍了html5 - html2canvas生成的图片，checkbox和radio的选中项无法截图。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
通过html2canvas生成一张图片，发现checkbox选中项并没有截图成功。
<!DOCTYPE html>
<html>
<head>
<title>
html2canvas
</title>
</head>
<body id="myPage" onload="createImage()">
<div style="height: 100px;width: 100px;background-color: blue">
我是div
性别:
<input type="checkbox" name="sex">男
<input type="checkbox" name="sex">女
</div>
</body>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript">
function createImage(){
html2canvas(document.getElementById('myPage'),{
allowTaint:true,
height: 500
}).then(function(canvas) {
console.log(canvas);
var aTag = document.createElement("a");
aTag.innerHTML = "This is a test";
aTag.setAttribute("style", "position:absolute; top:50%; z-index:999");
aTag.setAttribute("href", canvas.toDataURL());
aTag.setAttribute("download", "myPic.png");
document.body.appendChild(aTag);
});
}
</script>
</html>页面以及生产图片：
解决方案
可以用的，因为你已进入页面就生成图片了，后面的点击就没效果了，可以这么着。
<!DOCTYPE html>
<html>
<head>
<title>
html2canvas
</title>
</head>
<body id="myPage">
<div style="height: 100px;width: 100px;background-color: blue">
我是div
性别:
<input type="checkbox" onchange="createImage()" name="sex">男
<input type="checkbox" onchange="createImage()" name="sex">女
</div>
</body>
<script type="text/javascript" src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<script type="text/javascript">
var aTag = document.createElement("a");
aTag.innerHTML = "This is a test";
aTag.setAttribute("style", "position:absolute; top:50%; z-index:999");
document.body.appendChild(aTag);
function createImage(){
html2canvas(document.getElementById('myPage'),{
allowTaint:true,
height: 500
}).then(function(canvas) {
console.log(canvas);
aTag.setAttribute("href", canvas.toDataURL());
aTag.setAttribute("download", "myPic.png");
});
}
</script>
</html>这篇关于html5 - html2canvas生成的图片，checkbox和radio的选中项无法截图。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
