html2canvas：截取 div 不起作用的屏幕截图

Question

I want to take a screenshot of an element in the DOM using javascript and save it on my local computer automatically without phyically clicking on a button.我想使用 javascript 对 DOM 中的元素进行屏幕截图，并自动将其保存在我的本地计算机上，而无需在物理上单击按钮。 I have seen many suggestion but none is really working the way I want it.我看到了很多建议，但没有一个真正按照我想要的方式工作。 This are some of the examples I read.这是我读过的一些例子。 example1 , example 2 示例 1 , 示例 2

<!DOCTYPE html>
<html>
<body>
<script src="jquery-3.2.1.min.js"></script>
<p>This is some text.</p>

<div style="color:#0000FF" id="myContainer" >
<h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
</div>

 <p>This is some text.</p>
 <script type="text/javascript">
 try { 
    debugger;
    $.getScript("html2canvas.js", function() {  

                        var takeScreenShot = function() {

                        html2canvas($("#myContainer"), {

                       onrendered: function (canvas) {

                            var tempcanvas=document.createElement("canvas");

                            tempcanvas.width=350;
                            tempcanvas.height=350;
                            var context=tempcanvas.getContext("2d");

                        context.drawImage(canvas,112,0,288,200,0,0,350,350);
                             var link=document.createElement("a");
                              link.href=tempcanvas.toDataURL("image/png")
                              link.download = "myImage.png";
                              link.click();

                           }
                        }); 
                     }  }); 

    }
   catch (err) {
         alert(err.message);
 }

 </script>
</body>
</html>

The problem is that I am getting no error and I am having no screenshot.问题是我没有收到错误，也没有截图。

Answer 1

You are defining the function takeScreenShot, but never actually call it.您正在定义函数 takeScreenShot，但从未真正调用过它。 You need to call the function with takeScreenShot();您需要使用takeScreenShot();调用该函数takeScreenShot();

or more complete:或更完整：

try { 
debugger;
$.getScript("html2canvas.js", function() {  

                    var takeScreenShot = function() {

                    html2canvas($("#myContainer"), {

                   onrendered: function (canvas) {

                        var tempcanvas=document.createElement("canvas");

                        tempcanvas.width=350;
                        tempcanvas.height=350;
                        var context=tempcanvas.getContext("2d");

                    context.drawImage(canvas,112,0,288,200,0,0,350,350);
                         var link=document.createElement("a");
                          link.href=tempcanvas.toDataURL("image/png")
                          link.download = "myImage.png";
                          link.click();

                       }
                    }); 
                 }  
               takeScreenShot();
          }); 

}
catch (err) {
     alert(err.message);
}

html2canvas：截取 div 不起作用的屏幕截图

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-11-01 15:45:53

html2canvas：截取 div 不起作用的屏幕截图

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-11-01 15:45:53

解决方案1
0 已采纳 2017-11-01 15:45:53