Activate your free membership today | Log-in

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:
  1.  
  2. var strDataURI = oCanvas.toDataURL()
  3. // returns "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..."
  4.  

See the full API in use here:

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

Related Content:

Posted by Dion Almaer at 10:00 am
9 Comments

+++++
20199.9 rating from 51 votes

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.