HTML - 캔버스 이미지 형식 포맷 변환 및 다운로드 구현

캔버스에 그려진 이미지 파일 형식은 기본값이 PNG입니다. 이것을 image/jpg나 image/webp 형식을 지정하여 이미지 포맷을 변환할 수 있습니다.

메서드	설 명
toDataURL( [mime-type] [,encoderOptions] )	이미지의 파일 형식을 변환 mime-type: Mime 형식. 선택사항 encoderOptions: 압축률. 선택사항  0~1사이의 수. 기본값: 0.92

toDataURL()는 캔버스 자체의 기능이므로 아래와 같이 사용합니다.

<style>canvas { border: 1px solid black; }</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 300;
canvas.height = 250;
var context = canvas.getContext('2d');

context.fillStyle = "red";
context.fillRect(50,50,100,100);

context.globalCompositeOperation = "source-over";

context.fillStyle = "blue";
context.beginPath();
context.arc(130,120,50,0,2*Math.PI);
context.fill();

// 이미지 데이터를 콘솔에 출력
var imagedata = canvas.toDataURL();
console.log(imagedata);
/*
결과:
data:image/png;base64,iVBORw0KGgoAAAAN...
*/
</script>

위 예제에서 data:image/png;base64,… 로 출력되는데, 이 데이터는 캔버스에 그려진 모든 이미지 정보를 포함합니다. 이 기능을 이용하면 캔버스에 그려진 이미지 파일로 로컬에 저장할 수 있습니다. 예를 들면 .png 형식의 이미지를 .webp 형식의 이미지로 변환하여 다운로드 기능을 추가할 수 있습니다.

<style>canvas { border: 1px solid black; }</style>
<div>
<a href="" download="image_canvas.webp">다운로드</a>
</div>

<canvas id="mycanvas"/>
<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 300;
canvas.height = 250;
var context = canvas.getContext('2d');

context.fillStyle = "blue";
context.beginPath();
context.arc(130,120,50,0,2*Math.PI);
context.fill();

// a 링크를 클릭하면 캔버스에 그려진 정보를
// webp 이미지로 다운로드 합니다.
document.querySelector('a').addEventListener(
  'click', event => event.target.href = canvas.toDataURL("image/webp")
);
</script>