从品牌网站建设到网络营销策划,从策略到执行的一站式服务
这篇文章主要介绍HTML5保存画布的方法是什么,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联一直秉承“诚信做人,踏实做事”的原则,不欺瞒客户,是我们最起码的底线! 以服务为基础,以质量求生存,以技术求发展,成交一个客户多一个朋友!为您提供成都网站设计、做网站、成都网页设计、微信小程序定制开发、成都网站开发、成都网站制作、成都软件开发、重庆APP开发公司是成都本地专业的网站建设和网站设计公司,等你一起来见证!好不容易在画布中绘制出酷炫的图形,应该把它保存起来吧。但不幸的是,画布中的这些图形本身不是真正的图片,不能直接保存。不幸中的万幸,Canvas API提供了toDataURL()方法,可以把画布中的图形转换为图片。
默认情况下,toDataURL()方法把图形转变成base64编码格式的png,然后返回Data URL数据。可以给toDataURL()传入MIME类型的参数,将画布转变成其它格式的图片。
有了Data URL数据后,就可将这些数据直接填充到元素里,或者直接从浏览器里下载它们。这里通过一个实例,来说明如何使用toDataURL()方法,把整个画布保存为图片。
HTML代码如下:
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保存画布的方法是什么的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联网站制作公司行业资讯频道!
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图