Capture HTML Canvas as gif/jpg/png/pdf?

Question

Is it possible to capture or print what's displayed in an html canvas as an image or pdf? I'd like to generate an image via canvas, and I'd like to be able to generate a png from that image.

Answer 1

http://ajaxian.com/archives/canvas2image-save-out-your-canvas-data-to-images

Hope that helps.

Edit: here's the original site for Canvas2Image http://www.nihilogic.dk/labs/canvas2image/

Answer 2

HTML5 provides Canvas.toDataURL(mimetype), which is implemented in Opera, Firefox, and Safari 4 beta. There are a number of security restrictions however (mostly to do with drawing content from another origin onto the canvas).

So you don't need an additional library, eg.

 <canvas id=canvas width=200 height=200></canvas>
 <script>
      window.onload = function() {
          var canvas = document.getElementById("canvas");
          var context = canvas.getContext("2d");
          context.fillStyle = "green";
          context.fillRect(50, 50, 100, 100);
          // no argument defaults to image/png; image/jpeg, etc also work on some
          // implementations -- image/png is the only one that must be supported per spec.
          window.location = canvas.toDataURL("image/png");
      }
 </script>

Theoretically this should create and then navigate to an image with a green square in the middle of it, but i haven't tested.

Answer 3

Oops. Original answer was specific to a similar question. This has been revised:

var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
var img     = canvas.toDataURL("image/png");

with the value in IMG you can write it out as a new Image like so:

document.write('<img src="'+img+'"/>');