HTML5 保存画布

保存画布

好不容易在画布中绘制出酷炫的图形，应该把它保存起来吧。但不幸的是，画布中的这些图形本身不是真正的图片，不能直接保存。不幸中的万幸，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类型的参数，将其保存为其它格式。

关于作者

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

HTML5 保存画布相关推荐

selenium如何操作HTML5的画布canvas上的元素
话不多少,上图如下,下图红色框内是一个html5的画布,我们要像操作右上角的保存和数据视图的时候是无法公共selenium的普通定位操作到的,那该怎么办呢? 我们先new一个Selenium的acti ...
刮刮乐html5效果擦除,利用HTML5的画布Canvas实现刮刮卡效果
先给大家展示效果: 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. ...
入门讲解HTML5的画布功能（1）
个人认为在HTML5中画布功能其实并不实用,当然趋势是在FLASH不没落的情况下.通过学习我发现画布功能能够实现的东西非常有情调,但是前端人员也要有一定的审美和构思才能做出有意思的东西,因为canva ...
html5实例异步图片加载,javascript – 你如何处理html5的画布图像加载异步？
我一直在学习html5的画布.因为图像可能需要一段时间才能加载,所以适当的技术似乎是在尝试绘制图像之前使用onload来等待图像加载.所以: var fig = document.getElement ...
h5画布动画_如何使用CCapture保存画布动画
h5画布动画 by Ibby EL-Serafy 由Ibby EL-Serafy 如何使用CCapture保存画布动画 (How to save canvas animations with CCap ...
html 画布重置,html5清空画布的方法有哪些
html5清空画布的方法有哪些发布时间:2020-07-21 11:24:24 来源:亿速云阅读:89 作者:Leah 本篇文章给大家分享的是有关html5清空画布的方法有哪些,小编觉得挺实用的, ...
html5好看画布,10个会让你惊叹不已的HTML5画布(CANVAS)技术应用演
下面的这是10个HTML5画布(canvas)技术效果演示一定会让你惊叹不已.当然,也许你也会认为,过去在老式浏览器中用flash技术也能实现这样的效果.但是,下面的这些演示只使用了现代浏览器里自带技 ...
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解大家好,又见面了,感觉我上一篇博客对部分同学都挺有帮助的,于是我决定继续写下去,会继续的解析知识点让大家更容易理解,希望能给大家 ...
html5画布添加输入框,JS，HTML5 - 在画布上添加文本输入值作为fillText
我试图用HTML5 canvas来玩弄一点,而我只是在制作一个有趣的小型web应用程序,但我已经陷入困境.JS,HTML5 - 在画布上添加文本输入值作为fillText 我希望用户输入文本到文本框, ...

HTML5 保存画布

保存画布

HTML5 保存画布相关推荐

最新文章

热门文章