将HTML5作为图像下载

如何将我的div下载为图像？（在JavaScript中，jQuery的或PHP）将HTML5作为图像下载

我有一个简单的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>

来源

2015-02-08 Tomato

检查文档https://github.com/kiloev/html-to-image – Ananth 2015-02-08 15:50:22

我想下载一切为一个图像 – Tomato 2015-02-08 15:51:35

您在网络浏览器中看到什么当你打开一个页面是重新编辑一个页面的结果。你不要下载渲染的结果，它已经在你的电脑上和你的记忆中。你正在做的是做一个截图。

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

现在，你可以说有在线服务可以让你下载在不同浏览器上完成的网站的屏幕截图，但是这些服务实质上做的是他们运行浏览器在服务器上使用操作系统工具截取所需页面的屏幕截图。他们也可以截取在他们的服务器上运行的微软Word或其他任何内容的屏幕截图，这本质上与浏览器无关。

来源

2015-02-08 16:08:45 gvlasov

出于安全原因，浏览器不允许程序员导出Divs的内容 - 您的银行信息可能在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/

来源

2015-02-08 16:32:11 markE

将HTML5作为图像下载

回答

相关问题