CODEWITHSUNDEEP
javascriptjqueryhtml2canvas
Jimmy Lin
Jimmy Lin

Reputation: 1501

How can I store the screenshot using html2canvas?

I am trying to save the screenshot of website using html2canvas 0.34.

But I don't know where the screenshot be saved, how to store the screenshot into my db, or open the the image with a new window.

My code is below:

<script type="text/javascript">
$('div').html2canvas({
onrendered: function( canvas ) {
var img = canvas.toDataURL();
window.open(img);
}
});
</script>

</head>
<body>         
<h1>Testing</h1>
<div>
<img src='http://25.media.tumblr.com/tumblr_mcc5k9YRli1rt6zh0o1_500.jpg'>
</div>
</body></html>

I want to store the screenshot of the image into database or open in another windows.

Thank you very much.

Upvotes: 2

Views: 6531

Answers (2)

Arun
Arun

Reputation: 1095

   var data = canvas.toDataURL();
-----------------For Downloading Imgage in Chrome (just 4 testing)-------------------------
/* var save = document.createElement('a');
        save.href = data;
        save.target = '_blank';
        save.download = 'fileName';

        var event = document.createEvent('Event');
        event.initEvent('click', true, true);
        save.dispatchEvent(event);
        (window.URL || window.webkitURL).revokeObjectURL(save.href);*/
//---------------------------------

Upvotes: 1

Zlug
Zlug

Reputation: 384

The toDataURL function only returns the image data as a string, it is incapable of saving it (as JS don't have access to the file system)

In order to save it you ether have to let your browser load it as an image, or let a server side script handle it.

this should be useful to you http://www.kevinsookocheff.com/2011/07/27/saving-canvas-data-to-an-image-file-with-javascript-and-php/

Upvotes: 5

Related Questions