Wednesday, April 9th, 2008

Canvas2Image: Save out your canvas data to images

Category: Canvas, JavaScript, Library

<>p>Ajax Canvas

More from Jacob Seidelin. He has created Canvas2Image, a library that takes <canvas> data and makes an image out of it. This means that you can create canvas images on the fly and then:

javascript
< view plain text >
  1. var strDataURI = oCanvas.toDataURL();  
  2. // returns "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..."

See the full API in use here:

javascript
< view plain text >
  1. /*
  2.  * Canvas2Image.saveAsXXXX = function(oCanvasElement, bReturnImgElement, iWidth, iHeight) { ... }
  3.  */
  4.  
  5. var oCanvas = document.getElementById("thecanvas");
  6.  
  7. Canvas2Image.saveAsPNG(oCanvas);  // will prompt the user to save the image as PNG.
  8.  
  9. Canvas2Image.saveAsJPEG(oCanvas); // will prompt the user to save the image as JPEG.
  10.                                   // Only supported by Firefox.
  11.  
  12. Canvas2Image.saveAsBMP(oCanvas);  // will prompt the user to save the image as BMP.
  13.  
  14.  
  15. // returns an <img /> element containing the converted PNG image
  16. var oImgPNG = Canvas2Image.saveAsPNG(oCanvas, true);  
  17.  
  18. // returns an <img /> element containing the converted JPEG image (Only supported by Firefox)
  19. var oImgJPEG = Canvas2Image.saveAsJPEG(oCanvas, true);
  20.                                                        
  21. // returns an <img /> element containing the converted BMP image
  22. var oImgBMP = Canvas2Image.saveAsBMP(oCanvas, true);
  23.  
  24.  
  25. // all the functions also takes width and height arguments.
  26. // These can be used to scale the resulting image:
  27.  
  28. // saves a PNG image scaled to 100x100
  29. Canvas2Image.saveAsPNG(oCanvas, false, 100, 100);

Related Content:

9 Comments »

Comments feed TrackBack URI

Cool! I am going to try this with flot…

Comment by Jigs — April 9, 2008

Very cool! :)

I wasted at least an hour trying to get the auto-download prompt working with canvas. That’s very cool you got it working properly.

Comment by mudx — April 9, 2008

Canvas2Image–;

I was expecting a cross-browser solution. :-\

Comment by ibolmo — April 9, 2008

Is there any length limit of “data” field in src? It would be great to have similar lib in IE.

Comment by thinpiglin — April 9, 2008

If you combine this with http://fuchsia-design.com/CanvaSVG/, you effectively have a way to convert SVG to Canvas to Bitmap.

Example: http://antimatter15.110mb.com/misc/svg2bitmap/index.xhtml

Comment by antimatter15 — April 9, 2008

BMP image generation is trivial. It’s been around for years. Beside it doesn’t need the slow-ish base64 encoding. However the size impact of base64 is stable ( always 4/3 ) as opposed to URL encoding ( depends on the characters and their frequency ).

thinpiglin: the limit is that of an SRC attribute, which I assume depends on the UA’s URL implementation.

Comment by Mathieu \'p01\' Henri — April 10, 2008

Very useful! I thought this was only possible with Flash

Comment by maximeguilbot — April 14, 2008

its very useful no doubt….but is there any way to use it on IE6?

Comment by panchalvimal — December 12, 2009

Dion, do you have any ideas if this could be used in WebOS? I’m trying to save a canvas as a PNG, but since it cant be done using a palm API, im wondering if this could work.

Comment by shawalli — May 27, 2010

Leave a comment

You must be logged in to post a comment.