是否可以只获得一个div的"screen shot"

Question

我希望用户能够以编程方式拍摄他们在我的网站上所做的设计。该设计将在一个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/如果您有任何问题，请随时与我联系