feat(text-canvas): add ImageOpts, update image(), add resize(), extra…

…ct()

packages/text-canvas/src/api.ts

@@ -1,4 +1,4 @@
-import { Fn } from "@thi.ng/api";
+import { Fn, NumOrString } from "@thi.ng/api";
 
 export const enum Align {
     LEFT,
@@ -31,6 +31,34 @@ export interface TextBoxOpts {
     style: StrokeStyle;
 }
 
+export interface ImageOpts {
+    /**
+     * Target characters in order of increasing brightness. If chars are
+     * given as number, `format` option will NOT be applied, but is
+     * assumed to be already encoded in the number.
+     *
+     * @defaultValue {@link SHADES}
+     */
+    chars: NumOrString[];
+    /**
+     * Format to apply to all chars.
+     */
+    format: number;
+    /**
+     * Gamma correction value / exponent. All source pixel values will
+     * be raised by this exponent.
+     *
+     * @defaultValue 2.2
+     */
+    gamma: number;
+    /**
+     * Number of bits/pixel in source image (only grayscale supported)
+     *
+     * @defaultValue 8
+     */
+    bits: number;
+}
+
 export interface ClipRect {
     x1: number;
     y1: number;

packages/text-canvas/src/image.ts

@@ -1,5 +1,5 @@
 import { peek } from "@thi.ng/arrays";
-import { SHADES } from "./api";
+import { ImageOpts, SHADES } from "./api";
 import { Canvas } from "./canvas";
 import { charCode, intersectRect } from "./utils";
 
@@ -22,15 +22,49 @@ export const blit = (canvas: Canvas, x: number, y: number, src: Canvas) => {
     }
 };
 
+export const resize = (canvas: Canvas, newWidth: number, newHeight: number) => {
+    if (canvas.width === newWidth && canvas.height === newHeight) return;
+    const dest = new Canvas(newWidth, newHeight);
+    dest.buf.fill(charCode(0x20, canvas.format));
+    blit(dest, 0, 0, canvas);
+    canvas.buf = dest.buf;
+    canvas.width = newWidth;
+    canvas.height = newHeight;
+    canvas.clipRects = [
+        { x1: 0, y1: 0, x2: newWidth, y2: newHeight, w: newWidth, h: newHeight }
+    ];
+};
+
+export const extract = (
+    canvas: Canvas,
+    x: number,
+    y: number,
+    w: number,
+    h: number
+) => {
+    const dest = new Canvas(w, h, canvas.format, peek(canvas.styles));
+    blit(dest, -x, -y, canvas);
+    return dest;
+};
+
+/**
+ *
+ * @param canvas
+ * @param x
+ * @param y
+ * @param w
+ * @param h
+ * @param pixels
+ * @param opts
+ */
 export const image = (
     canvas: Canvas,
     x: number,
     y: number,
     w: number,
     h: number,
     pixels: ArrayLike<number>,
-    format = canvas.format,
-    gamma = 2.2
+    opts?: Partial<ImageOpts>
 ) => {
     x |= 0;
     y |= 0;
@@ -44,12 +78,21 @@ export const image = (
     if (!iw || !ih) return;
     const sx = Math.max(0, x1 - x);
     const sy = Math.max(0, y1 - y);
+    const { chars, format, gamma, bits } = {
+        chars: SHADES,
+        format: canvas.format,
+        gamma: 2.2,
+        bits: 8,
+        ...opts
+    };
+    const norm = 1 / ((1 << bits) - 1);
+    const num = chars.length - 1;
     for (let yy = sy, dy = y1; dy < y2; yy++, dy++) {
         let sidx = sx + yy * w;
         let didx = x1 + dy * width;
         for (let xx = sx, dx = x1; dx < x2; xx++, dx++) {
             buf[didx++] = charCode(
-                SHADES[(Math.pow(pixels[sidx++] / 255, gamma) * 4) | 0],
+                chars[(Math.pow(pixels[sidx++] * norm, gamma) * num + 0.5) | 0],
                 format
             );
         }