HTML5怎样保留画布？HTML5保留画布办法-

本篇文章给大家带来的内容是对于HTML5怎样保留画布？HTML5保留画布办法，有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。 本篇文章给大家带来的内容是对于HTML5怎样保留画布？HTML5保留画布办法，有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。

好不容易在画布中绘制出酷炫的图形，应当把它保留起来吧。但不幸的是，画布中的这些图形自身不是真正的图片，不克不及直接保留。不幸中的万幸，Canvas API供给了toDataURL()办法，可以把画布中的图形转换为图片。

默许状况下，toDataURL()办法把图形改变成base64编码格局的png，然后返回Data URL数据。可以给toDataURL()传入MIME类型的参数，将画布改变成其它格局的图片。

有了Data URL数据后，就可将这些数据直接添补到元素里，或者直接从阅读器里下载它们。这里通过一个实例，来注明怎样运用toDataURL()办法，把整个画布保留为图片。

HTML代码如下：

显示为png图片
显示为jpg图片

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保留画布办法的细致内容，更多请关注 百分百源码网 其它相干文章！