user capture div as image and save to computer

Question

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.

Answer 1

There is a browser support limit doing this. HTML2Canvas can render your HTML content into a canvas element. Then you can use canvas.toDataURL("image/png"); (docs in MDN) method to export the canvas element to an jpeg or png image.

It's not widely supported but it's still possible.

Answer 2

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

    }
}

Answer 3

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.

<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!

Answer 4

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.

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:

<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.

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.