之前我曾介紹過如何將HTML5畫布(canvas)內容轉變成圖片形式，方法十分簡單。但後來我發現只將canvas內容轉變成圖片輸出還不夠，如何能將轉變後的圖片儲存到本地呢？

其實，這個方法也是非常簡單的，幾乎不用額外的程式設計知識。但我們可以更完美些，下面我將使用canvas2image.js, base64.js這兩個指令碼實現更強大的canvas->圖片->本地的過程。

在下面的方框內你可以用滑鼠繪製任意的圖案，試一下吧，然後點選“儲存…”按鈕，瀏覽器將會提示你儲存下載圖片。或者點選”轉換成…”，然後右鍵點選畫布，可以看到瀏覽器右鍵選單裡有“儲存圖片..”一項。

使用HTML5畫布技術，你可以在瀏覽器客戶端用JavaScript繪製出各種美麗酷炫的圖案，這些圖案是不能直接儲存的，本身也不是圖片形式。
幸運的是，畫布(canvas)物件有一個非常有用的方法:toDataURL()

var strDataURI = oCanvas.toDataURL();
// returns "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..."

而且，如果你給toDataURL()傳入mine型別的引數，你還可以將畫布轉變成其它格式的圖片。

var strDataURI = oCanvas.toDataURL("image/jpeg");
// returns "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAA..."
 

現在，有了 Data URL資料後，我們可將這些資料直接填充到<img> 元素裡，或者我們可以直接從瀏覽器裡下載它們。

上面我提到的兩個js包也就是封裝了一些方便的方法：

/*
 * Canvas2Image.saveAsXXXX = function(oCanvasElement, bReturnImgElement, iWidth, iHeight) { ... }
 */

var oCanvas = document.getElementById("thecanvas");

Canvas2Image.saveAsPNG(oCanvas);  // 這將會提示使用者儲存PNG圖片
 

Canvas2Image.saveAsJPEG(oCanvas); // 這將會提示使用者儲存JPG圖片

Canvas2Image.saveAsBMP(oCanvas);  // 這將會提示使用者儲存BMP圖片


// 返回一個包含PNG圖片的<img>元素
var oImgPNG = Canvas2Image.saveAsPNG(oCanvas, true);   

// 返回一個包含JPG圖片的<img>元素
var oImgJPEG = Canvas2Image.saveAsJPEG(oCanvas, true); 
                                                       
// 返回一個包含BMP圖片的<img>元素
var oImgBMP = Canvas2Image.saveAsBMP(oCanvas, true); 


// 這些函式都可以接受高度和寬度的引數
// 可以用來調整圖片大小

// 把畫布儲存成100x100的png格式
Canvas2Image.saveAsPNG(oCanvas, false, 100, 100);

你也許注意到了saveAsBMP這個函式，實際上沒有瀏覽器直接支援轉化成BMP格式，但我們可以借用getImageData()方法實現對它的支援，這個方法提供給我們從畫布裡直接讀取原始畫素的功能。

有了這些資料，我們可以構造出BMP格式圖片(這種格式非常的簡單)。

對於大個的圖片，轉化成BMP格式會需要幾秒鐘的時間，但小圖片就非常的快了，不會有延遲的感覺。

長按圖片識別圖中二維碼(或搜尋微信公眾號FrontEndStory)關注“前端那些事兒”，帶你瞭解最新的前端技術。