html2canvas:如何选择屏幕的一部分?

时间:2015-02-09 12:48:40

标签: javascript jquery var html2canvas

使用html2canvas,屏幕截图始终位于正文的左上角。 但我只需捕捉身体的一部分。 是否可以引入一个变量来定义一个" left和top"只做一个身体中间的小屏幕截图? 我不太了解编程......而且我完全迷失了! 谢谢你的帮助。

1 个答案:

答案 0 :(得分:0)

您应该将屏幕元素的标识(例如#container)传递给html2canvas函数。例如:



$('#goButton').click(function() {
  html2canvas($('#container'), {
    onrendered: function(canvas) {
      myImage = canvas.toDataURL("image/png");
      $('#image').append(canvas);
    }
  });
});

#container {
  width: 300px;
  height: 200px;
  border: 2px solid #888888;
  overflow: scroll;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<div id="container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et ex neque. Vivamus vulputate libero magna, quis porttitor libero faucibus eu. Aenean pharetra eleifend leo nec varius. In facilisis enim quis tellus egestas, ut euismod orci eleifend. Vestibulum
  eget enim dapibus, sollicitudin ante a, bibendum purus. Fusce nec condimentum sapien. Aliquam lacus mauris, iaculis iaculis elit vel, tincidunt dapibus neque.</div>
<br>
<button id="goButton">Snap</button>
<br>
<br>
<div id="image"></div>
&#13;
&#13;
&#13;

只需将元素放在任何位置即可。你应该注意到html2canvas实际上没有进行屏幕截图 - 它实际上渲染了元素(以及所有子元素和CSS),所以你不能只指定屏幕的一个区域。