arraybuffer处理pictures

利用 arraybuffer 来处理图片,包含图片的路径名称与数据,并把多张图片合并一个 arraybuffer 并生成单张图片,以及图片的解析。

前提了解

之前看到的一个H5四大导师拯救麦渣 特别吸引我,使用 canvas 配合 xml 来构建页面的效果真的非常棒,但代码太多一直都没能提取出来做个React框架。

然后我简单的总结下这个H5使用 arraybuffer 来提取图片信息的方法,做个笔记啦。
具体代码请看 buffer-images

ArrayBuffer对象、TypedArray对象、DataView对象是JavaScript操作二进制数据的一个接口,具体了解有阮一峰大神很好的教程。

合并图片信息

利用 arraybuffer 来处理图片,包含图片的路径名称与数据,并把多张图片合并一个 arraybuffer 并生成单张图片。

图片路径名称

为兼容中文,使用 4 位字节来存储为Uint32Array,而图片信息为Uint8Array,其中有 new ArrayBuffer(l*4+4+4+q)
即 图片路径名称的长度lx4 + 前面数据长度记录为4 + 图片信息数据长度为4 + 图片数据

合并方式

利用html服务器

具体可看 pics2ab.html, 由于是用 XMLHttpRequest 来加载图片必须要有服务器环境。

以及页面生成的图片不能直接保存,我的方式是用火狐浏览器打开页面,并查看时可保存,更改文件后缀即可(jpg或png 都行)。

利用nodejs

读取你需要的图片来合成

node index.js

读取目录下的图片来合成

node main.js

解析图片

用上面的方式合成的图片信息,就可以用反向的方式来生成。
请看案例代码 index.html


   转载规则


《arraybuffer处理pictures》 Sterne Lee 采用 知识共享署名 4.0 国际许可协议 进行许可。
 上一篇
react 开发手册 react 开发手册
总结 react 开发是需要用到的框架和功能模块,从模块安装、脚手架、网络请求模块,到状态管理、数据库,以及原生开发的组件与UI,都简单地做了记录,方便开发时查询。 语法篇 ES6 es6 api babel 阮一峰的博客 JSX
2017-09-17 Sterne Lee
下一篇 
使用 vagrant 作为前端开发环境 使用 vagrant 作为前端开发环境
Vagrant是一个基于Ruby的工具,用于创建和部署虚拟化开发环境。它 使用Oracle的开源VirtualBox虚拟化系统,使用 Chef创建自动化虚拟环境。 比Docker好一点的地方就是配置方便,支持windowsXP、7等等 作为
2017-03-25 Sterne Lee
  目录