Sixel Decoder

Sixel decoder for JavaScript

Example images where taken from this repo

Installation

npm install --save sixel-decoder

yarn add sixel-decoder

Example usage

See result here

import { SixelReader, PixelsWriter } from 'sixel-decoder';

const images = {
  map8: require('../images/map8.six'),
  map16: require('../images/map16.six'),
  snake: require('../images/snake.six'),
  vimperator3: require('../images/vimperator3.six'),
};

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

const buttonsContainer = document.createElement('div');

Object.keys(images).forEach(key => {
  const button = document.createElement('button');
  button.id = key;
  button.textContent = key;

  buttonsContainer.appendChild(button, canvas);
});

document.body.insertBefore(buttonsContainer, canvas);

document.body.addEventListener('click', e => {
  if (!e.target.matches('button')) {
    return;
  }

  const id = e.target.id;
  const sixelString = images[id];

  const decoder = new SixelReader();
  decoder.setString(sixelString);
  decoder.readConfig();

  const { width, height } = decoder.size;

  canvas.width = width;
  canvas.height = height;

  const pixels = new Uint8ClampedArray(width * height * 4);
  const writer = new PixelsWriter(pixels, { width, height });

  decoder.readSixels(writer.onSixel, writer.onCaretMove);

  const imageData = new ImageData(pixels, width, height);

  ctx.putImageData(imageData, 0, 0, 0, 0, width, height);
});

TODO

• [ ] Support WebGL

License

MIT

Author

Andrei Lesnitsky