HTML5画布画保存为一个图像

来源：互联网发布：ori什么软件编辑：程序博客网时间：2024/05/01 04:46

保存帆布画作为一个图像,我们可以将源图像的对象设置为图像数据的URL。从那时起,用户可以右键单击图像将其保存到本地计算机。或者,我们也可以打开一个新的浏览器窗口直接与图像数据的url,用户可以保存它。

注意:toDataURL()方法要求任何图像绘制到画布上驻留在web服务器上使用相同的域代码执行。如果不满足此条件,SECURITY_ERR抛出异常。

<!DOCTYPE HTML><html>  <head>    <style>      body {        margin: 0px;        padding: 0px;      }    </style>  </head>  <body>    <canvas id="myCanvas" width="578" height="200" style="display:none;"></canvas>    <img id="canvasImg" alt="Right click to save me!">    <script>      var canvas = document.getElementById('myCanvas');      var context = canvas.getContext('2d');      // draw cloud      context.beginPath();      context.moveTo(170, 80);      context.bezierCurveTo(130, 100, 130, 150, 230, 150);      context.bezierCurveTo(250, 180, 320, 180, 340, 150);      context.bezierCurveTo(420, 150, 420, 120, 390, 100);      context.bezierCurveTo(430, 40, 370, 30, 340, 50);      context.bezierCurveTo(320, 5, 250, 20, 250, 50);      context.bezierCurveTo(200, 5, 150, 20, 170, 80);      context.closePath();      context.lineWidth = 5;      context.fillStyle = '#8ED6FF';      context.fill();      context.strokeStyle = '#0000ff';      context.stroke();      // save canvas image as data url (png format by default)      var dataURL = canvas.toDataURL();      // set canvasImg image src to dataURL      // so it can be saved as an image      document.getElementById('canvasImg').src = dataURL;    </script>  </body></html>

0 0