9. 캔버스(canvas) 내용을 이미지로 저장
여러분들이 canvas 내에 그린 직선이나 사각형 같은 이미지들을 이미지 형태(기본 png 형태)로 저장하는 방법은 의외로 간단합니다. 다음과 같은 toDataURL() 메서드를 이용하여 이미지 객체를 이미지 데이터 URL로 설정할 수 있으며 브라우저를 통해 직접 이미지 데이터 URL을 열거나 이미지를 저장할 수 있습니다.
canvas.toDataURL([type])
위에서 입력
파라미터가 없이 사용할 경우 기본 타입은 “image/png”를 의미하게 됩니다. 입력 파라미터의 타입(type)으로 올 수 있는 형태는 “image/jpeg”, “imag/svg+xml”, “text/plain” 등이 올 수 있습니다. toDataURL() 메서드가 실행되면 반환값으로는 “https://t1.daumcdn.net/cfile/tistory/2307954B56E6C21B20"text-align:left" align="left">
메모장으로 방금
전 사용한 ““contextState.html”을 열고 다음과 같이 하단 부분에 코드를 추가합니다.
context.strokeRect(180,10,100,150);
//png 포맷으로 canvas에 그려진 내용들을 이미지로 저장
var dataURL = canvas.toDataURL();
//이미지로 저장될 수 있도록 img 요소의 src 요소에 연결
document.getElementById("canvasImg").src = dataURL;
}
</script>
</head>
<body>
<canvas id="yourcanvas"
width="400" height="300"><canvas>
<img id="canvasImg" alt="오른쪽 마우스 버튼 클릭">
</body>
다른 이름으로 저장을 선택하여 “saveDrawingImage.hmtl”로 저장합니다. 이제 Firefox를 이용하여 연결하면 다음과 같이 나타납니다.
마우스 오른쪽
버튼을 클릭하면 팝업 메뉴창이 뜨고 이미지 보기, 다른 이름으로 이미지 저장 등이 선택 가능한데 여기서
이미지 보기를 클릭합니다. 그러면 다음과 같이 문자열 형태로
canvas에 그려진 도형들이 나타납니다.
앞에 나타난
문자열에서 보는 바와 같이 해당 이미지 문자열은 파일 형식이 png인 이미지를 나타내고 이진 데이터를
문자열 형태로 나타내는 base64 인코딩되었다고 나타내며 그 뒤에 이어지는 문자열이 실제 캔버스에
그려진 도형들에 대한 데이터입니다.
조금 전 Firefox를 이용하여 연결한 화면에서 오른쪽 버튼을 클릭하면 뜨는 팝업 메뉴창에서
다른 이름으로 이미지 저장을 클릭하면 기본적으로 다음과 같이 설명한대로 이미지 파일 형식이 png 형태로
저장할 수 나타납니다.
하단의 저장
버튼을 클릭하면 여러분의 컴퓨터에 저장되는 것처럼 보이지만 실제로는 이미지 파일이 저장되지 않습니다. 왜냐하면 toDataURL() 메서드를 이용하여 생성된 이미지는 실제 이진 데이터가 아닌 문자열 형태로 된 base64로 인코딩되었기 때문에 실제로 저장되도록 하기 위해서는 해당 데이터를 디코딩해주는 코드와 클라이언트
단에 저장하는 기능을 구현해줘야 합니다.
이에 대한 실제 구현 부분은 이 책의 범위를 넘어가므로 생략합니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 Canvas에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 11. 이미지(Image) (0) | 2013.08.07 |
|---|---|
| 10. 변환(Transformation) (0) | 2013.08.07 |
| 8. context의 상태 저장 및 불러오기 (0) | 2013.08.07 |
| 7. 그림자 효과(Shadow Effect)와 색상의 점진적 변화주기(Gradient) (0) | 2013.08.07 |
| 6. Text (0) | 2013.08.07 |
