好不容易在画布中绘制出酷炫的图形,应该把它保存起来吧。但不幸的是,画布中的这些图形本身不是真正的图片,不能直接保存。不幸中的万幸,Canvas API提供了toDataURL()方法,可以把画布中的图形转换为图片。
默认情况下,toDataURL()方法把图形转变成base64编码格式的png,然后返回Data URL数据。可以给toDataURL()传入MIME类型的参数,将画布转变成其它格式的图片。
有了Data URL数据后,就可将这些数据直接填充到<img>元素里,或者直接从浏览器里下载它们。这里通过一个实例,来说明如何使用toDataURL()方法,把整个画布保存为图片。
HTML代码如下:
<button onclick=toDataURL(image/png)>显示为png图片</button> <button onclick=toDataURL(image/jpeg)>显示为jpg图片</button> <canvas id=canvas width=200 height=200></canvas> <img id=image/>
Javascript代码如下:
function toDataURL(mime) { var canvas = document.getElementById(canvas); var image = document.getElementById(image); image.src = canvas.toDataURL(mime); }
上述代码中,当用户点击按钮“显示为png图片”或“显示为jpg图片”时,会调用toDataURL()方法,把画布中的内容生成图片,填充到img标签中供用户下载。
1、toDataURL()方法是画布元素自身的方法,而非画布上下文对象的方法。
2、toDataURL()方法保存图片的默认格式是image/png,浏览器对其他格式支持不是很好。如,Google Chrome浏览器41.0.2272.118版本也支持image/jpeg格式,但不支持image/gif格式。
2、现代浏览器已经支持在Canvas上右键,把画布另存为图片,不过会按默认的image/png格式保存。当然,可以通过编程,调用toDataURL()方法,传入MIME类型的参数,将其保存为其它格式。
原文地址:https://www.jb51.cc/html5/1199904.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。