用户捕获div作为图像并保存到计算机

我在我的网站上有一个div，我想放置一个按钮/链接（或其他类型的东西），点击后将div和它的所有内容保存到用户电脑，就像用来打印div的打印代码一样。我是一个编码新手，所有的帮助都会有所帮助。用户捕获div作为图像并保存到计算机

2011-11-06 Jack Notman

你想从你的div捕获图像吗？ – Mohsen

是的，我希望该网站的用户能够按下一个按钮，然后它下载一个jpg/gif/png或div的div的屏幕截图 –

这样做有浏览器支持限制。 HTML2Canvas可以将您的HTML内容呈现为canvas元素。然后，您可以使用canvas.toDataURL("image/png");（docs in MDN）方法将canvas元素导出为jpeg或png图像。

它没有得到广泛的支持，但它仍然是可能的。

来源

2011-11-06 08:03:00 Mohsen

已经尝试这个我的内容不会工作在一个画布元素:( –

你不必在页面上有一个'canvas'。 – Mohsen

解释更多？它会与flash一起工作吗？ –

假设您想要一个文本或HTML文件，而不是像屏幕截图这样的图像文件，JavaScript本身无法在Web浏览器上启动“保存”对话框，只有从Web请求到服务器的响应将会这样做。

首先，你需要与你的按钮和一个隐藏字段形式：

<div id="saveme">stuff to save</div> 
<form action="saveme.aspx" method="POST"> 
    <input type="submit" onclick="prepsave()"> 
    <input type="hidden" id="savemepost"> 
</form>

而且你需要一些JavaScript来提交前的DIV内容保存到隐藏字段：

<script> 
    function prepsave() { 
     document.getElementById("savemepost").value = 
     document.getElementById("saveme").innerHTML; 
     return true; 
    } 
</script>

在服务器上，你需要一些代码来接受文本和吐回了一个文件附件的形式：

<script runat="server"> 
    Response.Clear() 
    Response.AddHeader("content-disposition","attachment; filename=saved.html") 
    Response.Write(Request.Form("savemepost")) 
</script>

注意事项＃1：可能存在一些小问题，并有很大的改进空间，这只是一个概念证明。

注意事项＃2：上述服务器端代码可能不安全，因为它允许任何网页控制从您的域到用户网络浏览器的内容。您需要添加一些措施以防止滥用。

来源

2011-11-06 08:06:48 richardtallent

他说他希望它能像他的评论中的截图一样题。 –

简单的方法

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; 

        } 
       });

使用按键，调乌尔隐藏字段值

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 

    } 
}

来源

2015-08-14 05:48:43

一个简单的方法来做到这一点是使用GrabzIt的JavaScript API来capture a 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>

免责声明我构建了此API！

来源

2017-06-15 14:33:33 GrabzIt

用户捕获div作为图像并保存到计算机

回答

相关问题