准备工作
想要将canvas元素当前显示的内容生成为图像文件，我们首先要获取canvas中的数据,在HTML5 <canvas>元素的标准中提供了toDataURL()的方法可以将canvas中的内容生成为指定格式的DataURL,使用方法如下:
// 假设有一个id为cvs的canvas元素
var dataurl = document.getElementById('cvs').toDataURL('image/png');我们现在需要将DataURL生成为一个png类型的图像文件，并且这个操作是在本地完成的，不需要服务器帮助生成文件。以下提供两种方法：
方法一 利用HTML5 <a>标签的download属性
在HTML5标准中，<a>标签拥有一个新的属性download，download属性用来指明该超链接指向的目标是应该被下载的文件，例如
<a href="http://www.segmentfault.com/" download>下载</a>download属性可以被赋值，用来指明下载文件的名称，例如
<a href="http://www.segmentfault.com/" download="index.html">下载</a>示例
现在，我们可以通过将DataURL赋值给a标签的href属性，并且使用download属性使其转变为可下载的图片。
var dataurl = document.getElementById('cvs').toDataURL('image/png');
var a = document.createElement('a');
a.href = dataurl;
a.download = "sample";
a.click();兼容性
目前只有Chrome和FireFox支持download属性
方法二 修改DataURL的Mime-type
如果我们直接将获得的DataURL赋值给a标签的href属性，在点击链接后浏览器只会在新窗口打开图片，并不会直接执行下载。我们可以修改DataURL的Mime-type为octet-stream，强制让浏览器下载。
示例
var dataurl = document.getElementById('cvs').toDataURL('image/png').replace("image/png", "image/octet-stream");
var tmpa = document.createElement('a');
a.href = dataurl;
a.target = "_blank";
a.click();兼容性
这个方法对于大部分主流浏览器都可用，但是octet-stream并不包含文件名和扩展名的信息，所以使用这个方法下载下来的文件是没有扩展名的文件，浏览器可能默认的命名为“下载”或者“unknown”