Canvas 태그에 그린 내용을 저장하고 싶을 때...

Canvas에 그려진 이미지를 이미지로 저장할 일이 있었는데요. Ajaxian에서 본 기억이 어렴풋이 떠올라서 검색을 해봤습니다. Canvas2Image: Save out your canvas data to images의 기사가 Canvas 태그를 이미지로 저장하는 라이브러리를 소개하는 기사입니다.

사용법은 간단합니다.  
먼저, html 페이지에서 canvas 태그를 이미지로 저장하기 위한 js파일들을 canvas2image.js와 base64.js를 script태그를 사용하여 읽어들입니다. (base64.js는 bmp를 저장할 때만 사용됩니다.) 그리고, 스크립트 코드에서 다음과 같이 Canvas의 내용을 저장하면 됩니다.

// Canvas element를 얻어온 다음에
var oCanvas = document.getElementById("thecanvas");

// 원하는 파일 타입인 PNG, JPEG, BMP로 저장합니다.
Canvas2Image.saveAsPNG(oCanvas);
Canvas2Image.saveAsJPEG(oCanvas);
Canvas2Image.saveAsBMP(oCanvas);

canvas2image.js에서 이미지를 저장하는 방법은 크게 두 가지로 나눌 수 있습니다.

1. 내장된 변환코드로 변환: Canvas2Image에 선언되어 있는 createBMP()를 사용하여 변환
   
2. toDataURL()을 사용: png와 jpeg는 Canvas태그의 HTMLCanvasElement.toDataURL()를 사용하여 이미지를 생성

toDataURL()의 인자로는 Mime 타입인 image/png, image/jpeg, image/svg+xml 등을 인자로 넘겨줄 수 있습니다.

Canvas2Image.savaeAsXXXX()를 실행할 때 3,4번째 인자로 크기를 조절할 width, height를 줄 수 있는데 크기 조절이 안되는 경우가 있더군요. 제가 잘 못했는지도 모르겠습니다만 ^^;; canvas 태그의 width/height에 직접 값을 넣어줬습니다. Firefox 3.0에서 style로 width/height를 줘도 canvas의 디폴트 값인 300,150 크기의 이미지가 넘어오더군요.

출처: Saving canvas data to image file via Ajaxian