Integrate JXL decoder

codecs/jxl_dec/jxl_dec.d.ts

@@ -4,10 +4,10 @@ interface RawImage {
   height: number;
 }
 
-interface AVIFModule extends EmscriptenWasm.Module {
+interface JXLModule extends EmscriptenWasm.Module {
   decode(data: BufferSource): RawImage;
   free_result(): void;
 }
 
-export default function(opts: EmscriptenWasm.ModuleOpts): AVIFModule;
+export default function(opts: EmscriptenWasm.ModuleOpts): JXLModule;
 

src/codecs/decoders.ts

@@ -9,6 +9,7 @@ export async function decodeImage(blob: Blob, processor: Processor): Promise<Ima
     if (!canDecode) {
       if (mimeType === 'image/avif') return await processor.avifDecode(blob);
       if (mimeType === 'image/webp') return await processor.webpDecode(blob);
+      if (mimeType === 'image/jpegxl') return await processor.jxlDecode(blob);
       // If it's not one of those types, fall through and try built-in decoding for a laugh.
     }
     return await builtinDecode(blob);

src/codecs/jxl/decoder-meta.ts

@@ -0,0 +1,7 @@
+export const name = 'WASM JPEG XL Decoder';
+
+const supportedMimeTypes = ['image/jpegxl'];
+
+export function canHandleMimeType(mimeType: string): boolean {
+  return supportedMimeTypes.includes(mimeType);
+}

src/codecs/jxl/decoder.ts

@@ -0,0 +1,20 @@
+import jxl_dec, { JXLModule } from '../../../codecs/jxl_dec/jxl_dec';
+import wasmUrl from '../../../codecs/jxl_dec/jxl_dec.wasm';
+import { initEmscriptenModule } from '../util';
+
+let emscriptenModule: Promise<JXLModule>;
+
+export async function decode(data: ArrayBuffer): Promise<ImageData> {
+  if (!emscriptenModule) emscriptenModule = initEmscriptenModule(jxl_dec, wasmUrl);
+
+  const module = await emscriptenModule;
+  const rawImage = module.decode(data);
+  const result = new ImageData(
+    new Uint8ClampedArray(rawImage.buffer),
+    rawImage.width,
+    rawImage.height,
+  );
+
+  module.free_result();
+  return result;
+}

src/codecs/jxl/encoder-meta.ts

@@ -0,0 +1,72 @@
+export enum WebPImageHint {
+  WEBP_HINT_DEFAULT, // default preset.
+  WEBP_HINT_PICTURE, // digital picture, like portrait, inner shot
+  WEBP_HINT_PHOTO,   // outdoor photograph, with natural lighting
+  WEBP_HINT_GRAPH,   // Discrete tone image (graph, map-tile etc).
+}
+
+export interface EncodeOptions {
+  quality: number;
+  target_size: number;
+  target_PSNR: number;
+  method: number;
+  sns_strength: number;
+  filter_strength: number;
+  filter_sharpness: number;
+  filter_type: number;
+  partitions: number;
+  segments: number;
+  pass: number;
+  show_compressed: number;
+  preprocessing: number;
+  autofilter: number;
+  partition_limit: number;
+  alpha_compression: number;
+  alpha_filtering: number;
+  alpha_quality: number;
+  lossless: number;
+  exact: number;
+  image_hint: number;
+  emulate_jpeg_size: number;
+  thread_level: number;
+  low_memory: number;
+  near_lossless: number;
+  use_delta_palette: number;
+  use_sharp_yuv: number;
+}
+export interface EncoderState { type: typeof type; options: EncodeOptions; }
+
+export const type = 'webp';
+export const label = 'WebP';
+export const mimeType = 'image/webp';
+export const extension = 'webp';
+// These come from struct WebPConfig in encode.h.
+export const defaultOptions: EncodeOptions = {
+  quality: 75,
+  target_size: 0,
+  target_PSNR: 0,
+  method: 4,
+  sns_strength: 50,
+  filter_strength: 60,
+  filter_sharpness: 0,
+  filter_type: 1,
+  partitions: 0,
+  segments: 4,
+  pass: 1,
+  show_compressed: 0,
+  preprocessing: 0,
+  autofilter: 0,
+  partition_limit: 0,
+  alpha_compression: 1,
+  alpha_filtering: 1,
+  alpha_quality: 100,
+  lossless: 0,
+  exact: 0,
+  image_hint: 0,
+  emulate_jpeg_size: 0,
+  thread_level: 0,
+  low_memory: 0,
+  near_lossless: 100,
+  use_delta_palette: 0,
+  use_sharp_yuv: 0,
+};

src/codecs/jxl/encoder.ts

@@ -0,0 +1,18 @@
+import webp_enc, { WebPModule } from '../../../codecs/webp_enc/webp_enc';
+import wasmUrl from '../../../codecs/webp_enc/webp_enc.wasm';
+import { EncodeOptions } from './encoder-meta';
+import { initEmscriptenModule } from '../util';
+
+let emscriptenModule: Promise<WebPModule>;
+
+export async function encode(data: ImageData, options: EncodeOptions): Promise<ArrayBuffer> {
+  if (!emscriptenModule) emscriptenModule = initEmscriptenModule(webp_enc, wasmUrl);
+
+  const module = await emscriptenModule;
+  const resultView = module.encode(data.data, data.width, data.height, options);
+  const result = new Uint8Array(resultView);
+  module.free_result();
+
+  // wasm can’t run on SharedArrayBuffers, so we hard-cast to ArrayBuffer.
+  return result.buffer as ArrayBuffer;
+}

src/codecs/jxl/options.tsx

@@ -0,0 +1,346 @@
+import { h, Component } from 'preact';
+import { bind } from '../../lib/initial-util';
+import { inputFieldCheckedAsNumber, inputFieldValueAsNumber, preventDefault } from '../../lib/util';
+import { EncodeOptions, WebPImageHint } from './encoder-meta';
+import * as style from '../../components/Options/style.scss';
+import Checkbox from '../../components/checkbox';
+import Expander from '../../components/expander';
+import Select from '../../components/select';
+import Range from '../../components/range';
+import linkState from 'linkstate';
+
+interface Props {
+  options: EncodeOptions;
+  onChange(newOptions: EncodeOptions): void;
+}
+
+interface State {
+  showAdvanced: boolean;
+}
+
+// From kLosslessPresets in config_enc.c
+// The format is [method, quality].
+const losslessPresets:[number, number][] = [
+  [0, 0], [1, 20], [2, 25], [3, 30], [3, 50],
+  [4, 50], [4, 75], [4, 90], [5, 90], [6, 100],
+];
+const losslessPresetDefault = 6;
+
+function determineLosslessQuality(quality: number, method: number): number {
+  const index = losslessPresets.findIndex(
+    ([presetMethod, presetQuality]) => presetMethod === method && presetQuality === quality,
+  );
+  if (index !== -1) return index;
+  // Quality doesn't match one of the presets.
+  // This can happen when toggling 'lossless'.
+  return losslessPresetDefault;
+}
+
+export default class WebPEncoderOptions extends Component<Props, State> {
+  state: State = {
+    showAdvanced: false,
+  };
+
+  @bind
+  onChange(event: Event) {
+    const form = (event.currentTarget as HTMLInputElement).closest('form') as HTMLFormElement;
+    const lossless = inputFieldCheckedAsNumber(form.lossless);
+    const { options } = this.props;
+    const losslessPresetValue = inputFieldValueAsNumber(
+      form.lossless_preset, determineLosslessQuality(options.quality, options.method),
+    );
+
+    const newOptions: EncodeOptions = {
+      // Copy over options the form doesn't care about, eg emulate_jpeg_size
+      ...options,
+      // And now stuff from the form:
+      lossless,
+      // Special-cased inputs:
+      // In lossless mode, the quality is derived from the preset.
+      quality: lossless ?
+        losslessPresets[losslessPresetValue][1] :
+        inputFieldValueAsNumber(form.quality, options.quality),
+      // In lossless mode, the method is derived from the preset.
+      method: lossless ?
+        losslessPresets[losslessPresetValue][0] :
+        inputFieldValueAsNumber(form.method_input, options.method),
+      image_hint: inputFieldCheckedAsNumber(form.image_hint, options.image_hint) ?
+        WebPImageHint.WEBP_HINT_GRAPH :
+        WebPImageHint.WEBP_HINT_DEFAULT,
+      // .checked
+      exact: inputFieldCheckedAsNumber(form.exact, options.exact),
+      alpha_compression: inputFieldCheckedAsNumber(
+        form.alpha_compression, options.alpha_compression,
+      ),
+      autofilter: inputFieldCheckedAsNumber(form.autofilter, options.autofilter),
+      filter_type: inputFieldCheckedAsNumber(form.filter_type, options.filter_type),
+      use_sharp_yuv: inputFieldCheckedAsNumber(form.use_sharp_yuv, options.use_sharp_yuv),
+      // .value
+      near_lossless: 100 - inputFieldValueAsNumber(form.near_lossless, 100 - options.near_lossless),
+      alpha_quality: inputFieldValueAsNumber(form.alpha_quality, options.alpha_quality),
+      alpha_filtering: inputFieldValueAsNumber(form.alpha_filtering, options.alpha_filtering),
+      sns_strength: inputFieldValueAsNumber(form.sns_strength, options.sns_strength),
+      filter_strength: inputFieldValueAsNumber(form.filter_strength, options.filter_strength),
+      filter_sharpness:
+        7 - inputFieldValueAsNumber(form.filter_sharpness, 7 - options.filter_sharpness),
+      pass: inputFieldValueAsNumber(form.pass, options.pass),
+      preprocessing: inputFieldValueAsNumber(form.preprocessing, options.preprocessing),
+      segments: inputFieldValueAsNumber(form.segments, options.segments),
+      partitions: inputFieldValueAsNumber(form.partitions, options.partitions),
+    };
+    this.props.onChange(newOptions);
+  }
+
+  private _losslessSpecificOptions(options: EncodeOptions) {
+    return (
+      <div key="lossless">
+        <div class={style.optionOneCell}>
+          <Range
+            name="lossless_preset"
+            min="0"
+            max="9"
+            value={determineLosslessQuality(options.quality, options.method)}
+            onInput={this.onChange}
+          >
+            Effort:
+          </Range>
+        </div>
+        <div class={style.optionOneCell}>
+          <Range
+            name="near_lossless"
+            min="0"
+            max="100"
+            value={'' + (100 - options.near_lossless)}
+            onInput={this.onChange}
+          >
+            Slight loss:
+          </Range>
+        </div>
+        <label class={style.optionInputFirst}>
+          {/*
+            Although there are 3 different kinds of image hint, webp only
+            seems to do something with the 'graph' type, and I don't really
+            understand what it does.
+          */}
+          <Checkbox
+            name="image_hint"
+            checked={options.image_hint === WebPImageHint.WEBP_HINT_GRAPH}
+            onChange={this.onChange}
+          />
+          Discrete tone image
+        </label>
+      </div>
+    );
+  }
+
+  private _lossySpecificOptions(options: EncodeOptions) {
+    const { showAdvanced } = this.state;
+
+    return (
+      <div key="lossy">
+        <div class={style.optionOneCell}>
+          <Range
+            name="method_input"
+            min="0"
+            max="6"
+            value={options.method}
+            onInput={this.onChange}
+          >
+            Effort:
+          </Range>
+        </div>
+        <div class={style.optionOneCell}>
+          <Range
+            name="quality"
+            min="0"
+            max="100"
+            step="0.1"
+            value={options.quality}
+            onInput={this.onChange}
+          >
+            Quality:
+          </Range>
+        </div>
+        <label class={style.optionInputFirst}>
+          <Checkbox
+            checked={showAdvanced}
+            onChange={linkState(this, 'showAdvanced')}
+          />
+          Show advanced settings
+        </label>
+        <Expander>
+          {showAdvanced ?
+            <div>
+              <label class={style.optionInputFirst}>
+                <Checkbox
+                  name="alpha_compression"
+                  checked={!!options.alpha_compression}
+                  onChange={this.onChange}
+                />
+                Compress alpha
+              </label>
+              <div class={style.optionOneCell}>
+                <Range
+                  name="alpha_quality"
+                  min="0"
+                  max="100"
+                  value={options.alpha_quality}
+                  onInput={this.onChange}
+                >
+                  Alpha quality:
+                </Range>
+              </div>
+              <div class={style.optionOneCell}>
+                <Range
+                  name="alpha_filtering"
+                  min="0"
+                  max="2"
+                  value={options.alpha_filtering}
+                  onInput={this.onChange}
+                >
+                  Alpha filter quality:
+                </Range>
+              </div>
+              <label class={style.optionInputFirst}>
+                <Checkbox
+                  name="autofilter"
+                  checked={!!options.autofilter}
+                  onChange={this.onChange}
+                />
+                Auto adjust filter strength
+              </label>
+              <Expander>
+                {options.autofilter ? null :
+                  <div class={style.optionOneCell}>
+                    <Range
+                      name="filter_strength"
+                      min="0"
+                      max="100"
+                      value={options.filter_strength}
+                      onInput={this.onChange}
+                    >
+                      Filter strength:
+                    </Range>
+                  </div>
+                }
+              </Expander>
+              <label class={style.optionInputFirst}>
+                <Checkbox
+                  name="filter_type"
+                  checked={!!options.filter_type}
+                  onChange={this.onChange}
+                />
+                Strong filter
+              </label>
+              <div class={style.optionOneCell}>
+                <Range
+                  name="filter_sharpness"
+                  min="0"
+                  max="7"
+                  value={7 - options.filter_sharpness}
+                  onInput={this.onChange}
+                >
+                  Filter sharpness:
+                </Range>
+              </div>
+              <label class={style.optionInputFirst}>
+                <Checkbox
+                  name="use_sharp_yuv"
+                  checked={!!options.use_sharp_yuv}
+                  onChange={this.onChange}
+                />
+                Sharp RGB→YUV conversion
+              </label>
+              <div class={style.optionOneCell}>
+                <Range
+                  name="pass"
+                  min="1"
+                  max="10"
+                  value={options.pass}
+                  onInput={this.onChange}
+                >
+                  Passes:
+                </Range>
+              </div>
+              <div class={style.optionOneCell}>
+                <Range
+                  name="sns_strength"
+                  min="0"
+                  max="100"
+                  value={options.sns_strength}
+                  onInput={this.onChange}
+                >
+                  Spacial noise shaping:
+                </Range>
+              </div>
+              <label class={style.optionTextFirst}>
+                Preprocess:
+                <Select
+                  name="preprocessing"
+                  value={options.preprocessing}
+                  onChange={this.onChange}
+                >
+                  <option value="0">None</option>
+                  <option value="1">Segment smooth</option>
+                  <option value="2">Pseudo-random dithering</option>
+                </Select>
+              </label>
+              <div class={style.optionOneCell}>
+                <Range
+                  name="segments"
+                  min="1"
+                  max="4"
+                  value={options.segments}
+                  onInput={this.onChange}
+                >
+                  Segments:
+                </Range>
+              </div>
+              <div class={style.optionOneCell}>
+                <Range
+                  name="partitions"
+                  min="0"
+                  max="3"
+                  value={options.partitions}
+                  onInput={this.onChange}
+                >
+                  Partitions:
+                </Range>
+              </div>
+            </div>
+            : null
+          }
+        </Expander>
+      </div>
+    );
+  }
+
+  render({ options }: Props) {
+    // I'm rendering both lossy and lossless forms, as it becomes much easier when
+    // gathering the data.
+    return (
+      <form class={style.optionsSection} onSubmit={preventDefault}>
+        <label class={style.optionInputFirst}>
+          <Checkbox
+            name="lossless"
+            checked={!!options.lossless}
+            onChange={this.onChange}
+          />
+          Lossless
+        </label>
+        {options.lossless
+          ? this._losslessSpecificOptions(options)
+          : this._lossySpecificOptions(options)
+        }
+        <label class={style.optionInputFirst}>
+          <Checkbox
+            name="exact"
+            checked={!!options.exact}
+            onChange={this.onChange}
+          />
+          Preserve transparent data
+        </label>
+      </form>
+    );
+  }
+}

src/codecs/processor-worker/index.ts

@@ -98,6 +98,13 @@ async function avifDecode(data: ArrayBuffer): Promise<ImageData> {
   return timed('avifDencode', () => decode(data));
 }
 
+async function jxlDecode(data: ArrayBuffer): Promise<ImageData> {
+  const { decode } = await import(
+    /* webpackChunkName: "process-jxl-dec" */
+    '../jxl/decoder');
+  return decode(data);
+}
+
 const exports = {
   mozjpegEncode,
   quantize,
@@ -108,6 +115,7 @@ const exports = {
   webpDecode,
   avifEncode,
   avifDecode,
+  jxlDecode,
 };
 export type ProcessorWorkerApi = typeof exports;
 

src/codecs/processor.ts

@@ -173,6 +173,12 @@ export default class Processor {
     return this._workerApi!.avifEncode(data, opts);
   }
 
+  @Processor._processingJob({ needsWorker: true })
+  async jxlDecode(blob: Blob): Promise<ImageData> {
+    const data = await blobToArrayBuffer(blob);
+    return this._workerApi!.jxlDecode(data);
+  }
+
   // Not-worker jobs:
 
   @Processor._processingJob()

src/lib/util.ts

@@ -130,6 +130,7 @@ const magicNumberToMimeType = new Map<RegExp, string>([
   [/^MM\x00*/, 'image/tiff'],
   [/^RIFF....WEBPVP8[LX ]/, 'image/webp'],
   [/^\x00\x00\x00 ftypavif\x00\x00\x00\x00/, 'image/avif'],
+  [/^\xff\x0a/, 'image/jpegxl'],
 ]);
 
 export async function sniffMimeType(blob: Blob): Promise<string> {