HTML5 保存画布

保存画布

好不容易在画布中绘制出酷炫的图形,应该把它保存起来吧。但不幸的是,画布中的这些图形本身不是真正的图片,不能直接保存。不幸中的万幸,Canvas API提供了toDataURL()方法,可以把画布中的图形转换为图片。

默认情况下,toDataURL()方法把图形转变成base64编码格式的png,然后返回Data URL数据。可以给toDataURL()传入MIME类型的参数,将画布转变成其它格式的图片。

有了Data URL数据后,就可将这些数据直接填充到<img>元素里,或者直接从浏览器里下载它们。这里通过一个实例,来说明如何使用toDataURL()方法,把整个画布保存为图片。

HTML代码如下:


  1. <button onclick=toDataURL("image/png")>显示为png图片</button>
  2. <button onclick=toDataURL("image/jpeg")>显示为jpg图片</button>
  3. <canvas id="canvas" width="200" height="200"></canvas>
  4. <img id="image"/>

Javascript代码如下:


  1. function toDataURL(mime) {
  2.    var canvas = document.getElementById("canvas");
  3.    var image = document.getElementById("image");
  4.    image.src = canvas.toDataURL(mime);
  5. }

上述代码中,当用户点击按钮“显示为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类型的参数,将其保存为其它格式。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》,并全部在 GitHub 上开源。

版权声明:本文出自 歪脖网 的《HTML宝典》,欢迎在线阅读,并提出宝贵意见。

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页