Save screenshot of a DIV as and image

Question

How to take screenshot of a DIV which contain more than one images? Actually I am dragging images into DIV and want to take screenshot using Jquery or Javascript but without using server side scripting language.

Answer 1

Assuming you have a button to click (to trigger the capture), and that the images are on the same domain, load the html2canvas JS file, then add this:

$('#btn').click(function() {
  html2canvas($('#DIV'), {
    onrendered: function(canvas) {
      //do something with the canvas element - upload, append to a display element, etc.  For example:
    var myImage = canvas.toDataURL("image/png");
    window.open(myImage);
    }
  });
});