Canvas 导出 data:URL 数据 - Canvas 基础教程

如果要把画布 ( canvas ) 导出为 data:URL 格式的数据，可以使用 canvas.toDataURL() 方法

toDataURL() 方法

canvas.toDataURL() 方法用于获取 canvas 对象中所包含图片编码后的 data: URL 字符串

语法

toDataURL(type, ...args)

参数	说明
type	可选，返回的图片的 MIME 类型，默认是 `image/png`
...args	其它额外参数

返回值

返回一个 data: URL ,根据 type 参数指定的类型将包含在 canvas 中的图片文件编码成字符串形式, type 参数的默认值为 image/png

如果该 canvas 的宽度或长度是 0,则会返回字符串 data:,
如果指定的 type 参数不是 image/png ,但返回的字符串是以 data:image/png 开头的,则所请求的图片类型不支持
Chrome支持 image/webp 类型
如果 type 参数的值为 image/jpeg 或 image/webp
1. 第二个参数的值如果在 0.0 和 1.0 之间的话,会被看作是图片质量参数
2. 如果第二个参数的值不在 0.0 和 1.0 之间,则会使用默认的图片质量

范例

将图像数据赋值给 <img> 显示出来

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="300" height="100">
</canvas>

导出后的图像

<div id="export-wrap"></div>

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");
ctx.fillStyle="green"
ctx.fillRect(10,10,100,50);
var url = c.toDataURL();

var newImg = document.createElement("img");
newImg.src = url;
document.getElementById("export-wrap").append(newImg);

</script>

运行结果如下

导出后的图像