轉自https://segmentfault.com/a/1190000003853394
想要將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”