Wednesday, April 9th, 2008
Canvas2Image: Save out your canvas data to images
Category: Canvas, JavaScript
, Library
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:
-
-
var strDataURI = oCanvas.toDataURL();
-
// returns "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..."
-
See the full API in use here:
JAVASCRIPT:
-
-
/*
-
* Canvas2Image.saveAsXXXX = function(oCanvasElement, bReturnImgElement, iWidth, iHeight) { ... }
-
*/
-
-
var oCanvas = document.getElementById("thecanvas");
-
-
Canvas2Image.saveAsPNG(oCanvas); // will prompt the user to save the image as PNG.
-
-
Canvas2Image.saveAsJPEG(oCanvas); // will prompt the user to save the image as JPEG.
-
// Only supported by Firefox.
-
-
Canvas2Image.saveAsBMP(oCanvas); // will prompt the user to save the image as BMP.
-
-
-
// returns an <img /> element containing the converted PNG image
-
var oImgPNG = Canvas2Image.saveAsPNG(oCanvas, true);
-
-
// returns an <img /> element containing the converted JPEG image (Only supported by Firefox)
-
var oImgJPEG = Canvas2Image.saveAsJPEG(oCanvas, true);
-
-
// returns an <img /> element containing the converted BMP image
-
var oImgBMP = Canvas2Image.saveAsBMP(oCanvas, true);
-
-
-
// all the functions also takes width and height arguments.
-
// These can be used to scale the resulting image:
-
-
// saves a PNG image scaled to 100x100
-
Canvas2Image.saveAsPNG(oCanvas, false, 100, 100);
-
Related Content:
20199.9 rating from 51 votes
Cool! I am going to try this with flot…
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.
Canvas2Image–;
I was expecting a cross-browser solution. :-\
Is there any length limit of “data” field in src? It would be great to have similar lib in IE.
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
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.
Very useful! I thought this was only possible with Flash
its very useful no doubt….but is there any way to use it on IE6?
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.