WookieFPV / binary-bmp

A pure javascript binary bitmap image creator, you can input an array or a H5 canvas and get base64 or buffer type output

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

logo

Binary Bmp可以将数组canvas转为位图格式的文件。纯JS编写,利用ES6的ArrayBuffer对象操作二进制数实。现支持单色位图、VGA位图、灰度位图、RGB位图、RGBA位图。

安装

Npm:

npm install binary-bmp

浏览器:

<script src="./lib/Bmp.min.js"></script>

使用

const Bmp = require('binary-bmp');

const bit = 1; // 颜色位值
const width = 3; // 图片宽度
const height = 3; // 图片高度
const data = [ // 像素数据
  0,1,0,
  1,1,1,
  0,1,1
];

const bmp = new Bmp(bit, { width, height, data });

console.log(bmp.getBuffer()); // Uint8Array [...]
console.log(bmp.getBase64()); // data:image/bmp;base64,Qk1KAA...

Bitmap位图可以分为以下几种:

名称 颜色位值(bit) 能表示的颜色数量(2^bit) 数组元素取值范围 颜色表(调色板) 数组元素含义
单色位图 1 2 0 ~ 1 颜色表索引
VGA位图 4 16 0 ~ 15 颜色表索引
灰度位图 8 256 0 ~ 255 颜色表索引
RGB位图 24 ....... 0 ~ 255 颜色值
RGBA位图 32 ....... 0 ~ 255 颜色值

单色位图

单色图的颜色位值为1bit,能表示2^1=2种颜色。所以传入的参数data数组中元素为01两种,默认的0表示黑色,1表示白色:

const binary = new Bmp(1, {
  width: 3,
  height: 3,
  data: [
    0,1,0,
    1,1,1,
    0,1,1,
  ],
});
console.log(binary.getBuffer());
console.log(binary.getBase64());

1-bit-binary.bmp

但是我们可以调用setPalette方法来自定义颜色表,代码如下。此时0表示颜色表中索引为0的颜色#F44336红色,1表示颜色表中索引为1的颜色#FFFFFF白色:

binary.setPalette([
  'F44336',
  'FFFFFF',
]);
console.log(binary.getBuffer());
console.log(binary.getBase64());

1-bit-binary-palette.bmp


VGA位图

VGA图的颜色位值为4bit,能表示2^4=16种颜色。所以传入的参数data数组中元素取值范围为0-15,默认的0至15表示从黑色到白色均匀分布的16种颜色:

const vga = new Bmp(4, {
  width: 4,
  height: 4,
  data: [
    0,1,2,3,
    4,5,6,7,
    8,9,10,11,
    12,13,14,15,
  ],
});

4-bit-vga.bmp

VGA图也可以自定义颜色表:

vga.setPalette([
  'F44336',
  'E91E63',
  '9C27B0',
  '673AB7',
  '3F51B5',
  '2196F3',
  '03A9F4',
  '00BCD4',
  '009688',
  '4CAF50',
  '8BC34A',
  'CDDC39',
  'FFEB3B',
  'FFC107',
  'FF9800',
  'FF5722',
]);

4-bit-vga-palette.bmp


灰度位图

灰度图的颜色位值为8bit,能表示2^8=256种颜色,即我们常见的黑白图片。所以传入的参数data数组中元素取值范围为0-255,默认的0至255表示从黑色到白色均匀分布的256种颜色:

const grey = new Bmp(8, {
  width: 4,
  height: 4,
  data: [
    0,17,34,51,
    68,85,102,119,
    136,153,170,187,
    204,221,238,255,
  ],
});

8-bit-grey.bmp

灰度图同样可以自定义颜色表,由于灰度图有2^8=256种颜色,所以传入setPalette方法的数组有256个元素,代码太长,故不在此展示。


RGB位图

RGB图的颜色位值为24bit,这24bit由8bit + 8bit + 8bit组成,表示一个像素点的red, green, blue三原色色值,即我们常见的彩色图片。所以传入的参数data数组中元素取值范围为0-255,每3个为一组按RGB的顺序表示一个像素点的颜色:

const rgb = new Bmp(24, {
  width: 3,
  height: 1,
  data: [
    255,0,0, 255,255,0, 0,0,0,
  ],
});

24-bit-rgb.bmp

在有些情况下,我们提供的数据可能是BGR的顺序,这时只需调用bgr方法即可:

rgb.bgr().getBase64();

24-bit-bgr.bmp

由于RGB位图的数据直接表示颜色值而不是颜色表索引,所以不再需要颜色表。


RGBA位图

RGBA图颜色位值为32bit,相较于RGB只多了一个8bit的A(alpha)来表示不透明度。data数组每4个元素为一组按RGBA的顺序表示一个像素点的颜色:

const rgba = new Bmp(32, {
  width: 3,
  height: 1,
  data: [
    255,0,0,0, 0,255,0,128, 0,0,255,255,
  ],
});

32-bit-rgba.bmp

同样的,当数据是BGRA顺序的时候,调用bgr方法即可。
同样的,RGBA位图没有颜色表。

Canvas转位图

支持将canvas转为RGBA位图、灰度位图、单色位图:

const canvas = document.getElementById('canvas-id');

const rgba = new Bmp(32, canvas);
const grey = new Bmp(8, canvas);
const binary = new Bmp(1, canvas);

canvas

增强代码的可读性

由于需要记住每种位图的颜色位值很麻烦,维护代码时也很容易忘记每种颜色位值代表的位图种类,所以Bmp类有5个以位图名称命名的静态属性保存了5种位图的颜色位值:

Bmp.BINARY === 1
Bmp.VGA    === 4
Bmp.GREY   === 8
Bmp.RGB    === 24
Bmp.RGBA   === 32
const binary = new Bmp(Bmp.BINARY, {
  width: 3,
  height: 3,
  data: [
    0,1,0,
    1,1,1,
    0,1,1,
  ],
});

示例

参考本项目examples目录下的node.jsbrowser.js

About

A pure javascript binary bitmap image creator, you can input an array or a H5 canvas and get base64 or buffer type output


Languages

Language:JavaScript 100.0%