将Html5 Canvas画图转换为png图片_H5之家 - 中国HTML5教程资源分享第一站

canvas教程

将Html5 Canvas画图转换为png图片

字号+ 作者：H5之家来源：H5之家 2015-09-20 15:57 我要评论( )

将Html5 Canvas画图转换为png图片 html5 canvas提供了`toDataURL(mimetype)`方法。这个方法在Opera，Firefox，Safari等浏览器中支持。需要注意这个会有安全问题

html5 canvas提供了toDataURL(mimetype)方法。这个方法在Opera，Firefox，Safari等浏览器中支持。需要注意这个会有安全问题。

如下测试html代码：

<!doctype html> <html> <body> <canvas id="cavas" width="200" height="200"></canvas> <script> window.onload = function() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.fillStyle = "green"; context.fillRect(50, 50, 100, 100); // no argument defaults to image/png; image/jpeg, etc also work on some // implementations -- image/png is the only one that must be supported per spec. window.location = canvas.toDataURL("image/png"); } </script> </body> </html>

通常我们在服务器画图后，也可能需要在服务器端生成类似的图片，比如报表需求中。这时候我们就可以只生成客户端图片，服务器端图片通过将客户端图片数据POST上去后保存成静态图片。

标签：html5,Canvas