欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > HTML >内容正文

HTML

将HTML5 Canvas的内容保存为图片

发布时间：2025/6/15 HTML 43 豆豆
生活随笔 收集整理的这篇文章主要介绍了 将HTML5 Canvas的内容保存为图片 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

主要思想是借助Canvas自己的API - toDataURL()来实现，整个实现

HTML + JavaScript的代码很简单。

[html] view plaincopy
  • <html>  
  • <meta http-equiv="X-UA-Compatible" content="chrome=1">  
  • <head>  
  • <script>  
  •         window.onload = function() {  
  •             draw();  
  •             var saveButton = document.getElementById("saveImageBtn");  
  •             bindButtonEvent(saveButton, "click", saveImageInfo);  
  •             var dlButton = document.getElementById("downloadImageBtn");  
  •             bindButtonEvent(dlButton, "click", saveAsLocalImage);  
  •         };  
  •             function draw(){  
  •                 var canvas = document.getElementById("thecanvas");  
  •                 var ctx = canvas.getContext("2d");  
  •                 ctx.fillStyle = "rgba(125, 46, 138, 0.5)";  
  •                 ctx.fillRect(25,25,100,100);   
  •                 ctx.fillStyle = "rgba( 0, 146, 38, 0.5)";  
  •                 ctx.fillRect(58, 74, 125, 100);  
  •                 ctx.fillStyle = "rgba( 0, 0, 0, 1)"; // black color  
  •                 ctx.fillText("Gloomyfish - Demo", 50, 50);  
  •             }  
  •               
  •             function bindButtonEvent(element, type, handler)  
  •             {  
  •                    if(element.addEventListener) {  
  •                       element.addEventListener(type, handler, false);  
  •                    } else {  
  •                       element.attachEvent('on'+type, handler);  
  •                    }  
  •             }  
  •               
  •             function saveImageInfo ()   
  •             {  
  •                 var mycanvas = document.getElementById("thecanvas");  
  •                 var image    = mycanvas.toDataURL("image/png");  
  •                 var w=window.open('about:blank','image from canvas');  
  •                 w.document.write("<img src='"+image+"' alt='from canvas'/>");  
  •             }  
  •   
  •             function saveAsLocalImage () {  
  •                 var myCanvas = document.getElementById("thecanvas");  
  •                 // here is the most important part because if you dont replace you will get a DOM 18 exception.  
  •                 // var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream;Content-Disposition: attachment;filename=foobar.png");  
  •                 var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");   
  •                 window.location.href=image; // it will save locally  
  •             }  
  •         </script>  
  • </head>  
  • <body bgcolor="#E6E6FA">  
  •     <div>  
  •         <canvas width=200 height=200 id="thecanvas"></canvas>  
  •         <button id="saveImageBtn">Save Image</button>  
  •         <button id="downloadImageBtn">Download Image</button>  
  •     </div>  
  • </body>  
  • </html>  

    • 运行效果如下：



    总结

    以上是生活随笔为你收集整理的将HTML5 Canvas的内容保存为图片的全部内容，希望文章能够帮你解决所遇到的问题。

    如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。