libjs-flotr 0.2.1~r301-1 / usr / share / doc / libjs-flotr / canvas2image.txt

Documentation on canvas2image may be found at

http://www.nihilogic.dk/labs/canvas2image/

This is a small library that lets you easily save a HTML5 canvas element as
an imagefile.
Files needed: canvas2image.js, base64.js

Using the HTML5 canvas element, you can create all sorts of cool graphics
client-side on the fly using Javascript. However, the canvas image cannot
(in all browsers) simply be saved to disk as any other image.
Luckily there is a neat function on the the canvas object called
toDataURL(). This functions encodes the image data as a base64 encoded PNG
file and returns it as a data: URI. 

The following functions are provided:

/* 
 * 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 spported 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);