PHP前端开发

如何使用canvas.toDataURL()将HTML Canvas保存为图像？

百变鹏仔 3个月前 (09-22) #HTML

文章标签如何使用

使用 toDataURL() 方法获取画布的图像数据URL。它将绘图（画布）转换为64位编码的PNG URL。

示例

您可以尝试运行以下代码将画布保存为图像 −

<!DOCTYPE HTML><html>   <head>   </head>   <body>      <canvasid = "newCanvas" width = "450" height = "300"></canvas>      <script>         var canvas = document.getElementById(&#39;newCanvas&#39;);         var ctx = canvas.getContext(&#39;2d&#39;);         // draw any shape         ctx.beginPath();         ctx.moveTo(120, 50);         ctx.bezierCurveTo(130,100, 130, 250, 330, 150);         ctx.bezierCurveTo(350,180, 320, 180, 240, 150);         ctx.bezierCurveTo(320,150, 420, 120, 390, 100);         ctx.bezierCurveTo(130,40, 370, 30, 240, 50);         ctx.bezierCurveTo(220,7, 350, 20, 150, 50);         ctx.bezierCurveTo(250,5, 150, 20, 170, 80);         ctx.closePath();         ctx.lineWidth = 3;         ctx.fillStyle =&#39;#F1F1F1&#39;;         ctx.fill();         ctx.stroke();         var dataURL =canvas.toDataURL();      </script>   </body></html>

文章推荐

本站为非盈利性网站,不接受任何赞助和广告。

特别声明：本网站尊重并保护知识产权，根据《信息网络传播权保护条例》，如果我们转载的作品侵犯了您的权利,请在一个月内通知我们，我们会及时删除。 | 举报邮箱：344225443@qq.com

互联网ICP备案：陕ICP备2023000799号 Copyright 2023-2024 sharedbk.com All rights reserved | (c)2008-2024 共享博客