Add hqx

codecs/hqx/build.sh

@@ -6,7 +6,7 @@ echo "============================================="
 echo "Compiling wasm"
 echo "============================================="
 (
-  wasm-pack build -- --verbose --locked
+  wasm-pack build --target web -- --verbose --locked
   rm pkg/.gitignore
 )
 echo "============================================="

codecs/hqx/pkg/README.md

@@ -0,0 +1,5 @@
+# HQX
+
+- Source: <https://github.com/CryZe/wasmboy-rs>
+- Version: v0.1.2
+- License: Apache 2.0

codecs/hqx/pkg/squooshhqx.d.ts

@@ -1,10 +1,48 @@
 /* tslint:disable */
 /* eslint-disable */
 /**
-* @param {Uint32Array} input_image
-* @param {number} input_width
-* @param {number} input_height
-* @param {number} factor
-* @returns {Uint32Array}
-*/
-export function resize(input_image: Uint32Array, input_width: number, input_height: number, factor: number): Uint32Array;
+ * @param {Uint32Array} input_image
+ * @param {number} input_width
+ * @param {number} input_height
+ * @param {number} factor
+ * @returns {Uint32Array}
+ */
+export function resize(
+  input_image: Uint32Array,
+  input_width: number,
+  input_height: number,
+  factor: number,
+): Uint32Array;
+
+export type InitInput =
+  | RequestInfo
+  | URL
+  | Response
+  | BufferSource
+  | WebAssembly.Module;
+
+export interface InitOutput {
+  readonly memory: WebAssembly.Memory;
+  readonly resize: (
+    a: number,
+    b: number,
+    c: number,
+    d: number,
+    e: number,
+    f: number,
+  ) => void;
+  readonly __wbindgen_malloc: (a: number) => number;
+  readonly __wbindgen_free: (a: number, b: number) => void;
+}
+
+/**
+ * If `module_or_path` is {RequestInfo} or {URL}, makes a request and
+ * for everything else, calls `WebAssembly.instantiate` directly.
+ *
+ * @param {InitInput | Promise<InitInput>} module_or_path
+ *
+ * @returns {Promise<InitOutput>}
+ */
+export default function init(
+  module_or_path?: InitInput | Promise<InitInput>,
+): Promise<InitOutput>;

codecs/hqx/pkg/squooshhqx.js

@@ -1,2 +1,107 @@
-import * as wasm from "./squooshhqx_bg.wasm";
-export * from "./squooshhqx_bg.js";
+let wasm;
+
+let cachegetUint32Memory0 = null;
+function getUint32Memory0() {
+  if (
+    cachegetUint32Memory0 === null ||
+    cachegetUint32Memory0.buffer !== wasm.memory.buffer
+  ) {
+    cachegetUint32Memory0 = new Uint32Array(wasm.memory.buffer);
+  }
+  return cachegetUint32Memory0;
+}
+
+let WASM_VECTOR_LEN = 0;
+
+function passArray32ToWasm0(arg, malloc) {
+  const ptr = malloc(arg.length * 4);
+  getUint32Memory0().set(arg, ptr / 4);
+  WASM_VECTOR_LEN = arg.length;
+  return ptr;
+}
+
+let cachegetInt32Memory0 = null;
+function getInt32Memory0() {
+  if (
+    cachegetInt32Memory0 === null ||
+    cachegetInt32Memory0.buffer !== wasm.memory.buffer
+  ) {
+    cachegetInt32Memory0 = new Int32Array(wasm.memory.buffer);
+  }
+  return cachegetInt32Memory0;
+}
+
+function getArrayU32FromWasm0(ptr, len) {
+  return getUint32Memory0().subarray(ptr / 4, ptr / 4 + len);
+}
+/**
+ * @param {Uint32Array} input_image
+ * @param {number} input_width
+ * @param {number} input_height
+ * @param {number} factor
+ * @returns {Uint32Array}
+ */
+export function resize(input_image, input_width, input_height, factor) {
+  var ptr0 = passArray32ToWasm0(input_image, wasm.__wbindgen_malloc);
+  var len0 = WASM_VECTOR_LEN;
+  wasm.resize(8, ptr0, len0, input_width, input_height, factor);
+  var r0 = getInt32Memory0()[8 / 4 + 0];
+  var r1 = getInt32Memory0()[8 / 4 + 1];
+  var v1 = getArrayU32FromWasm0(r0, r1).slice();
+  wasm.__wbindgen_free(r0, r1 * 4);
+  return v1;
+}
+
+async function load(module, imports) {
+  if (typeof Response === 'function' && module instanceof Response) {
+    if (typeof WebAssembly.instantiateStreaming === 'function') {
+      try {
+        return await WebAssembly.instantiateStreaming(module, imports);
+      } catch (e) {
+        if (module.headers.get('Content-Type') != 'application/wasm') {
+          console.warn(
+            '`WebAssembly.instantiateStreaming` failed because your server does not serve wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\n',
+            e,
+          );
+        } else {
+          throw e;
+        }
+      }
+    }
+
+    const bytes = await module.arrayBuffer();
+    return await WebAssembly.instantiate(bytes, imports);
+  } else {
+    const instance = await WebAssembly.instantiate(module, imports);
+
+    if (instance instanceof WebAssembly.Instance) {
+      return { instance, module };
+    } else {
+      return instance;
+    }
+  }
+}
+
+async function init(input) {
+  if (typeof input === 'undefined') {
+    input = import.meta.url.replace(/\.js$/, '_bg.wasm');
+  }
+  const imports = {};
+
+  if (
+    typeof input === 'string' ||
+    (typeof Request === 'function' && input instanceof Request) ||
+    (typeof URL === 'function' && input instanceof URL)
+  ) {
+    input = fetch(input);
+  }
+
+  const { instance, module } = await load(await input, imports);
+
+  wasm = instance.exports;
+  init.__wbindgen_wasm_module = module;
+
+  return wasm;
+}
+
+export default init;

codecs/hqx/pkg/squooshhqx_bg.js

@@ -1,48 +0,0 @@
-import * as wasm from './squooshhqx_bg.wasm';
-
-let cachegetUint32Memory0 = null;
-function getUint32Memory0() {
-    if (cachegetUint32Memory0 === null || cachegetUint32Memory0.buffer !== wasm.memory.buffer) {
-        cachegetUint32Memory0 = new Uint32Array(wasm.memory.buffer);
-    }
-    return cachegetUint32Memory0;
-}
-
-let WASM_VECTOR_LEN = 0;
-
-function passArray32ToWasm0(arg, malloc) {
-    const ptr = malloc(arg.length * 4);
-    getUint32Memory0().set(arg, ptr / 4);
-    WASM_VECTOR_LEN = arg.length;
-    return ptr;
-}
-
-let cachegetInt32Memory0 = null;
-function getInt32Memory0() {
-    if (cachegetInt32Memory0 === null || cachegetInt32Memory0.buffer !== wasm.memory.buffer) {
-        cachegetInt32Memory0 = new Int32Array(wasm.memory.buffer);
-    }
-    return cachegetInt32Memory0;
-}
-
-function getArrayU32FromWasm0(ptr, len) {
-    return getUint32Memory0().subarray(ptr / 4, ptr / 4 + len);
-}
-/**
-* @param {Uint32Array} input_image
-* @param {number} input_width
-* @param {number} input_height
-* @param {number} factor
-* @returns {Uint32Array}
-*/
-export function resize(input_image, input_width, input_height, factor) {
-    var ptr0 = passArray32ToWasm0(input_image, wasm.__wbindgen_malloc);
-    var len0 = WASM_VECTOR_LEN;
-    wasm.resize(8, ptr0, len0, input_width, input_height, factor);
-    var r0 = getInt32Memory0()[8 / 4 + 0];
-    var r1 = getInt32Memory0()[8 / 4 + 1];
-    var v1 = getArrayU32FromWasm0(r0, r1).slice();
-    wasm.__wbindgen_free(r0, r1 * 4);
-    return v1;
-}
-

src/features/README.md

@@ -0,0 +1,22 @@
+# Feature types
+
+- **decoders** - decode images.
+- **encoders** - encode images.
+- **processors** - change images, generally in a way that potentially aids compression.
+- **preprocessors** - prepares the image for handling.
+
+The key difference between preprocessors and processors is each 'side' in Squoosh can process differently, whereas a preprocessor happens to both sides.
+
+# Adding code to the worker
+
+Any feature can have a `worker` folder. Any script in that folder will have its default export bundled into the worker, using the name of the file.
+
+So, `processors/shout/worker/shout.ts`:
+
+```ts
+export default function () {
+  console.log('OI YOU');
+}
+```
+
+…will be bundled into the worker and exposed via comlink as `shout()`.

src/features/processors/resize/worker/resize.ts

@@ -1,7 +1,17 @@
-import { WorkerResizeOptions } from '../shared';
+import type { WorkerResizeOptions } from '../shared';
 import { getContainOffsets } from '../shared/util';
-import initWasm, { resize as wasmResize } from 'codecs/resize/pkg';
-import wasmUrl from 'url:codecs/resize/pkg/squoosh_resize_bg.wasm';
+import initResizeWasm, { resize as wasmResize } from 'codecs/resize/pkg';
+import resizeWasmUrl from 'url:codecs/resize/pkg/squoosh_resize_bg.wasm';
+import hqxWasmUrl from 'url:codecs/hqx/pkg/squooshhqx_bg.wasm';
+import initHqxWasm, { resize as wasmHqx } from 'codecs/hqx/pkg';
+
+interface HqxResizeOptions extends WorkerResizeOptions {
+  method: 'hqx';
+}
+
+function optsIsHqxOpts(opts: WorkerResizeOptions): opts is HqxResizeOptions {
+  return opts.method === 'hqx';
+}
 
 function crop(
   data: ImageData,
@@ -25,6 +35,18 @@ function crop(
   );
 }
 
+interface ClampOpts {
+  min?: number;
+  max?: number;
+}
+
+function clamp(
+  num: number,
+  { min = Number.MIN_VALUE, max = Number.MAX_VALUE }: ClampOpts,
+): number {
+  return Math.min(Math.max(num, min), max);
+}
+
 /** Resize methods by index */
 const resizeMethods: WorkerResizeOptions['method'][] = [
   'triangle',
@@ -33,19 +55,57 @@ const resizeMethods: WorkerResizeOptions['method'][] = [
   'lanczos3',
 ];
 
-let wasmReady: Promise<unknown>;
+let resizeWasmReady: Promise<unknown>;
+let hqxWasmReady: Promise<unknown>;
+
+async function hqx(
+  input: ImageData,
+  opts: HqxResizeOptions,
+): Promise<ImageData> {
+  if (!hqxWasmReady) {
+    hqxWasmReady = initHqxWasm(hqxWasmUrl);
+  }
+
+  await hqxWasmReady;
+
+  const widthRatio = opts.width / input.width;
+  const heightRatio = opts.height / input.height;
+  const ratio = Math.max(widthRatio, heightRatio);
+  const factor = clamp(Math.ceil(ratio), { min: 1, max: 4 }) as 1 | 2 | 3 | 4;
+
+  if (factor === 1) return input;
+
+  const result = wasmHqx(
+    new Uint32Array(input.data.buffer),
+    input.width,
+    input.height,
+    factor,
+  );
+
+  return new ImageData(
+    new Uint8ClampedArray(result.buffer),
+    input.width * factor,
+    input.height * factor,
+  );
+}
 
 export default async function resize(
   data: ImageData,
   opts: WorkerResizeOptions,
 ): Promise<ImageData> {
-  if (!wasmReady) {
-    wasmReady = initWasm(wasmUrl);
+  let input = data;
+
+  if (!resizeWasmReady) {
+    resizeWasmReady = initResizeWasm(resizeWasmUrl);
   }
 
-  await wasmReady;
+  if (optsIsHqxOpts(opts)) {
+    input = await hqx(input, opts);
+    // Regular resize to make up the difference
+    opts = { ...opts, method: 'catrom' };
+  }
 
-  let input = data;
+  await resizeWasmReady;
 
   if (opts.fitMethod === 'contain') {
     const { sx, sy, sw, sh } = getContainOffsets(

src/features/util.ts

@@ -20,15 +20,3 @@ export function initEmscriptenModule<T extends EmscriptenWasm.Module>(
     locateFile: () => wasmUrl,
   });
 }
-
-interface ClampOpts {
-  min?: number;
-  max?: number;
-}
-
-export function clamp(
-  num: number,
-  { min = Number.MIN_VALUE, max = Number.MAX_VALUE }: ClampOpts,
-): number {
-  return Math.min(Math.max(num, min), max);
-}