cleanup things, test reencoding with image2sixel in demo

Author: jerch

.npmignore

@@ -1,6 +1,7 @@
 testfiles
 dist
 *.png
+*.jpg
 node_example*
 index.html
 sixel_textcursor.sh

img2sixel.js

@@ -35,18 +35,18 @@ async function processImage(filename, palLimit) {
   console.log(`${filename}:`);
   console.log(image2sixel(data, img.width, img.height, palLimit, BACKGROUND_SELECT));
 
-  //// alternatively use custom quantizer library
-  //const RgbQuant = require('rgbquant');
-  //const q = new RgbQuant({colors: palLimit, dithKern: 'FloydSteinberg', dithSerp: true});
-  //q.sample(canvas);
-  //const palette = q.palette(true);
-  //const quantizedData = q.reduce(canvas);
-  //console.log(`${filename}:`);
-  //console.log([
-  //  introducer(BACKGROUND_SELECT),
-  //  sixelEncode(quantizedData, img.width, img.height, palette),
-  //  FINALIZER
-  //].join(''));
+  // alternatively use custom quantizer library
+  // const RgbQuant = require('rgbquant');
+  // const q = new RgbQuant({colors: palLimit, dithKern: 'FloydSteinberg', dithSerp: true});
+  // q.sample(canvas);
+  // const palette = q.palette(true);
+  // const quantizedData = q.reduce(canvas);
+  // console.log(`${filename}:`);
+  // console.log([
+  //   introducer(BACKGROUND_SELECT),
+  //   sixelEncode(quantizedData, img.width, img.height, palette),
+  //   FINALIZER
+  // ].join(''));
 }
 
 async function main() {

index.html

@@ -52,6 +52,9 @@
   <span id="stats"></span>
   <br><br>
   <canvas id="output" style="border: 1px solid black"></canvas>
+  <br><br>
+  Re-encoded with img2sixel:<br>
+  <canvas id="output2" style="border: 1px solid black"></canvas>
   <script src="/dist/bundle.js"></script>
   <script id="sampsa" type="application/json"></script>
   <script>
@@ -85,6 +88,18 @@
     // fill color
     sixel.toRGBA8888(...hexColorToRGB(document.getElementById('fillColor').value)));
   ctx.putImageData(target, 0, 0);
+
+  // test encoding by re-encoding the output above
+  const reEncoded = sixel.image2sixel(target.data, img.width, img.height);
+  const six2 = new sixel.SixelDecoder();
+  six2.decodeString(reEncoded.slice(7, -2)); // strip off enclosing escape sequence
+  const canvas2 = document.getElementById('output2');
+  canvas2.width = six2.width;
+  canvas2.height = six2.height;
+  const ctx2 = canvas2.getContext('2d');
+  const target2 = ctx.getImageData(0, 0, six2.width, six2.height);
+  six2.toPixelData(target2.data, six2.width, six2.height);
+  ctx2.putImageData(target2, 0, 0);
 }
 
 function hexColorToRGB(color) {

src/Quantizer.ts

@@ -5,20 +5,20 @@
  * Parts taken from UPNG:
  * MIT License, Copyright (c) 2017 Photopea
  */
-import { red, green, blue, fromRGBA8888 } from "./Colors";
-import { IQuantResult, RGBColor, RGBA8888 } from "./Types";
-const UPNGQuantize = require('../upng').quantize;
+import { red, green, blue, fromRGBA8888 } from './Colors';
+import { IQuantResult, RGBColor, RGBA8888 } from './Types';
+import { quantize as UPNGQuantize } from './upng';
 
 
 function clamp8Bit(value: number): number {
   return value >= 255 ? 255 : value < 0 ? 0 : value;
 }
 
 
-function applyError(value: number, r:number, g:number, b:number): number {
+function applyError(value: number, r: number, g: number, b: number): number {
   return ((0xFF00 | clamp8Bit(blue(value) + b))
-          << 8    | clamp8Bit(green(value) + g))
-          << 8    | clamp8Bit(red(value) + r);
+    << 8 | clamp8Bit(green(value) + g))
+    << 8 | clamp8Bit(red(value) + r);
 }
 
 
@@ -49,7 +49,7 @@ export function reduce(
 
   const indices = new Uint16Array(data32.length);
   const len = data32.length;
-  for(let i = 0; i < len; ++i) {
+  for (let i = 0; i < len; ++i) {
     const v = data32[i];
     const r = red(v);
     const g = green(v);
@@ -65,9 +65,9 @@ export function reduce(
     let eg = (g - green(vp)) >> 2;
     let eb = (b - blue(vp)) >> 2;
 
-    //FIXME: respect idx overflow / left and right border
-    data32[i + 1] = applyError(data32[i + 1], er, eg, eb)
-    data32[i + width] = applyError(data32[i + width], er, eg, eb)
+    // FIXME: respect idx overflow / left and right border
+    data32[i + 1] = applyError(data32[i + 1], er, eg, eb);
+    data32[i + width] = applyError(data32[i + width], er, eg, eb);
 
     er >>= 1;
     eg >>= 1;
@@ -83,8 +83,9 @@ export function reduce(
  * Class to do nearest palette color matching with 16x16x16 boxes.
  */
 class ColorMatcher {
-  private _boxes: {[key: number]: number[]} = {};
-  private _boxes2: {[key: number]: number[]} = {};
+  private _boxes: { [key: number]: number[] } = {};
+  private _boxes2: { [key: number]: number[] } = {};
+
   constructor(public palette: RGBColor[], radius: number = 14, radius2: number = 42) {
     // limit: search sphere to add palette points from
     // limit2: outer search sphere for uncertain area
@@ -96,10 +97,11 @@ class ColorMatcher {
       const x = i >> 8;
       const y = i >> 4 & 15;
       const z = i & 15;
-      this._nearestPoints(i, (x<<4) + 8, (y<<4) + 8, (z<<4) + 8, limit, limit2);
+      this._nearestPoints(i, (x << 4) + 8, (y << 4) + 8, (z << 4) + 8, limit, limit2);
     }
   }
-  private _nearestPoints(box: number, r: number, g: number, b: number, limit: number, limit2: number): void {  
+
+  private _nearestPoints(box: number, r: number, g: number, b: number, limit: number, limit2: number): void {
     let min = Number.MAX_SAFE_INTEGER;
     let idx = -1;
     const pointIndices: number[] = [];
@@ -123,12 +125,14 @@ class ColorMatcher {
     this._boxes[box] = pointIndices;
     this._boxes2[box] = pointIndices2;
   }
+
   private _distance(r1: number, g1: number, b1: number, r2: number, g2: number, b2: number): number {
     const dr = r1 - r2;
     const dg = g1 - g2;
     const db = b1 - b2;
     return dr * dr + dg * dg + db * db;
   }
+
   public nearest(color: RGBA8888): number {
     const r = red(color);
     const g = green(color);

src/SixelEncoder.ts

@@ -401,20 +401,20 @@ export function sixelEncodeIndexed(
  * @param data              pixel data
  * @param width             width of the image
  * @param height            height of the image
- * @param max_colors        max colors of the created palette
+ * @param maxColors         max colors of the created palette
  * @param fast              whether to use fast color approximation
  * @param backgroundSelect  background select behavior for transparent pixels
  */
 export function image2sixel(
   data: Uint8Array | Uint8ClampedArray,
   width: number,
   height: number,
-  max_colors: number = 256,
+  maxColors: number = 256,
   backgroundSelect: 0 | 1 | 2 = 0): string
 {
   // FIXME: sixelEncodeIndexed does not yet handle transparent pixels
   // FIXME: dithering in reduce does not yet respect image width/height
-  const { indices, palette } = reduce(data, width, max_colors);
+  const { indices, palette } = reduce(data, width, maxColors);
   const sixelData = sixelEncodeIndexed(indices, width, height, palette);
   return [introducer(backgroundSelect), sixelData, FINALIZER].join('');
 }

src/Types.ts

@@ -32,5 +32,5 @@ export interface IQuantResult {
   /** image data as palette indices (max. 2^16 colors supported) */
   indices: Uint16Array;
   /** array with quantized colors */
-  palette: number[]
+  palette: number[];
 }

src/upng.d.ts

@@ -0,0 +1,7 @@
+declare module 'upng' {
+  // export function quantize(data: Uint8Array | Uint8ClampedArray, colors: number): any;
+  interface IQuantizer {
+    getKDtree(data: Uint8Array | Uint8ClampedArray, colors: number): any;
+  }
+  const quantize: IQuantizer;
+}

src/upng.ts

@@ -0,0 +1,5 @@
+interface IQuantizer {
+  getKDtree(data: Uint8Array | Uint8ClampedArray, colors: number): any;
+}
+
+export const quantize: IQuantizer = require('../upng').quantize;