Générez une image via html2canvas et constatez que l'élément sélectionné par la case à cocher ne prend pas de capture d'écran avec succès.
<!DOCTYPE html>
<html>
<head>
<title>
html2canvas
</title>
</head>
<body id="myPage" onload="createImage()">
<p style="height: 100px;width: 100px;background-color: blue">
我是p
性别:
<input type="checkbox" name="sex">男
<input type="checkbox" name="sex">女
</p>
</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>Photos de page et de production :
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Il peut être utilisé, car l'image est générée dès que vous entrez dans la page, et les clics suivants n'auront aucun effet, vous pouvez donc procéder de cette façon.