HTML5 Canvas2Image 캔버스 영역을 이미지 파일로 저장

 

 

 

 

=================================

=================================

=================================

 

 

 

 

 

 

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

 

HTML5 Canvas2Image 캔버스 영역을 이미지 파일로 저장

 

view plaincopy to clipboardprint?

1. var strDataURI = oCanvas.toDataURL();  
2. // returns "https://t1.daumcdn.net/cfile/tistory/2160374E56E6899315"  
3.   
4. //전체 API를 사용한 예제입니다:  
5. /*  
6. * Canvas2Image.saveAsXXXX = function(oCanvasElement, bReturnImgElement, iWidth, iHeight) { ... }  
7. */  
8.   
9. var oCanvas = document.getElementById("thecanvas");  
10.   
11. Canvas2Image.saveAsPNG(oCanvas); // PNG 이미지 저장 대화창이 나타납니다.  
12.   
13. Canvas2Image.saveAsJPEG(oCanvas); // JPEG 이미지 저장 대화창이 나타납니다.  
14. // Firefox만 가능.  
15.   
16. Canvas2Image.saveAsBMP(oCanvas); // BMP 이미지 저장 대화창이 나타납니다.  
17.   
18.   
19. // PNG로 변환된 <img> 엘리먼트 반환  
20. var oImgPNG = Canvas2Image.saveAsPNG(oCanvas, true);   
21.   
22. // JPEG로 변환된 <img> 엘리먼트 반환(Firefox만 가능)  
23. var oImgJPEG = Canvas2Image.saveAsJPEG(oCanvas, true);   
24.   
25. // BMP로 변환된 <img> 엘리먼트 반환  
26. var oImgBMP = Canvas2Image.saveAsBMP(oCanvas, true);   
27.   
28.   
29. // 모든 함수는 너비와 높이를 인자로 줄 수 있습니다   
30. // 모든 이미지는 크기에 맞게 축소/확대 됩니다:  
31.   
32. // 100x100 크기의 PNG 이미지 저장  
33. Canvas2Image.saveAsPNG(oCanvas, false, 100, 100);
    

 

 

=================================

=================================

=================================