HTML5 매뉴얼

3-2-3.이미지 URL

캔버스에 그려진 그림은 이진 데이터이다. 이진값은 크기는 작지만 저장이나 전달이 어렵다. 그래서 문자열 형태로 디코딩하여 변환할 필요가 있는데 다음 메서드로 이 변환을 수행한다. 변환 대상은 캔버스 전체의 이미지이므로 컨텍스트의 메서드가 아니라 캔버스의 메서드이다.

toDataURL(type, para)

type은 인코딩 방법을 지정하는데 생략시 image/png가 적용된다. image/jpeg인 경우는 두번째 인수로 0.0 ~ 1.0 사이의 압축 품질을 지정한다. 캔버스의 이미지는 사진이 아니라 그림이므로 비손실 포맷인 PNG를 사용하는 것이 합리적이다. 이미지는 Base64 알고리즘으로 인코딩되며 형태는 다음과 같다. 디코딩 문자열안에 이미지가 들어 있다.

data:MIME타입;base64, 디코딩문자열

이미지를 문자열 형태로 변환하면 여러 가지 용도로 활용할 수 있다. 문자열이므로 데이터베이스에 저장할 수도 있고 URL 형태이므로 다른 창에 열 수도 있다. 가장 간편한 방법은 img 태그의 src 속성에 이 문자열을 대입하여 출력하는 것이다. 캔버스를 문자열로 변환한 후 다시 이미지로 출력해 보자.

dataurl.html

<!DOCTYPE html>

<head>

<title>dataurl</title>

<style>

canvas {border:5px solid magenta;}

</style>

</head>

<body>

이 브라우저는 캔버스를 지원하지 않습니다.

</canvas>

var canvas;

var ctx;

window.onload = function() {

canvas = document.getElementById("canvas");

if (canvas == null || canvas.getContext == null) return;

ctx = canvas.getContext("2d");

draw();

}

function draw() {

ctx.fillRect(2,2,5,5);

var data = canvas.toDataURL();

alert(data);

var image = document.getElementById("image");

image.src = data;

}

</script>

</body>

</html>

9 * 9 크기의 아주 작은 캔버스에 사각형 하나를 그렸다. 캔버스가 크면 인코딩한 문자열이 어마 어마하게 길어지므로 초소형 캔버스에 그렸다. 이 캔버스의 이미지를 문자열로 인코딩하여 대화상자로 출력했다.

이 문자열 안에 사각형 이미지가 들어 있다. 과연 그런지 이미지 엘리먼트의 src 속성에 다시 대입하여 재출력했다. 확인 버튼을 누르면 캔버스 옆에 조그마한 이미지가 나타난다.

이미지 엘리먼트 뿐만 아니라 CSS의 배경 이미지, 목록의 뷸릿 등도 인코딩된 문자열로부터 이미지를 인식한다. 이미지 파일을 준비하지 않더라도 오프스크린 캔버스에서 배경 이미지나 뷸릿 이미지를 만들어 사용할 수도 있다. window.open 메서드로 캔버스의 내용을 다른 창으로 열어 확인해 볼 수도 있다.

canvastoimage.html

<!DOCTYPE html>

<head>

<title>canvastoimage</title>

<style>

canvas {border:5px solid magenta;}

</style>

</head>

<body>

<form>

</form>

이 브라우저는 캔버스를 지원하지 않습니다.

</canvas>

var canvas;

var ctx;

window.onload = function() {

canvas = document.getElementById("canvas");

if (canvas == null || canvas.getContext == null) return;

ctx = canvas.getContext("2d");

draw();

}

function draw() {

var brush = ctx.createLinearGradient(0, 0, 0, canvas.height);

brush.addColorStop(0, "yellow");

brush.addColorStop(1, "red");

ctx.fillStyle = brush;

ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.beginPath();

ctx.arc(200,100,80,0,2*Math.PI, true);

var brush = ctx.createRadialGradient(200,100,0,200,100,80);

brush.addColorStop(0, "white");

brush.addColorStop(1, "gray");

ctx.fillStyle = brush;

ctx.fill();

}

var capture = document.getElementById("capture");

capture.addEventListener("click", function(e) {

window.open(canvas.toDataURL(), "Capture",

"width=" + canvas.width +",height="+canvas.height);

});

</script>

</body>

</html>

그럴듯한 그래디언트 이미지를 그렸다. 캔버스는 이미지가 아니므로 이 자체로는 파일로 저장할 수 없다. 새로운 창을 열어 캔버스를 이미지로 표시한다.

이렇게 되면 창에 표시된 이미지를 마우스 오른쪽 버튼을 눌러 다른 이름을 주어 파일 형태로 저장할 수도 있다.