주요 아이디어는 이를 달성하기 위해 Canvas의 자체 API인 toDataURL()을 사용하는 것입니다. HTML JavaScript 코드는 매우 간단합니다. 코드 복사코드는 다음과 같습니다. >< 메타 http-equiv="X-UA-Compatible" content="chrome=1"> window.onload = function() { <br>draw(); <br>var saveButton = document.getElementById("saveImageBtn"); <br>bindButtonEvent(saveButton, "click", saveImageInfo) <br>var dlButton = document.getElementById("downloadImageBtn"); <br>bindButtonEvent(dlButton, "click", saveAsLocalImage); <br>function draw(){ <br>var canvas = document.getElementById("thecanvas"); <br>var ctx = canvas. getContext(" 2d"); <br>ctx.fillStyle = "rgba(125, 46, 138, 0.5)"; <br>ctx.fillRect(25,25,100,100) <br>ctx.fillStyle = "rgba(0) , 146, 38, 0.5)"; <br>ctx.fillRect(58, 74, 125, 100); <br>ctx.fillStyle = "rgba( 0, 0, 0, 1)"; // 검정색 <br>ctx .fillText("Gloomyfish - Demo", 50, 50); <br>} <br>functionbindButtonEvent(element, type, handler) <br>{ <br>if(element.addEventListener) { <br> element.addEventListener(유형, 핸들러, false) <br>} else { <br>element.attachEvent('on' 유형, 핸들러) <br>} <br>} <br>function saveImageInfo() <br> { <br>var mycanvas = document.getElementById("thecanvas"); <br>var image = mycanvas.toDataURL("image/png") <br>var w=window.open('about:blank',' 캔버스의 이미지 '); <br>w.document.write("<img src='" image "' alt='from canvas'/>") <br>} <br>function saveAsLocalImage () { <br> var myCanvas = document.getElementById("thecanvas"); <br>// 교체하지 않으면 DOM 18 예외가 발생하므로 여기가 가장 중요한 부분입니다. <br>// var image = myCanvas.toDataURL ("image /png").replace("image/png", "image/octet-stream;Content-Disposition: attachment;filename=foobar.png") <br>var image = myCanvas.toDataURL("image/ png") .replace("image/png", "image/octet-stream"); <br>window.location.href=image; // 로컬에 저장됩니다 <br>} <br></ script> <br> </head> <br><body bgcolor="#E6E6FA"> <br><div> <br><canvas width=200 height=200 id="thecanvas"> </canvas> <br><button id="saveImageBtn">이미지 저장</button> <br><button id="downloadImageBtn">이미지 다운로드</button> ; <br>< ;/body> <br></html> <br><br><br><br>작동 효과는 다음과 같습니다<br> </div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
