在支持Canvas的浏览器中，实现图片下载非常简单，本文介绍了实现下载的具体方法。

关键API

HTMLCanvasElement.toBlob() 方法创造Blob对象，用以展示canvas上的图片；这个图片文件可以被缓存或保存到本地，由用户代理端自行决定。如不特别指明，图片的类型默认为 image/png，分辨率为96dpi。

void canvas.toBlob(callback, type, encoderOptions);

参数

callback

回调函数，可获得一个单独的Blob对象参数。

type (可选)

DOMString类型，指定图片格式，默认格式为image/png

encoderOptions (可选)

Number类型，值在0与1之间，当请求图片格式为image/jpeg或者image/webp时用来指定图片展示质量。如果这个参数的值不在指定类型与范围之内，则使用默认值，其余参数将被忽略

返回值

无

示例

本例保存为默认格式（image/png），其它参数类型不再赘述。下面是示例代码：

<canvas id="canvas"></canvas>
<div>
  <a href="#" id="download">download</a>
</div>

var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
var download = document.getElementById('download')

canvas.width = 300
canvas.height = 300

ctx.arc(150, 150, 150, 0, Math.PI * 2)
ctx.fill()

canvas.toBlob(function(blob) {
  download.href = URL.createObjectURL(blob)
  download.download = "canvas-download.png"
})