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?

  • tyts well, why not make a link with the name? canvas2blob - zb '
  • @eicto hmm, really cool! I searched, but did not find it, thanks! - lampa
  • Hello Inkognitoo, please tell me how your script was re-implemented? What is the name and the extension? - dmivasant 2:55 pm
  • @Negash answered your question. - Pavel Sotnikov

4 answers 4

http://htmlbook.ru/html/a/download
Magic version was added in version 5, but I think not all browsers will pull it

 <a download="img.png" href="javascript:void(0)" onClick="downimg()" >SAVE</a> 
  • @ReinRaus It is also impossible to scroll some data generated on js, for example, graphics, well, at any rate I couldn’t beat it at my development stage - Negash
  • The generated WebGL also fails to screen. - alex10

It seems that without a small server code still can not do. With the help of javascript we cannot change the header of Content-disposition , and this is exactly what sets the behavior of the browser - display or save. Still, you have to add a dozen lines (here is a PHP example ) to get the desired behavior.

  • Thanks, I've seen it all. - Pavel Sotnikov

The alternative is - save flash. The server is not needed.

  • No, flash-technologies are persona non grata. - Pavel Sotnikov

See, you have a picture generated on the fly and broadcast to base64 . Accordingly, you get in toDataURL() not a picture, just a set of characters.

  • Thank you, I know =) - Pavel Sotnikov