主なアイデアは、Canvas 独自の API (toDataURL()) を使用してこれを実現することです。実装全体の HTML JavaScript コードは非常にシンプルです。 コードをコピーしますコードは次のとおりです。 ><メタ http-equiv="X-UA-互換" content="chrome=1"> 🎜>draw (); <br>var saveButton = document.getElementById("saveImageBtn"); <br>bindButtonEvent(saveButton, "click", saveImageInfo); <br> bindingButtonEvent(dlButton, "click", saveAsLocalImage); <br>functiondraw(){ <br>var Canvas = document.getElementById("thecanvas"); getContext(" 2d"); <br>ctx.fillStyle = "rgba(125, 46, 138, 0.5)"; <br>ctx.fillRect(25,25,100,100); , 146, 38, 0.5)"; <br>ctx.fillRect(58, 74, 125, 100); <br>ctx.fillStyle = "rgba( 0, 0, 0, 1)"; // 黒色 <br>ctx .fillText("Gloomyfish - デモ", 50, 50); <br>} <br>function bindingButtonEvent(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='キャンバスから'/>"); <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></スクリプト> <br> </head> <br><div> <br> <canvas width=200 height=200 id="thecanvas"> </canvas> <br><button id="saveImageBtn">画像を保存</button> <br><button id="downloadImageBtn"> ; <br></body> <br></html> <br><br><br><br>操作の効果は次のとおりです<br><br> </div>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
