Canvas2Image: Canvas 데이터를 이미지로 저장
[IT] Ajaxian 2008/04/13 05:17 |
from Canvas2Image: Save out your canvas data to images on Ajaxian
Jacob Seidelin씨의 또 다른 작업입니다. 그는 <canvas> 데이터를 이미지로 내보낼 수 있는 라이브러리인 Canvas2Image를 만들었습니다. 즉, 이런 식으로 canvas 이미지를 만들 수 있다는 얘기입니다:
전체 API를 사용한 예제입니다:
EnZine을 쓰고 이미지로 변환한 결과물
Jacob Seidelin씨의 또 다른 작업입니다. 그는 <canvas> 데이터를 이미지로 내보낼 수 있는 라이브러리인 Canvas2Image를 만들었습니다. 즉, 이런 식으로 canvas 이미지를 만들 수 있다는 얘기입니다:
var strDataURI = oCanvas.toDataURL();
// returns "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..."
// returns "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..."
전체 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);
* 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);
'[IT] Ajaxian' 카테고리의 다른 글
| Google Gears 와 웹표준 (0) | 2008/04/15 |
|---|---|
| Dojo 1.1 의 멋진 기능 (0) | 2008/04/14 |
| IE 8 보안 업데이트 (0) | 2008/04/13 |
| NetBeans, JavaScript 지원 (0) | 2008/04/13 |
| Canvas2Image: Canvas 데이터를 이미지로 저장 (0) | 2008/04/13 |
| DOMAssistant 2.7 출시, 강력한 유니코드 지원과 성능 향상 (0) | 2008/04/13 |
| IE 8 팀에 보낼 피드백 모집중 (1) | 2008/04/13 |
| Ajax API를 위한 희망사항 (0) | 2008/04/13 |
| 수퍼 마리오 : 14KB의 JavaScript (0) | 2008/04/11 |
Posted by 행복한고니