前端性能优化 —— 使用 BMP 图片代替 canvas.toDataURL
前端开发中有时需要将 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 进行显示。
最新文章
- linux系统下使用流行的版本管理工具 Git
- fineui刷新父页面
- xdebug所有相关方法函数详解（中文翻译版）
- Scalaz（4）－ typeclass：标准类型－Equal,Order,Show,Enum
- C# RGB和HSB相互转换
- Android 用adb pull或push 拷贝手机文件到到电脑上，拷贝手机数据库到电脑上，拷贝电脑数据库到手机上
- psp0
- 《Java编程那点事儿》读书笔记（六）——异常处理
- 独家分享——大牛教你如何学习Web前端开发
- JS计算两个日期时间之差之天数不正确
- 整合Spring.net到asp.net网站开发中初探
- WPF Multi-Touch 开发：高效开发模式
- Html的基本元素(Element)
- Sybase数据库的连接，JNDI配置，Hibernate配置
- 【Spring 核心】高级装配
- ssh项目访问路径及url请求书写
- form 表单提交返回值问题
- easyui 面板title 加东西
- CloudFoundry 之 IBMCloud 项目部署java例子
- Linux平台上轻松安装与配置Domino