點擊截圖功能 js canvas

本文轉載自查看原文 2017-06-08 14:56 1393 功能點

使用:html2canvas實現瀏覽器截圖

<html>
    <head>
        <meta name="layout" content="main">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $(".example1").on("click", function(event) {
                    event.preventDefault();
                    html2canvas($(".aa"), {
                     // height: $(".aa").outerHeight() + 20,
                        allowTaint: true,
                        taintTest: false,
                        onrendered: function(canvas) {
                            canvas.id = "mycanvas";
                            //document.body.appendChild(canvas);  
                            //生成base64圖片數據  
                            var dataUrl = canvas.toDataURL();
                            var newImg = document.createElement("img");
                            newImg.src = dataUrl;
                            newImg.className = 'img'
                            $(".product").before(newImg);
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        Hello!
        <div class="aa" style="background-color: #abc;">
            test test test test test test
        </div>
        <textArea id="textArea" col="20" rows="10"></textArea>
        生成界面如下：
        <div class="product">
            <input class="example1" type="button" value="button">
        </div>
    </body>
</html>

參考：http://www.cnblogs.com/yanweidie/p/5203943.html#_label0

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JS 使用html2canvas實現頁面截圖功能 Js實現截圖功能 JS 使用html2canvas實現截圖功能的問題記錄和解決方案 canvas與html5實現視頻截圖功能 canvas與html5實現視頻截圖功能 vue html2canvas 實現截圖功能 html2canvas - 實現網頁截圖(+下載截圖) 功能 js實現視頻截圖,視頻批量截圖,canvas實現 html2canvas JS截圖插件 html2canvas實現截圖功能遇到的坑。