Hello, dear. There is such a task: Turn the contents of the div-block into a picture and invite the user to download it.
<!DOCTYPE html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> div { width:200px; background-color: green; } </style> <script type="text/javascript" src="http://night-creature.com/html2canvas.js"></script> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> </head> <body> <div id="downimg"> <div> some text </div> </div> <script language="javascript"> function downimg(){ html2canvas($('#downimg'), { onrendered: function (canvas) { var img = canvas.toDataURL('image/png').replace("image/png", "image/octet-stream"); window.location.href = img; } }); } </script> <a href="javascript:void(0)" onClick="downimg()" >SAVE</a> </body> </html>
It would seem that the problem is solved. But, the image is downloaded without extension and even without a name. Is there any way, without involving server technologies, to give a name to the screenshot?