HTML5如何保存画布？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类型的参数，将其保存为其它格式。

以上就是对HTML5如何保存画布？HTML5保存画布方法的全部介绍，如果您想了解更多有关@H_406_24@HTML5视频教程，请关注PHP中文网。

以上就是HTML5如何保存画布？HTML5保存画布方法的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！