Question

我有一个以Asp.net .apsx页面形式显示的图表。现在根据我的要求，我必须在按钮点击时将此表单内容保存为我的系统中的图像。这是我的.aspx代码..

<form id="form1" runat="server">
<div style="padding-left:150px">
  <asp:Literal ID="FCLiteral1" runat="server"></asp:Literal>
</div>
<div style="padding-left:350px"><b>Demo</b></div>
</form>

在此代码中，将显示一个图表。所以我想在我的系统中将该图表捕获为截图图片。如何在jQuery中执行此操作..请帮忙。

这是jQuery中的代码，我试图用它来获取变量中的图像但是jQuery中的按钮点击事件没有被解雇..

<script type="text/javascript">
      function capture() {
          $('#form1').html2canvas({
              onrendered: function (canvas) {
                  alert("Hii");
                  var img_val;
                  $('#img_val').val(canvas.toDataURL("image/png"));
                  document.getElementById("form1").submit();
                  alert("Hii");
              }
          });
      }
  </script>  

<body>
<form id="form1" runat="server">
<div style="padding-left:150px">
  <asp:Literal ID="FCLiteral1" runat="server"></asp:Literal>
</div>
<div style="padding-left:350px"><b>Demo</b></div>
</form>

 <input type="submit" value="Take Screenshot Of Div" onclick="capture();" />

</body>

请帮帮我。

Answer 1

这可以通过使用jQuery插件＆＃34; html2canvas＆＃34;来实现。您可以阅读here。

它的使用非常简单：

html2canvas(element, {
    onrendered: function(canvas) {
        // canvas is the final rendered <canvas> element
        $('#myImage').val(canvas.toDataURL("image/png"));
        $("#myForm").submit();
    }
});

此脚本存在限制。它实际上并不截取页面的截图，而是根据从DOM读取的属性构建它的表示。这意味着一些CSS属性和SVG元素可能无法正确呈现。

Answer 2

试试这个

        html2canvas($("body"), {
             onrendered: function (canvas) {
                $("body").append(canvas);
             }
        });

并将输入类型更改为按钮

如何在jQuery中截取屏幕截图（图像）

2 个答案: