前端開發中有時需要將 canvas 的內容導出成圖片文件，例如供 CSS 使用，通常會使用 canvas.toDataURL，兼容性好並且簡單。
不過 canvas.toDataURL 顯然是非常低效的：首先要將圖像編碼成 PNG 格式，然後再編碼成 Base64，使用時又要解碼 Base64 和 PNG，一來一往浪費大量開銷，並且超長的 URL 也不美觀。當然，使用 canvas.toBlob 倒是可以避免 Base64 轉換和超長的 URL，但 PNG 轉換仍不可避免，而這是最耗性能的。
既然圖片只在本地使用，壓縮顯然毫無必要，爲什麼不使用更簡單的 BMP 格式？雖然 canvas 並不支持導出 BMP 格式，但主流瀏覽器都能顯示 BMP 圖片，而且 BMP 本身也支持透明通道，因此完全可以代替 PNG。
BMP 格式非常簡單，只需在像素數據前加個文件頭就可以。頭結構可參考 https://en.wikipedia.org/wiki/BMP_file_format#Example_2
其中有些字段是可選的，不用設置。也有幾個比較重要的：
-
BMP 默認從下往上顯示，高度取負可從上往下顯示
-
RGBA 掩碼的順序（wiki 文檔裏是 ARGB 的順序）
我們讓 BMP 的像素佈局和 canvas 保持一致，這樣可無需對現有數據做任何修改。通過 getImageData() 獲取數據，前面加上文件頭，即可變成一張 BMP 文件。
演示：https://www.etherdream.com/funnyscript/canvas-to-bmp/
雖然是 BMP 圖片，但和 PNG 一樣同樣支持透明度。
使用這個方案，有時甚至都可以不用 canvas，直接通過算法在內存裏畫出圖像，然後轉換成 BMP 進行顯示。