html5 - Les images générées par html2canvas, les éléments sélectionnés par case à cocher et radio ne peuvent pas être capturés.

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 :

我想大声告诉你2747 Il y a quelques jours1149

<!DOCTYPE html> <html> <head> <title> html2canvas </title> </head> <body id="myPage"> <p style="height: 100px;width: 100px;background-color: blue"> 我是p 性别: <input type="checkbox" onchange="createImage()" name="sex">男 <input type="checkbox" onchange="createImage()" name="sex">女 </p> </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 - Les images générées par html2canvas, les éléments sélectionnés par case à cocher et radio ne peuvent pas être capturés.

répondre à tous(1)je répondrai