HTML5怎样保留画布？HTML5保留画布要领【html5教程】

本篇文章给人人带来的内容是关于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保留画布要领的悉数引见，假如您想相识更多有关Html5视频教程，请关注ki4网。

以上就是HTML5怎样保留画布？HTML5保留画布要领的细致内容，更多请关注ki4网别的相干文章！