以镜像形式下载HTML5

Question

如何将div下载为镜像？(在JavaScript、Jquery或PHP中)

我有一个简单的HTML代码：

<div id="downloadThis">
  <div style="width: 200px; height: 100px; background: red"></div>
  <div style="width: 200px; height: 100px; background: blue"></div>
</div>
<button id="downloader" onClick="download('downloadThis')">Download</button>

我想把它下载成图片：

<script>
  function download(id){
    document.getElementById(id).downloadAsImage("jpeg");
  }
</script>

Answer 1

当您打开页面时，您在web浏览器中看到的内容是呈现页面的结果。您不需要下载渲染结果，它已经在您的计算机和内存中。你要做的就是截图。

在Javascript中，没有标准的API来截取渲染页面的屏幕截图-毕竟，这不是web浏览器的工作，而是您的系统工具的工作。但是您可以做的一个技巧是将DOM的一部分(或whote )单独呈现到<canvas>中，并将该画布的内容保存到图像中。这个答案解释了这种过程的一般机制：https://stackoverflow.com/a/6678156/1542343

现在，你可能会说，有一些在线服务可以让你下载不同浏览器的网站截图，但这些服务本质上是在服务器上运行浏览器，并使用操作系统工具截取所需页面的屏幕截图。他们也可以截取在他们的服务器上运行的Microsoft Word的屏幕截图，或者任何与web浏览器本身无关的东西。

Answer 2

出于非常好的安全原因，浏览器不允许程序员导出Divs的内容--您的银行信息很可能在中。

您可以做的是将创建html+css的html+css发送到一个库中，该库以一种可以镜像的方式重新呈现该div。

这里有两个重新呈现html+css的库：

html2canvas使用暴力将所有html+css转换为画布绘图。它适用于基本内容，但不适用于更复杂的内容。它也有安全限制，无法重新呈现从不同域加载的内容，而不是网页本身。链接：http://html2canvas.hertzen.com/

PhantomJS是一个服务器端库，它使用webkit重新呈现html+css。它将从您发送给它的html+css创建一个更真实的图像，因为它使用webkit的浏览器引擎进行渲染。链接：http://phantomjs.org/