node-pnglib

最近手痒造的轮子。。一个可以用纯 JavaScript 撸 png 的库，在路由器、树莓派之类的平台上有画图需求的同学可以看看。 Github 地址：https://github.com/Lellansin/node-pnglib

安装

npm install node-pnglib

示例

使用 http server

const http = require('http');
const PNGlib = require('node-pnglib');

http.createServer(function (req, res) {
  if(req.url == '/favicon.ico') return res.end('');

  // width 100, height 40
  let png = new PNGlib(100, 40);

  // from (0, 20)
  let lineIndex = png.index(0, 20);
  for (let i = 0; i < 100; i++) {
    // draw a line to (0, 75)
    png.buffer[lineIndex + i] = png.color('blue');
  }

  res.setHeader('Content-Type', 'image/png');
  res.end(png.getBuffer());
}).listen(3001);

Output:

保存文件

const fs = require('fs');
const PNGlib = require('node-pnglib');

let png = new PNGlib(150, 150);
for (let i = 20; i < 100; i++) {
  for (let j = 20; j < 100; j++) {
    png.setPixel(i + 10, j + 25, '#cc0044');
    png.setPixel(i + 20, j + 10, '#0044cc');
    png.setPixel(i + 30, j, '#00cc44');
  }
}

fs.writeFileSync('./block.png', png.getBuffer());

Output:

来画几个波浪线

const http = require('http');
const PNGlib = require('node-pnglib');

http.createServer(function (req, res) {
  if(req.url == '/favicon.ico') return res.end('');

  let png = new PNGlib(100, 100);

  for (let i = 0; i < 65; i++) {
    for (let j = 10; j < 65; j++) {
      png.setPixel(i + 10, j + 20, '#cc0044');
      png.setPixel(i + 20, j + 10, '#0044cc');
      png.setPixel(i + 30, j, '#00cc44');
    }
  }
  res.setHeader('Content-Type', 'image/png');
  res.end(png.getBuffer());
}).listen(3001);

Output:

基准测试

# 简单的划线

pnglib x 1,021 ops/sec ±3.37% (76 runs sampled)
pnglib-es6 x 3,293 ops/sec ±4.79% (79 runs sampled)
node-pnglib x 17,027 ops/sec ±0.93% (87 runs sampled)
Fastest is node-pnglib

node v8.1.1
MacBook Pro (Retina, 13-inch, Early 2015)
2.7 GHz Intel Core i5

比同类型库要快（单纯划线比原版要快 10+ 倍）。你可以在这里查看详细的基准测试内容。