Canvas2Image: Canvas 데이터를 이미지로 저장

from Canvas2Image: Save out your canvas data to images on Ajaxian

EnZine을 쓰고 이미지로 변환한 결과물

Jacob Seidelin씨의 또 다른 작업입니다. 그는 <canvas> 데이터를 이미지로 내보낼 수 있는 라이브러리인 Canvas2Image를 만들었습니다. 즉, 이런 식으로 canvas 이미지를 만들 수 있다는 얘기입니다:

var strDataURI = oCanvas.toDataURL();
// returns "https://t1.daumcdn.net/cfile/tistory/217E413B56EA4D9929"

전체 API를 사용한 예제입니다:

/*
 * Canvas2Image.saveAsXXXX = function(oCanvasElement, bReturnImgElement, iWidth, iHeight) { ... }
 */

var oCanvas = document.getElementById("thecanvas");

Canvas2Image.saveAsPNG(oCanvas);  // PNG 이미지 저장 대화창이 나타납니다.

Canvas2Image.saveAsJPEG(oCanvas); // JPEG 이미지 저장 대화창이 나타납니다.
                                  // Firefox만 가능.

Canvas2Image.saveAsBMP(oCanvas);  // BMP 이미지 저장 대화창이 나타납니다.


// PNG로 변환된 <img> 엘리먼트 반환
var oImgPNG = Canvas2Image.saveAsPNG(oCanvas, true);  

// JPEG로 변환된 <img> 엘리먼트 반환(Firefox만 가능)
var oImgJPEG = Canvas2Image.saveAsJPEG(oCanvas, true);
                                                      
// BMP로 변환된 <img> 엘리먼트 반환
var oImgBMP = Canvas2Image.saveAsBMP(oCanvas, true);


// 모든 함수는 너비와 높이를 인자로 줄 수 있습니다
// 모든 이미지는 크기에 맞게 축소/확대 됩니다:

// 100x100 크기의 PNG 이미지 저장
Canvas2Image.saveAsPNG(oCanvas, false, 100, 100);

출처 : http://enzine.tistory.com/