Javascript 用户将 div 捕获为图像并保存到计算机
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8025806/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
user capture div as image and save to computer
提问by Hyman Notman
I have a Div on my site, I want to place a button/link (or other things of the sort) that when clicked will save the div and all its contents to the users computer, much like the printing code which is used to print divs. I'm a coding novice so all help will be apreciated.
我的网站上有一个 Div，我想放置一个按钮/链接（或其他类似的东西），点击后会将 div 及其所有内容保存到用户计算机，就像用于打印的打印代码一样div。我是一个编码新手，所以所有的帮助都会受到赞赏。
回答by Mohsen
There is a browser support limit doing this. HTML2Canvascan render your HTML content into a canvaselement. Then you can use canvas.toDataURL("image/png");(docs in MDN) method to export the canvaselement to an jpegor pngimage.
这样做有浏览器支持限制。HTML2Canvas可以将您的 HTML 内容呈现为一个canvas元素。然后您可以使用canvas.toDataURL("image/png");（MDN 中的文档）方法将canvas元素导出到一个jpeg或png图像。
It's not widely supported but it's still possible.
它没有得到广泛支持，但仍然有可能。
回答by Anoop B.K
Easy way
简单的方法
var MyDiv1 = document.getElementById('DIV1');
var MyDiv3 = document.getElementById('DIV2');
MyDiv3.innerHTML = MyDiv1.innerHTML;
html2canvas(MyDiv3, {
useCORS: true,
onrendered: function (canvas) {
var dataUrl = canvas.toDataURL("image/png");
document.getElementById("HiddenField1").value = dataUrl;
}
});
use a button and call ur hidden field value
使用按钮并调用您的隐藏字段值
ButtonClick1()
{
string imgval = HiddenField1.Value;
imgval = imgval.Replace("data:image/png;base64,", "");
byte[] imgData = Convert.FromBase64String(imgval);
using (System.Drawing.Image image = System.Drawing.Image.FromStream(new MemoryStream(imgData)))
{
String path = Server.MapPath("~/imgFolder");
image.Save(path + "\output.jpg", ImageFormat.Jpeg); // Or Png
}
}
回答by GrabzIt
An easy way to do this would be to use GrabzIt's JavaScript API to capture a div. You would just need to do something like the following. Where #features is the id of the div you want to capture.
一种简单的方法是使用 GrabzIt 的 JavaScript API 来捕获 div。您只需要执行以下操作即可。其中 #features 是您要捕获的 div 的 ID。
<script type="text/javascript" src="grabzit.min.js"></script>
<script type="text/javascript">
GrabzIt("Your Application Key").ConvertURL("http://www.example.com/my-page.html",
{"target": "#features", "bheight": -1, "height": -1, "width": -1}).Create();
</script>
Disclaimer I built this API!
免责声明我构建了这个 API！
回答by richardtallent
Assuming you want a text or HTML file, not an image file like a screen shot, JavaScript by itself can't initiate a "Save" dialog on a web browser, only a response from a web request to a server will do so.
假设您想要一个文本或 HTML 文件，而不是像屏幕截图这样的图像文件，JavaScript 本身无法在 Web 浏览器上启动“保存”对话框，只有从 Web 请求到服务器的响应才会这样做。
To start with, you'll need a form with your button and a hidden field:
首先，您需要一个带有按钮和隐藏字段的表单：
<div id="saveme">stuff to save</div>
<form action="saveme.aspx" method="POST">
<input type="submit" onclick="prepsave()">
<input type="hidden" id="savemepost">
</form>
And you need some Javascript to save the DIV contents to the hidden field before submittal:
并且您需要一些 Javascript 在提交之前将 DIV 内容保存到隐藏字段：
<script>
function prepsave() {
document.getElementById("savemepost").value =
document.getElementById("saveme").innerHTML;
return true;
}
</script>
On the server, you'll need some code to accept the text and spit it back out in the form of a file attachment:
在服务器上，您需要一些代码来接受文本并以文件附件的形式将其吐出：
<script runat="server">
Response.Clear()
Response.AddHeader("content-disposition","attachment; filename=saved.html")
Response.Write(Request.Form("savemepost"))
</script>
Caveat #1: There are probably some minor bugs in there and plenty of room for improvement, this is just a proof of concept.
警告＃1：那里可能存在一些小错误并且有很大的改进空间，这只是概念证明。
Caveat #2: The server-side code above is potentially insecure, as it allows any web page to control content going to the user's web browser from your domain. You'll need to add some measures to protect this from being abused.
警告 #2：上面的服务器端代码可能不安全，因为它允许任何网页控制从您的域进入用户 Web 浏览器的内容。您需要添加一些措施来保护它不被滥用。
