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

打开网页时在网络浏览器中看到的内容是报道页面的结果。您没有下载渲染结果，它已经在您的计算机上和您的内存中。你要做的是截取屏幕截图。

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

现在，您可以说有一些在线服务允许您下载在不同浏览器中完成的网站的屏幕截图，但这些服务基本上是在服务器上运行浏览器并使用操作系统工具来获取所需页面的屏幕截图。他们也可以在他们的服务器或任何东西上运行Microsoft Word的屏幕截图，这与网络浏览器无关。

Answer 2

浏览器不会让程序员出于安全原因导出Div的内容 - 您的银行信息可能位于div内。

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

以下是2个重新呈现html + css的库：

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

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

下载HTML5作为图像

2 个答案: