用戶捕獲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作爲圖像並保存到計算機

回答

相關問題