canvas保存为图像文件

在画布中绘制完成一幅图形或图像后，很多时候我们需要将该图形或图像保存到文件中，使用Canvas API当然可以完成这最后的一步工作。
Canvas API保存文件的原理实际上是把当前的绘画状态输出到一个data Url地址所指向的数据中的一个过程，所谓data Url，是指目前大多数浏览器能够识别的一种base64位编码的Url，主要用于小型的、可以在网页中直接嵌入，而不需要从外部文件嵌入的数据，譬如img元素中的图像文件等。data Url的格式类似于“data：image/png; base64, iVBORw0KGgoA AAANSUhEUgAAAAoAAAAK…etc”，目前受到了大多数浏览器的支持。
Canvas API使用toDataURL方法把绘画状态输出到一个data URL，然后重新装载，客户可直接保存装载后的文件。
toDataURL的使用方法如下所示：

canvas.toDataURL(type);

该方法使用一个参数type，表示要输出数据的MIME类型。

使用Canvas API将图像输出到data URL示例：

<canvas id="test" width="600" height="400"></canvas>

function draw(id)
{
    var canvas = document.getElementById(id);
    if (canvas == null)
        return false;
    var context = canvas.getContext('2d');
    context.fillStyle = "rgb(0, 0, 255)";
    context.fillRect(0, 0, canvas.width, canvas.height);
    context.fillStyle = "rgb(255, 255, 0)";
    context.fillRect(10, 20, 50, 50);
    window.location =canvas.toDataURL("image/jpeg");
}
draw('test')