4.9 保存画布

好不容易在画布中绘制出酷炫的图形，应该把它保存起来吧。但不幸的是，画布中的这些图形本身不是真正的图片，不能直接保存。不幸中的万幸，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标签中供用户下载。