canvas元素內容生成圖像文件

準備工做

想要將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」