Question

我希望用户能够以编程方式拍摄他们在我的网站上制作的设计。设计将位于div中，该div是从屏幕的左/右边缘延伸出来的全景图。

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

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

Answer 1

我找到了一种方法来下载屏幕截图＆＃39;通过使用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/ 如果您有更多问题，请不要犹豫与我联系

是否有可能获得一个＆＃34;屏幕截图＆＃34;只有一个div

1 个答案: