HTML5 Canvas toDataURL()

HTML5 Canvas toDataURL() 기능을 사용하여 HTML5 canvas의 내용을 추출할 수 있습니다. toDataURL() 함수에서 반환된 데이터는 포함된 그래픽 데이터를 코드화된 URL로 표시할 수 있는 문자열입니다.

온라인 예제

canvas toDataURL() 기능을 사용하여 HTML5 canvas의 내용. 완성된 코드 예제는 다음과 같습니다:

var canvas = document.getElementById("ex1");
var dataUrl = canvas.toDataURL();

toDataURL() 함수에서 반환된 데이터는 포함된 그래픽 데이터를 코드화된 URL로 표시할 수 있는 문자열입니다. 문자열은 다음과 같이 textarea 요소에 표시될 수 있습니다:

var canvas = document.getElementById("ex1");
var dataUrl = canvas.toDataURL();
document.getElementById("textArea").value = dataUrl;

또한 새 창에서 데이터를 표시할 수 있습니다. 이 작업을 수행하는 코드는 다음과 같습니다:

<canvas id="ex1" width="500" height="100" style="border:　1px solid #cccccc;">
　　　　HTML5　Canvas not supported
</canvas><script>
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.font　　　　　　=　"36px　Verdana";
context.fillStyle　=　"#000000";
context.fillText("HTML5　Canvas　Text",　50,　50);
context.font　　　　　　　　=　"normal　36px　Arial";
context.strokeStyle　=　"#000000";
context.strokeText("HTML5　Canvas　Text",　50,　90);
</script>

이하에 일부 그래픽이 포함된 캔버스 예제가 있습니다. 캔버스 아래에는 두 개의 버튼이 있으며, 캔버스에서 그린 그래픽을 버튼 아래의 텍스트 영역에 표시하거나 새 창에서 표시할 수 있습니다.