- Published on
캔버스에 그린 이미지를 PNG 이미지로 저장하는 방법이 필요해 찾아봤다. 평소에 구현해본게 아니라서 약간의 삽질이 있었지만 파일 구조를 좀 알고 있다면 그다지 어려운 일은 아니다. 참고로 본 설명은 Windows8 스토어 앱 개발에 필요했던 작업이라 WinJS 기준으로 설명하겠지만, 기본 원리는 다른 플랫폼이라도 동일할 것으로 생각된다. 1. 캔버스(Canvas)에 여러장의 이미지 로드하기 먼저 canvas를 이용해 이미지를 올려보자. HTML에 <canvas> 태그를 삽입하고 다음과 같은 코드를 이용해 이미지를 로드해본다. var canvas = document.getElementById('canvas'); var cx = canvas.getContext('2d'); var imageObj = new Image(); imageObj.onload = function () { cx.drawImage(imageObj, 69, 50); } imageOb