how to save canvas as png image?

by

try this:

var canvas = document.getElementById("alpha");
var dataURL = canvas.toDataURL("image/png");
var newTab = window.open('about:blank','image from canvas');
newTab.document.write("<img src="https://stackoverflow.com/questions/11112321/" + dataURL + "" alt="from canvas"/>");

This shows image from canvas on new page, but if you have open popup in new tab setting it shows about:blank in address bar.

EDIT:- though window.open("<img src="https://stackoverflow.com/questions/11112321/"+ canvas.toDataURL("image/png') +"'/>") does not work in FF or Chrome, following works though rendering is somewhat different from what is shown on canvas, I think transparency is the issue:

window.open(canvas.toDataURL('image/png'));

More Related Contents:

  1. Capture HTML Canvas as gif/jpg/png/pdf?
  2. How to draw an inline svg (in DOM) to a canvas?
  3. How to detect shape on a transparent canvas?
  4. Using HTML5/Canvas/JavaScript to take in-browser screenshots
  5. Resizing an image in an HTML5 canvas
  6. Maximum size of a element
  7. Get a pixel from HTML Canvas?
  8. Can I turn off antialiasing on an HTML element?
  9. Zoom Canvas to Mouse Cursor
  10. Resize image with javascript canvas (smoothly)
  11. Does HTML5/Canvas Support Double Buffering?
  12. Any way to clone HTML5 canvas element with its content?
  13. html 5 canvas LineTo() line color issues
  14. HTML5 Canvas camera/viewport – how to actually do it?
  15. Text wrap in a element
  16. How to resize html canvas element?
  17. How do I rotate a single object on an html 5 canvas?
  18. Detect if user clicks inside a circle
  19. How to determine the intended frame-rate on an html video element
  20. getting mouse position with javascript within canvas
  21. How to save canvas animation as gif or webm?
  22. clearRect not working
  23. canvas getContext(“2d”) returns null
  24. clearing circular regions from HTML5 Canvas
  25. draw 10,000 objects on canvas javascript
  26. Is there an equivalent of canvas’s toDataURL method for SVG? [closed]
  27. Body animation isn’t smooth
  28. HTML Canvas Full Screen
  29. javascript: upload image file and draw it into a canvas
  30. Extracting single frames from an animated GIF to canvas

Leave a Comment