Save canvas as jpg to desktop [duplicate]

by

Download attribute

There is a new download attribute in HTML5 that allow you to specify a file-name for links.

I made this for saving canvas. It has a link (“Download as image”) –

<a id="downloadLnk" download="YourFileName.jpg">Download as image</a>

And the function:

function download() {
    var dt = canvas.toDataURL('image/jpeg');
    this.href = dt;
};
downloadLnk.addEventListener('click', download, false);

You can even change the file-name dynamically by setting the attribute downloadLnk.download = 'myFilename.jpg'.

Demo from the archives.

More Related Contents:

  1. How to clear the canvas for redrawing
  2. HTML5 Canvas Resize (Downscale) Image High Quality?
  3. Resize image with javascript canvas (smoothly)
  4. HTML5 Canvas camera/viewport – how to actually do it?
  5. Capture frames from video with HTML5 and JavaScript
  6. How to use Google fonts in Canvas when Drawing DOM objects in SVG?
  7. addEventListener for keydown on Canvas
  8. Load image from url and draw to HTML5 Canvas
  9. HTML canvas – drawing disappear on resizing
  10. canvas getContext(“2d”) returns null
  11. clearing circular regions from HTML5 Canvas
  12. How to detect shape on a transparent canvas?
  13. HTML5 Canvas API – formatting individual words with italics
  14. Scaling an image to fit on canvas
  15. True Isometric Projection with HTML5 Canvas
  16. Real mouse position in canvas
  17. How to fix getImageData() error The canvas has been tainted by cross-origin data?
  18. Why is requestAnimationFrame better than setInterval or setTimeout
  19. How to upload image into HTML5 canvas
  20. Cropping images in the browser BEFORE the upload [closed]
  21. JavaScript: Extract video frames reliably
  22. How to draw polygons on an HTML5 canvas?
  23. HTML Canvas: How to draw a flipped/mirrored image?
  24. How to fill the whole canvas with specific color?
  25. HTML5 responsive canvas: resizing the browser canvas draw disappear
  26. Is there a way to curve / arc text using CSS3 / Canvas
  27. dotted stroke in
  28. How to scale an imageData in HTML canvas?
  29. How can I animate the drawing of text on a web page?
  30. HTML Canvas Full Screen

Leave a Comment