搜尋

首頁  >  問答  >  主體

html5 - html2canvas產生的圖片,checkbox和radio的選取項目無法截圖。

透過html2canvas產生一張圖片,發現checkbox選取項目並沒有截圖成功。

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

頁面以及生產圖片:

#
我想大声告诉你我想大声告诉你2790 天前1195

全部回覆(1)我來回復

  • 过去多啦不再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>

    回覆
    0
  • 取消回覆