canvas.toDataURL()

canvas.toDataURL("image/png") 캔버스의 이미지를 PNG 형식의 데이터 URL로 변환합니다. HTML <canvas> 요소의 내용을 Base64 형식의 데이터 URL로 변환합니다. 이 URL은 브라우저에서 이미지나 파일로 사용할 수 있는 문자열입니다. 

const image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

toDataURL() 메서드에 "image/png"를 전달하면, 캔버스의 내용을 PNG 포맷의 이미지 데이터 URL로 변환합니다. 만약 다른 이미지 포맷(ex: "image/jpeg")을 원하면, 해당 포맷을 지정할 수 있습니다.

 

replace("image/png", "image/octet-stream")는 데이터 URL의 MIME 타입을 image/png에서 image/octet-stream으로 변경하는 역할을 합니다. "image/png"는 브라우저에서 이미지를 표시할 때 사용하는 MIME 타입이고, "image/octet-stream"은 브라우저에게 이 데이터를 파일로 다운로드하라고 지시하는 MIME 타입입니다. 브라우저는 octet-stream 타입을 파일로 인식하고, 바로 표시하지 않고 다운로드 동작을 트리거합니다.

 

image 를 console.log(image) 해보면, 아래와 같습니다.

 

image:  data:image/octet-stream;base64,iVBORw0KGgoAAAANSUhEUgAAAiUAAALcCAYAAAA48MA6AAAAAXNSR0IArs4c6QAAIABJREFUeF6svYnTvm9dl/98LdMWy9Q2sBTZBRTUWFwCFFQwggBNzRCTzZimpu3vKq2mmmmkxTE....

 

이제 image 변수에 저장된 데이터 URL은 data:image/octet-stream;base64,로 시작하며, 이 데이터를 파일로 다운로드할 수 있게 변환합니다. 즉, replace()을 이용하여, 데이터 URL의 MIME 타입을 image/png에서 image/octet-stream으로 변경하여, 브라우저가 이를 이미지가 아닌 파일로 인식하고 다운로드하도록 만듭니다.