How to take screenshot of a div using javascript?

Question

Say for example i have a div with image source

<div>
<p class="row">With custom CSS</p>
<img src="/images/midhun.jpg">
</div>

On button click i need to open this image screen shot in another div

Can you tell the steps to take the screen shot of that image

Answer 1

Assuming, you want to show the image in other div.

HTML:

<div id="main">
    <img src="https://lh5.googleusercontent.com/-XOGfvAHr7HQ/UvoUItkZMZI/AAAAAAAAHJk/IJz5JcUB9dw/w520-h274-no/scopes_in_directives.png" />
</div>
<div id="copy">
</div>
<button id="myButton">Click</button>

Javascript:

$('#myButton').on('click', function() {
    $('#copy').html($('#main').html());
});

Demo: https://jsfiddle.net/tusharj/uapf99nt/

Answer 2

You don't need to take any screenshot. The image is already loaded, so you can just show the same image again:

HTML

<div id="originalDiv">
   <img src="/images/midhun.jpg">
</div>
<div id="secondDiv">
   <img src="" />
</div>

CSS

#secondDiv { display:none }

jQuery

$(document).on('click', '#button', function() {
    var img = $('#originalDiv > img').attr('src');
    $('#secondDiv > img').attr('src', img).show();
});

Answer 3

look here. it attempts to render a part of the dom, into an image

http://html2canvas.hertzen.com/

Answer 4

Check this link to take a screenshot..

$(function() { 
$("#btnSave").click(function() { 
    html2canvas($("#widget"), {
        onrendered: function(canvas) {
            theCanvas = canvas;
            document.body.appendChild(canvas);

            canvas.toBlob(function(blob) {
                saveAs(blob, "Dashboard.png"); 
            });
        }
    });
});
});