用canvas.toDataURL()进行Base64编码Base64是一种将二进制数据编码为ASCII字符串的方法。在Canvas中，它用来将内存中以栅格图形式存在的画布数据转换为为可处理的数据：URL。这一转换方法为：
canvas.toDataURL(type>args)
我们将输出MIME类型指定为image/png或image/jpeg----前者为默认编码格式，也会在没有指定MIME类型或浏览器不支持所指定的类型时生效。备选参数args用于设置其他可能出现的参数——例如说，当MIME类型为image/jpeg时设置图像质董(有效值介于~)。
toDataURL()的结果为base64编码的字符串。以图7中大小为2像素x2像素，
宁波网站建设认为颜色为navy、teal、lime及yellow的画布为例，其字符串为：
data:image/png;base64,iVBORwOKGgoAAAANSUhEUgAAAAIAAAACCAYAMBytgOkAAAAFOlEOVQImOXBAQEAAACCIKb33ADLFql0PuYIemXXHEQAAAAASUVORI<5CYII=这类编码字符串可以变得非常长。以我们带镜面效果的明信片为例，其base64字符串的字节数不少于，可以填满此书(得需要每页50行、每行80字)!
那么，我们要toDataURL()来做什么？为什么要把二进制图像数据转化为字符串？答案很简单：通过toDataURL(),我们可以把临时性的内存画布永久性地放到HTML上，让用户或应用程序能够将它保存下来。
toDataURL()的第一步是将一个Canvas图形复制进HTMLImageElement。这个操作的原理在于src属性也可以是数据：URI(译者注：UniformResourceIdentifier,统一资源标识符)。必要的代码很短，除了需要一张已创建的动态画布外，还需要一个空白图像：
Cogycanvasontoimage rvarcanvas=document.createElement(MCANVASM):canvas.width=;canvas.height=;varcontext=canvas.getContext(_2d_);context.fillStyle='navy*;context.fillRect(0,0,canvas.width,canvas.height);docuiient.images[0].src=canvas.toDataURL():
代码中最重要的一行以粗体字标记，并展示了将画布复制成图像是多么简单的事情——只需要定义一个到文档中第一个图像的引用，然后将其src属性设置为canvas.toDataURL()就可以了。作为结果，我们得到一个常规img元素，此元素可以像浏览器中的其他图像一样被处理，并可以被保存为PNG。
通过为canvas元素加上一个简单的onclick事件句柄，我们来演示toDataURL()的另—种用法——直接输出数据为地址栏的URL,不过输出格式不再是PNG，而是JPEG:
document.images[0].onclick=function(){window.location=canvas.toDataURL('image/jpeg');}1这一方法的缺陷是有时候URL会长得可怕(还记得那万个字节吗？)，而且此格式的图像不会保留在缓存中，因此每次调用时都需要重新创建。这种用法最好是配合ocalstorage或XMLHttpRequest，以便Canvas图形可以在客户端及服务器端被保存及读取。toDataURL()还可以用在CSS样式表里，直接作为background-image或list-style-image的url。
本文由乐华网络编辑，转载请注明出处
宁波网站建设www.leseo.net
