将html保存为图像

Question

我正在尝试制作它，以便您可以使用javascript将我网站上生成的HTML保存为图像，而不是使用手动裁剪网站上的文本并使用第三方工具保存它。

我已尝试在堆栈溢出时使用其他问题的元素，但没有运气可以有人帮助我吗？

Answer 1

查看html2canvas

这里有描述的例子 http://www.kubilayerdogan.net/html2canvas-take-screenshot-of-web-page-and-save-it-to-server-javascript-and-php/

Answer 2

尝试以下链接。它使用html画布绘制Dom

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

Answer 3

查看我对类似问题HERE的回答。您可以指定div或文档正文作为要转换为图像的目标，然后运行html2canvas，如下所示：

＆＃13;

＆＃13;

$('#btn').click(function() {
  html2canvas($('#target'), {
    onrendered: function(canvas) {
      $('#output').append(canvas);
    }
  });
});

＆＃13;

#output {
  border: 1px solid #888888;
  padding: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>

<div id="target">This is the content you want to turn into an image
  <br>Click the button below to see magic happen.</div>
<br>
<br>
<button id="btn">Snap!</button>
<br>
<br>
<div id="output"></div>

＆＃13;

＆＃13;

＆＃13;