借助toDataURL实现将HTML5 Canvas的内容保存为图片

互联网 18-6-22

将HTML5 Canvas的内容保存为图片主要思想是借助Canvas自己的API - toDataURL()来实现，具体实现如下，感兴趣的朋友可以参考下哈，希望对你有所帮助主要思想是借助Canvas自己的API - toDataURL()来实现，整个实现 HTML + JavaScript的代码很简单。

<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">  <p>  <canvas width=200 height=200 id="thecanvas"></canvas>  <button id="saveImageBtn">Save Image</button>  <button id="downloadImageBtn">Download Image</button>  </p>  </body>  </html>

运行效果如下：