suchen

Heim  >  Fragen und Antworten  >  Hauptteil

html5 – Bilder, die durch html2canvas, Kontrollkästchen und ausgewählte Elemente generiert wurden, können nicht als Screenshots erstellt werden.

Generieren Sie ein Bild über html2canvas und stellen Sie fest, dass das im Kontrollkästchen ausgewählte Element keinen Screenshot erstellt. 

<!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>

Seiten- und Produktionsbilder:

我想大声告诉你我想大声告诉你2747 Tage vor1144

Antworte allen(1)Ich werde antworten

  • 过去多啦不再A梦

    过去多啦不再A梦2017-05-16 13:34:24

    可以用的，因为你已进入页面就生成图片了，后面的点击就没效果了，可以这么着。

    <!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>

    Antwort
    0
  • StornierenAntwort