canvas保存为图像文件

本文由清尘发表于2018-04-01 11:21最后修改于2018-05-02属于HTML/CSS分类

在画布中绘制完成一幅图形或图像后,很多时候我们需要将该图形或图像保存到文件中,使用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')