前端开发中有时需要将 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 进行显示。

前端性能优化 —— 使用 BMP 图片代替 canvas.toDataURL的更多相关文章

  1. 前端性能优化:使用Data URI代替图片SRC

    日期:2013-7-6  来源:GBin1.com 提升页面大小的效率,不仅仅是取决于使用精灵或是压缩代码,给定页面的请求数量在前端性能中也占有了很不小的重量.减少请求可以让你的网站加载更快,而其中一 ...

  2. 前端性能优化--图片处理(Css Sprites 与 base64)

    前言: 近期研究着前端性能的优化方面的知识,并以博客记之.之前有相同系列的文章(前端性能优化--图片懒加载(lazyload image)),这次继续是关于图片的处理,css sprites 和 ba ...

  3. 移动H5前端性能优化指南

    移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...

  4. web前端性能优化指南(转)

    web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络 ...

  5. 移动H5前端性能优化指南(转载)

    移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...

  6. web前端性能优化指南

    web前端性能优化指南 web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loadin ...

  7. 移动H5前端性能优化指南[转]

    移动H5前端性能优化指南 米随随2015.01.23 移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首 ...

  8. 移动 H5(PC Web)前端性能优化指南

    原文地址https://zhuanlan.zhihu.com/p/25176904?utm_source=wechat_session&utm_medium=social&utm_me ...

  9. 第146天:移动H5前端性能优化

    移动H5前端性能优化 一.概述 1. PC优化手段在Mobile侧同样适用 2. 在Mobile侧我们提出三秒种渲染完成首屏指标 3. 基于第二点,首屏加载3秒完成或使用Loading 4. 基于联通 ...

随机推荐

  1. Protocol类型限制

    1.protocol类型限制 设定情景: 某攻城狮A希望找一个会做饭.洗衣服的女生做女朋友,有国企工作的优先. 满足条件的女生都可以向他发送消息 从题目中我们得到要求 会做饭 会洗衣服 有份好工作 @ ...

  2. Ansible自动化运维工具及其常用模块

    Ansible自动化运维工具及其常用模块 目录 Ansible自动化运维工具及其常用模块 一.Ansible简介 1. Ansible概述 2. Ansible作用 3. Ansible的工作模块 4 ...

  3. Oracle 撤回已经提交的事务

    在PL/SQL操作了一条delete语句习惯性的commit 了,因少加了where条件 导致多删了数据 1.查询视图v$sqlarea,找到操作那条SQL的时间(FIRST_LOAD_TIME) s ...

  4. 帆软报表(finereport)table块钻取,返回记住table块位置

    <1>首先table块加初始化事件,idex为参数,参数值为$tab_idexsetTimeout(function(){_g().getWidgetByName("tabpan ...

  5. 降维处理PCA

    要理解什么是降维,书上给出了一个很好但是有点抽象的例子. 说,看电视的时候屏幕上有成百上千万的像素点,那么其实每个画面都是一个上千万维度的数据:但是我们在观看的时候大脑自动把电视里面的场景放在我们所能 ...

  6. 高可用 & 七层负载均衡与四层负载均衡

    内容概要 高可用 七层负载均衡 和 四层负载均衡 内容详细 一.高可用 1.什么是高可用 一般是指2台机器启动着完全相同的业务系统,当有一台机器down机了,另外一台服务器就能快速的接管,对于访问的用 ...

  7. [入门到吐槽系列] Webix 10分钟入门 一 管理后台制作

    前言 本人是服务端程序员,同时需要兼职前端开发.常用的就是原生态的HTML.Javascript,也用过ExtJS.Layui.可是ExtJS变公司后非常难用.Layui上手还行,用过一段时间,会觉得 ...

  8. 小程序入门心得(不谈api)

    小程序入门 一.准备 首先先去微信公众平台注册一个小程序账号,去拿到一个AppID(没AppID也可以开发,只是有些功能会受限),注册成功后到开发设置获取自己的AppID,即使有AppID有些功能还是 ...

  9. v-model指令的学习

    v-model的原理 v-model="message"   ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓就相当于先用一个v-bind绑定一个 ...

  10. Json:Java对象和Json文本转换工具类

    Json 是一个用于 Java 对象 和 Json 文本 相互转换的工具类. 安装 下载源码 git clone https://github.com/njdi/durian.git 编译源码 cd ...