是否有可能只获得一个 div 的“屏幕截图”

Question

我希望用户能够以编程方式为他们在我的网站上所做的设计拍照。该设计将在一个 div 中，该 div 是从屏幕的左/右边缘延伸的全景图。

基本上我会创建该 div 及其内容的 .jpg、.png 等。

图像魔术和其他插件的组合可以实现吗？

Answer 1

我找到了一种使用 HTML2Canvas（这里是链接：http://html2canvas.hertzen.com/）库来下载只有一个 div 的“屏幕截图”的方法。此代码所做的是基于 div 的 HTML 生成画布，但不显示它，然后将画布转换为图像（在本例中为 png 图像文件），然后提供连接到生成的图像的下载链接：

HTML：

<div id="capture"><h2>This should save to a image</h2><p>Amazing!</p></div>
<p id="notice"></p>

JavaScript：

html2canvas($("#capture"), {
    onrendered: function(canvas){
    img = canvas.toDataURL();
    document.getElementById("notice").innerHTML = "<a href='"+img+"' download='download.png'>Click here</a> to download the image";
  }
});

这里是工作 JSFiddle 的链接：http://jsfiddle.net/Xanco/KJ5s5/ 如果您有更多问题，请随时与我联系