HTML5 캔버스 데이터를 파일로 저장하는 방법

HTML5 캔버스를 PNG 파일로 저장하기

Node.js 환경에서 node-canvas 라이브러리를 사용하면 HTML5 캔버스의 내용을 이미지 파일로 손쉽게 저장할 수 있습니다. 가장 일반적인 방법은 pngStream() 메서드를 활용해 스트림 형태로 데이터를 받아 파일에 기록하는 것입니다.

PNGStream을 이용한 저장 방법

아래 예제는 캔버스 데이터를 PNG 스트림으로 변환한 뒤, 파일 시스템 모듈(fs)의 쓰기 스트림에 연결하여 text.png 파일로 저장하는 코드입니다.

var f = require('fs')
, out = f.createWriteStream(__dirname + '/text.png')
, stream = canvas.pngStream();

stream.on('data', function(chunk){
    out.write(chunk);
});

stream.on('end', function(){
    console.log('PNG가 성공적으로 저장되었습니다!');
});

코드 설명

• createWriteStream(): 저장할 파일의 경로를 지정해 쓰기 스트림을 생성합니다.
• canvas.pngStream(): 캔버스 내용을 PNG 형식의 데이터 스트림으로 변환합니다.
• 'data' 이벤트: 스트림에서 데이터 조각(chunk)이 도착할 때마다 파일에 기록합니다.
• 'end' 이벤트: 모든 데이터 전송이 완료되면 호출되어 저장 성공 여부를 알려줍니다.

대안: toBuffer() 사용하기

스트림 없이 간단하게 처리하고 싶다면 toBuffer() 메서드를 사용할 수도 있습니다.

var fs = require('fs');
var buf = canvas.toBuffer('image/png');
fs.writeFileSync(__dirname + '/text.png', buf);

두 방법 모두 서버 사이드에서 차트, 그래프, 생성된 이미지 등을 파일로 저장할 때 유용하게 활용됩니다.