您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

HTML5如何保存画布?HTML5保存画布方法

2024/8/10 13:46:46发布44次查看
本篇文章给大家带来的内容是关于html5如何保存画布?html5保存画布方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
好不容易在画布中绘制出酷炫的图形,应该把它保存起来吧。但不幸的是,画布中的这些图形本身不是真正的图片,不能直接保存。不幸中的万幸,canvas api提供了todataurl()方法,可以把画布中的图形转换为图片。
默认情况下,todataurl()方法把图形转变成base64编码格式的png,然后返回data url数据。可以给todataurl()传入mime类型的参数,将画布转变成其它格式的图片。
有了data url数据后,就可将这些数据直接填充到a1f02c36ba31691bcfe87b2722de723b元素里,或者直接从浏览器里下载它们。这里通过一个实例,来说明如何使用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保存画布方法的全部介绍,如果您想了解更多有关html5视频教程,请关注。
以上就是html5如何保存画布?html5保存画布方法的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product