How can I store the screenshot using html2canvas?
Question
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.
2 answers
solution1
5 ACCPTED 2012-10-23 11:15:11
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/
solution2
1 2014-02-10 10:57:46
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);*/
//---------------------------------
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.