Prevent options overflow at larger widths

No longer need this.
Range bubble now behaves properly on mobile
2018-11-06 13:37:13 +00:00 · 2018-11-06 13:37:13 +00:00 · 2018-11-06 13:37:12 +00:00 · 2018-11-06 13:37:12 +00:00 · 2018-11-06 13:37:11 +00:00 · 2018-11-06 13:37:11 +00:00
178 changed files with 22470 additions and 1353 deletions
--- a/.firebaserc
+++ b/.firebaserc
@@ -1,5 +0,0 @@
 {
  "projects": {
    "default": "squoosh-beta"
  }
 }
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@ node_modules
 /*.log
 *.scss.d.ts
 *.css.d.ts
 *.o
--- a/.travis.yml
+++ b/.travis.yml
@@ -0,0 +1,5 @@
 language: node_js
 node_js:
 - node
 cache: npm
 script: npm run build || npm run build # scss ts definitions need to be generated before an actual build
--- a/codecs/example_palette.png
+++ b/codecs/example_palette.png
--- a/codecs/imagequant/README.md
+++ b/codecs/imagequant/README.md
@@ -0,0 +1,30 @@
 # ImageQuant
 - Source: <https://github.com/ImageOptim/libimagequant>
 - Version: v2.12.1
 ## Dependencies
 - Docker
 ## Example
 See `example.html`
 ## API
 ### `int version()`
 Returns the version of libimagequant as a number. va.b.c is encoded as 0x0a0b0c
 ### `RawImage quantize(std::string buffer, int image_width, int image_height, int numColors, float dithering)`
 Quantizes the given images, using at most `numColors`, a value between 2 and 256. `dithering` is a value between 0 and 1 controlling the amount of dithering. `RawImage` is a class with 3 fields: `buffer`, `width`, and `height`.
 ### `RawImage zx_quantize(std::string buffer, int image_width, int image_height, float dithering)`
 ???
 ### `void free_result()`
 Frees the result created by `quantize()`.
--- a/codecs/imagequant/build.sh
+++ b/codecs/imagequant/build.sh
@@ -0,0 +1,48 @@
 #!/bin/bash
 set -e
 export OPTIMIZE="-Os"
 export LDFLAGS="${OPTIMIZE}"
 export CFLAGS="${OPTIMIZE}"
 export CPPFLAGS="${OPTIMIZE}"
 echo "============================================="
 echo "Compiling libimagequant"
 echo "============================================="
 (
  emcc \
    --bind \
    ${OPTIMIZE} \
    -s ALLOW_MEMORY_GROWTH=1 \
    -s MODULARIZE=1 \
    -s 'EXPORT_NAME="imagequant"' \
    -I node_modules/libimagequant \
    --std=c99 \
    -c \
    node_modules/libimagequant/{libimagequant,pam,mediancut,blur,mempool,kmeans,nearest}.c
 )
 echo "============================================="
 echo "Compiling wasm module"
 echo "============================================="
 (
  emcc \
    --bind \
    ${OPTIMIZE} \
    -s ALLOW_MEMORY_GROWTH=1 \
    -s MODULARIZE=1 \
    -s 'EXPORT_NAME="imagequant"' \
    -I node_modules/libimagequant \
    -o ./imagequant.js \
    --std=c++11 *.o \
    -x c++ \
    imagequant.cpp
 )
 echo "============================================="
 echo "Compiling wasm module done"
 echo "============================================="
 echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
 echo "Did you update your docker image?"
 echo "Run \`docker pull trzeci/emscripten\`"
 echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
--- a/codecs/imagequant/example.html
+++ b/codecs/imagequant/example.html
@@ -0,0 +1,41 @@
 <!doctype html>
 <style>
  canvas {
    image-rendering: pixelated;
  }
 </style>
 <script src='imagequant.js'></script>
 <script>
  const Module = imagequant();
  async function loadImage(src) {
    // Load image
    const img = document.createElement('img');
    img.src = src;
    await new Promise(resolve => img.onload = resolve);
    // Make canvas same size as image
    const canvas = document.createElement('canvas');
    [canvas.width, canvas.height] = [img.width, img.height];
    // Draw image onto canvas
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    return ctx.getImageData(0, 0, img.width, img.height);
  }
  Module.onRuntimeInitialized = async _ => {
    console.log('Version:', Module.version().toString(16));
    const image = await loadImage('../example.png');
    // const rawImage = Module.quantize(image.data, image.width, image.height, 256, 1.0);
    const rawImage = Module.zx_quantize(image.data, image.width, image.height, 1.0);
    console.log('done');
    Module.free_result();
    const imageData = new ImageData(new Uint8ClampedArray(rawImage.buffer), rawImage.width, rawImage.height);
    const canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;
    const ctx = canvas.getContext('2d');
    ctx.putImageData(imageData, 0, 0);
    document.body.appendChild(canvas);
  };
 </script>
--- a/codecs/imagequant/imagequant.cpp
+++ b/codecs/imagequant/imagequant.cpp
@@ -0,0 +1,245 @@
 #include "emscripten/bind.h"
 #include "emscripten/val.h"
 #include <stdlib.h>
 #include <inttypes.h>
 #include <limits.h>
 #include <math.h>
 #include "libimagequant.h"
 using namespace emscripten;
 int version() {
  return (((LIQ_VERSION/10000) % 100) << 16) |
         (((LIQ_VERSION/100  ) % 100) << 8) |
         (((LIQ_VERSION/1    ) % 100) << 0);
 }
 class RawImage {
 public:
  val buffer;
  int width;
  int height;
  RawImage(val b, int w, int h)
    : buffer(b), width(w), height(h) {}
 };
 liq_attr *attr;
 liq_image *image;
 liq_result *res;
 uint8_t* result;
 RawImage quantize(std::string rawimage, int image_width, int image_height, int num_colors, float dithering) {
  const uint8_t* image_buffer = (uint8_t*)rawimage.c_str();
  int size = image_width * image_height;
  attr = liq_attr_create();
  image = liq_image_create_rgba(attr, image_buffer, image_width, image_height, 0);
  liq_set_max_colors(attr, num_colors);
  liq_image_quantize(image, attr, &res);
  liq_set_dithering_level(res, dithering);
  uint8_t* image8bit = (uint8_t*) malloc(size);
  result = (uint8_t*) malloc(size * 4);
  liq_write_remapped_image(res, image, image8bit, size);
  const liq_palette *pal = liq_get_palette(res);
  // Turn palletted image back into an RGBA image
  for(int i = 0; i < size; i++) {
    result[i * 4 + 0] = pal->entries[image8bit[i]].r;
    result[i * 4 + 1] = pal->entries[image8bit[i]].g;
    result[i * 4 + 2] = pal->entries[image8bit[i]].b;
    result[i * 4 + 3] = pal->entries[image8bit[i]].a;
  }
  free(image8bit);
  liq_result_destroy(res);
  liq_image_destroy(image);
  liq_attr_destroy(attr);
  return {
    val(typed_memory_view(image_width*image_height*4, result)),
    image_width,
    image_height
  };
 }
 const liq_color zx_colors[] = {
  {.a = 255, .r = 0, .g = 0, .b = 0},       // regular black
  {.a = 255, .r = 0, .g = 0, .b = 215},     // regular blue
  {.a = 255, .r = 215, .g = 0, .b = 0},     // regular red
  {.a = 255, .r = 215, .g = 0, .b = 215},   // regular magenta
  {.a = 255, .r = 0, .g = 215, .b = 0},     // regular green
  {.a = 255, .r = 0, .g = 215, .b = 215},   // regular cyan
  {.a = 255, .r = 215, .g = 215, .b = 0},   // regular yellow
  {.a = 255, .r = 215, .g = 215, .b = 215}, // regular white
  {.a = 255, .r = 0, .g = 0, .b = 255},     // bright blue
  {.a = 255, .r = 255, .g = 0, .b = 0},     // bright red
  {.a = 255, .r = 255, .g = 0, .b = 255},   // bright magenta
  {.a = 255, .r = 0, .g = 255, .b = 0},     // bright green
  {.a = 255, .r = 0, .g = 255, .b = 255},   // bright cyan
  {.a = 255, .r = 255, .g = 255, .b = 0},   // bright yellow
  {.a = 255, .r = 255, .g = 255, .b = 255}  // bright white
 };
 uint8_t block[8 * 8 * 4];
 /**
 * The ZX has one bit per pixel, but can assign two colours to an 8x8 block. The two colours must
 * both be 'regular' or 'bright'. Black exists as both regular and bright.
 */
 RawImage zx_quantize(std::string rawimage, int image_width, int image_height, float dithering) {
  const uint8_t* image_buffer = (uint8_t*) rawimage.c_str();
  int size = image_width * image_height;
  int bytes_per_pixel = 4;
  result = (uint8_t*) malloc(size * bytes_per_pixel);
  uint8_t* image8bit = (uint8_t*) malloc(8 * 8);
  // For each 8x8 grid
  for (int block_start_y = 0; block_start_y < image_height; block_start_y += 8) {
    for (int block_start_x = 0; block_start_x < image_width; block_start_x += 8) {
      int color_popularity[15] = {0};
      int block_index = 0;
      int block_width = 8;
      int block_height = 8;
      // If the block hangs off the right/bottom of the image dimensions, make it smaller to fit.
      if (block_start_y + block_height > image_height) {
        block_height = image_height - block_start_y;
      }
      if (block_start_x + block_width > image_width) {
        block_width = image_width - block_start_x;
      }
      // For each pixel in that block:
      for (int y = block_start_y; y < block_start_y + block_height; y++) {
        for (int x = block_start_x; x < block_start_x + block_width; x++) {
          int pixel_start = (y * image_width * bytes_per_pixel) + (x * bytes_per_pixel);
          int smallest_distance = INT_MAX;
          int winning_index = -1;
          // Copy pixel data for quantizing later
          block[block_index++] = image_buffer[pixel_start];
          block[block_index++] = image_buffer[pixel_start + 1];
          block[block_index++] = image_buffer[pixel_start + 2];
          block[block_index++] = image_buffer[pixel_start + 3];
          // Which zx color is this pixel closest to?
          for (int color_index = 0; color_index < 15; color_index++) {
            liq_color color = zx_colors[color_index];
            // Using Euclidean distance. LibQuant has better methods, but it requires conversion to
            // LAB, so I don't think it's worth it.
            int distance =
              pow(color.r - image_buffer[pixel_start + 0], 2) +
              pow(color.g - image_buffer[pixel_start + 1], 2) +
              pow(color.b - image_buffer[pixel_start + 2], 2);
            if (distance < smallest_distance) {
              winning_index = color_index;
              smallest_distance = distance;
            }
          }
          color_popularity[winning_index]++;
        }
      }
      // Get the three most popular colours for the block.
      int first_color_index = 0;
      int second_color_index = 0;
      int third_color_index = 0;
      int highest_popularity = -1;
      int second_highest_popularity = -1;
      int third_highest_popularity = -1;
      for (int color_index = 0; color_index < 15; color_index++) {
        if (color_popularity[color_index] > highest_popularity) {
          // Store this as the most popular pixel, and demote the current values:
          third_color_index = second_color_index;
          third_highest_popularity = second_highest_popularity;
          second_color_index = first_color_index;
          second_highest_popularity = highest_popularity;
          first_color_index = color_index;
          highest_popularity = color_popularity[color_index];
        } else if (color_popularity[color_index] > second_highest_popularity) {
          third_color_index = second_color_index;
          third_highest_popularity = second_highest_popularity;
          second_color_index = color_index;
          second_highest_popularity = color_popularity[color_index];
        } else if (color_popularity[color_index] > third_highest_popularity) {
          third_color_index = color_index;
          third_highest_popularity = color_popularity[color_index];
        }
      }
      // ZX images can't mix bright and regular colours, except black which appears in both.
      // Resolve any conflict:
      while (1) {
        // If either colour is black, there's no conflict to resolve.
        if (first_color_index != 0 && second_color_index != 0) {
          if (first_color_index >= 8 && second_color_index < 8) {
            // Make the second color bright
            second_color_index = second_color_index + 7;
          } else if (first_color_index < 8 && second_color_index >= 8) {
            // Make the second color regular
            second_color_index = second_color_index - 7;
          }
        }
        // If, during conflict resolving, we now have two of the same colour (because we initially
        // selected the bright & regular version of the same colour), retry again with the third
        // most popular colour.
        if (first_color_index == second_color_index) {
          second_color_index = third_color_index;
        } else break;
      }
      // Quantize
      attr = liq_attr_create();
      image = liq_image_create_rgba(attr, block, block_width, block_height, 0);
      liq_set_max_colors(attr, 2);
      liq_image_add_fixed_color(image, zx_colors[first_color_index]);
      liq_image_add_fixed_color(image, zx_colors[second_color_index]);
      liq_image_quantize(image, attr, &res);
      liq_set_dithering_level(res, dithering);
      liq_write_remapped_image(res, image, image8bit, size);
      const liq_palette *pal = liq_get_palette(res);
      // Turn palletted image back into an RGBA image, and write it into the full size result image.
      for(int y = 0; y < block_height; y++) {
        for(int x = 0; x < block_width; x++) {
          int image8BitPos = y * block_width + x;
          int resultStartPos = ((block_start_y + y) * bytes_per_pixel * image_width) + ((block_start_x + x) * bytes_per_pixel);
          result[resultStartPos + 0] = pal->entries[image8bit[image8BitPos]].r;
          result[resultStartPos + 1] = pal->entries[image8bit[image8BitPos]].g;
          result[resultStartPos + 2] = pal->entries[image8bit[image8BitPos]].b;
          result[resultStartPos + 3] = pal->entries[image8bit[image8BitPos]].a;
        }
      }
      liq_result_destroy(res);
      liq_image_destroy(image);
      liq_attr_destroy(attr);
    }
  }
  free(image8bit);
  return {
    val(typed_memory_view(image_width*image_height*4, result)),
    image_width,
    image_height
  };
 }
 void free_result() {
  free(result);
 }
 EMSCRIPTEN_BINDINGS(my_module) {
  class_<RawImage>("RawImage")
    .property("buffer", &RawImage::buffer)
    .property("width", &RawImage::width)
    .property("height", &RawImage::height);
  function("quantize", &quantize);
  function("zx_quantize", &zx_quantize);
  function("version", &version);
  function("free_result", &free_result);
 }
--- a/codecs/imagequant/imagequant.d.ts
+++ b/codecs/imagequant/imagequant.d.ts
@@ -0,0 +1,15 @@
 interface RawImage {
  buffer: Uint8Array;
  width: number;
  height: number;
 }
 interface QuantizerModule extends EmscriptenWasm.Module {
  quantize(data: BufferSource, width: number, height: number, numColors: number, dither: number): RawImage;
  zx_quantize(data: BufferSource, width: number, height: number, dither: number): RawImage;
  free_result(): void;
 }
 export default function(opts: EmscriptenWasm.ModuleOpts): QuantizerModule;
--- a/codecs/imagequant/imagequant.js
+++ b/codecs/imagequant/imagequant.js
--- a/codecs/imagequant/imagequant.wasm
+++ b/codecs/imagequant/imagequant.wasm
--- a/codecs/imagequant/package-lock.json
+++ b/codecs/imagequant/package-lock.json
--- a/codecs/imagequant/package.json
+++ b/codecs/imagequant/package.json
@@ -0,0 +1,13 @@
 {
  "name": "imagequant",
  "scripts": {
    "install": "napa",
    "build": "docker run --rm -v $(pwd):/src trzeci/emscripten ./build.sh"
  },
  "napa": {
    "libimagequant": "ImageOptim/libimagequant#2.12.1"
  },
  "devDependencies": {
    "napa": "^3.0.0"
  }
 }
--- a/codecs/mozjpeg_enc/README.md
+++ b/codecs/mozjpeg_enc/README.md
@@ -6,8 +6,6 @@
 ## Dependencies
 - Docker
 - Automake
 - pkg-config
 ## Example
@@ -19,26 +17,27 @@ See `example.html`
 Returns the version of MozJPEG as a number. va.b.c is encoded as 0x0a0b0c
 ### `uint8_t* create_buffer(int width, int height)`
 Allocates an RGBA buffer for an image with the given dimension.
 ### `void destroy_buffer(uint8_t* p)`
 Frees a buffer created with `create_buffer`.
 ### `void encode(uint8_t* image_buffer, int image_width, int image_height, int quality)`
 Encodes the given image with given dimension to JPEG. `quality` is a number between 0 and 100. The higher the number, the better the quality of the encoded image. The result is implicitly stored and can be accessed using the `get_result_*()` functions.
 ### `void free_result()`
 Frees the result created by `encode()`.
-### `int get_result_pointer()`
+### `Uint8Array encode(std::string image_in, int image_width, int image_height, MozJpegOptions opts)`
-Returns the pointer to the start of the buffer holding the encoded data.
+Encodes the given image with given dimension to JPEG. Options looks like this:
-### `int get_result_size()`
+```c++
-
+struct MozJpegOptions {
-Returns the length of the buffer holding the encoded data.
+  int quality;
  bool baseline;
  bool arithmetic;
  bool progressive;
  bool optimize_coding;
  int smoothing;
  int color_space;
  int quant_table;
  bool trellis_multipass;
  bool trellis_opt_zero;
  bool trellis_opt_table;
  int trellis_loops;
 };
 ```
--- a/codecs/mozjpeg_enc/build.sh
+++ b/codecs/mozjpeg_enc/build.sh
@@ -0,0 +1,53 @@
 #!/bin/bash
 set -e
 export OPTIMIZE="-Os"
 export LDFLAGS="${OPTIMIZE}"
 export CFLAGS="${OPTIMIZE}"
 export CPPFLAGS="${OPTIMIZE}"
 apt-get update
 apt-get install -qqy autoconf libtool libpng-dev pkg-config
 echo "============================================="
 echo "Compiling mozjpeg"
 echo "============================================="
 (
  cd node_modules/mozjpeg
  autoreconf -fiv
  emconfigure ./configure --without-simd
  emmake make libjpeg.la
 )
 echo "============================================="
 echo "Compiling mozjpeg done"
 echo "============================================="
 echo "============================================="
 echo "Compiling wasm bindings"
 echo "============================================="
 (
  emcc \
    --bind \
    ${OPTIMIZE} \
    -s WASM=1 \
    -s ALLOW_MEMORY_GROWTH=1 \
    -s MODULARIZE=1 \
    -s 'EXPORT_NAME="mozjpeg_enc"' \
    -I node_modules/mozjpeg \
    -o ./mozjpeg_enc.js \
    -Wno-deprecated-register \
    -Wno-writable-strings \
    node_modules/mozjpeg/rdswitch.c \
    -x c++ -std=c++11 \
    mozjpeg_enc.cpp \
    node_modules/mozjpeg/.libs/libjpeg.a
 )
 echo "============================================="
 echo "Compiling wasm bindings done"
 echo "============================================="
 echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
 echo "Did you update your docker image?"
 echo "Run \`docker pull trzeci/emscripten\`"
 echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
--- a/codecs/mozjpeg_enc/example.html
+++ b/codecs/mozjpeg_enc/example.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <script src='mozjpeg_enc.js'></script>
 <script>
-  const Module = mozjpeg_enc();
+  const module = mozjpeg_enc();
  async function loadImage(src) {
    // Load image
@@ -17,27 +17,23 @@
    return ctx.getImageData(0, 0, img.width, img.height);
  }
-  Module.onRuntimeInitialized = async _ => {
+  module.onRuntimeInitialized = async _ => {
-    const api = {
+    console.log('Version:', module.version().toString(16));
      version: Module.cwrap('version', 'number', []),
      create_buffer: Module.cwrap('create_buffer', 'number', ['number', 'number']),
      destroy_buffer: Module.cwrap('destroy_buffer', '', ['number']),
      encode: Module.cwrap('encode', '', ['number', 'number', 'number', 'number']),
      free_result: Module.cwrap('free_result', '', ['number']),
      get_result_pointer: Module.cwrap('get_result_pointer', 'number', []),
      get_result_size: Module.cwrap('get_result_size', 'number', []),
    };
    console.log('Version:', api.version().toString(16));
    const image = await loadImage('../example.png');
-    const p = api.create_buffer(image.width, image.height);
+    const result = module.encode(image.data, image.width, image.height, {
-    Module.HEAP8.set(image.data, p);
+      quality: 40,
-    api.encode(p, image.width, image.height, 2);
+      baseline: false,
-    const resultPointer = api.get_result_pointer();
+      arithmetic: false,
-    const resultSize = api.get_result_size();
+      progressive: true,
-    const resultView = new Uint8Array(Module.HEAP8.buffer, resultPointer, resultSize);
+      optimize_coding: true,
-    const result = new Uint8Array(resultView);
+      smoothing: 0,
-    api.free_result(resultPointer);
+      color_space: 3,
-    api.destroy_buffer(p);
+      quant_table: 3,
      trellis_multipass: true,
      trellis_opt_zero: true,
      trellis_opt_table: true,
      trellis_loops: 1,
    });
    const blob = new Blob([result], {type: 'image/jpeg'});
    const blobURL = URL.createObjectURL(blob);
--- a/codecs/mozjpeg_enc/mozjpeg_enc.cpp
+++ b/codecs/mozjpeg_enc/mozjpeg_enc.cpp
@@ -1,17 +1,36 @@
-#include "emscripten.h"
+#include <emscripten/bind.h>
 #include <emscripten/val.h>
 #include <stdlib.h>
 #include <inttypes.h>
 #include <stdio.h>
 #include <setjmp.h>
 #include <string.h>
 #include "jpeglib.h"
 #include "config.h"
 #include "jpeglib.h"
 #include "cdjpeg.h"
-// MozJPEG doesn’t expose a numeric version, so I have to do some fun C macro hackery to turn it into a string. More details here: https://gcc.gnu.org/onlinedocs/cpp/Stringizing.html
+using namespace emscripten;
 // MozJPEG doesn’t expose a numeric version, so I have to do some fun C macro hackery to turn it
 // into a string. More details here: https://gcc.gnu.org/onlinedocs/cpp/Stringizing.html
 #define xstr(s) str(s)
 #define str(s) #s
-EMSCRIPTEN_KEEPALIVE
+struct MozJpegOptions {
  int quality;
  bool baseline;
  bool arithmetic;
  bool progressive;
  bool optimize_coding;
  int smoothing;
  int color_space;
  int quant_table;
  bool trellis_multipass;
  bool trellis_opt_zero;
  bool trellis_opt_table;
  int trellis_loops;
 };
 int version() {
  char buffer[] = xstr(MOZJPEG_VERSION);
  int version = 0;
@@ -28,27 +47,11 @@ int version() {
  return version;
 }
-EMSCRIPTEN_KEEPALIVE
+uint8_t* last_result;
-uint8_t* create_buffer(int width, int height) {
+struct jpeg_compress_struct cinfo;
  return malloc(width * height * 4 * sizeof(uint8_t));
 }
-EMSCRIPTEN_KEEPALIVE
+val encode(std::string image_in, int image_width, int image_height, MozJpegOptions opts) {
-void destroy_buffer(uint8_t* p) {
+  uint8_t* image_buffer = (uint8_t*) image_in.c_str();
  free(p);
 }
 int result[2];
 EMSCRIPTEN_KEEPALIVE
 void encode(uint8_t* image_buffer, int image_width, int image_height, int quality) {
  // Manually convert RGBA data into RGB
  for(int y = 0; y < image_height; y++) {
    for(int x = 0; x < image_width; x++) {
      image_buffer[(y*image_width + x)*3 + 0] = image_buffer[(y*image_width + x)*4 + 0];
      image_buffer[(y*image_width + x)*3 + 1] = image_buffer[(y*image_width + x)*4 + 1];
      image_buffer[(y*image_width + x)*3 + 2] = image_buffer[(y*image_width + x)*4 + 2];
    }
  }
  // The code below is basically the `write_JPEG_file` function from
  // https://github.com/mozilla/mozjpeg/blob/master/example.c
@@ -61,7 +64,6 @@ void encode(uint8_t* image_buffer, int image_width, int image_height, int qualit
   * compression/decompression processes, in existence at once.  We refer
   * to any one struct (and its associated working data) as a "JPEG object".
   */
  struct jpeg_compress_struct cinfo;
  /* This struct represents a JPEG error handler.  It is declared separately
   * because applications often want to supply a specialized error handler
   * (see the second half of this file for an example).  But here we just
@@ -109,18 +111,48 @@ void encode(uint8_t* image_buffer, int image_width, int image_height, int qualit
   */
  cinfo.image_width = image_width;      /* image width and height, in pixels */
  cinfo.image_height = image_height;
-  cinfo.input_components = 3;           /* # of color components per pixel */
+  cinfo.input_components = 4;           /* # of color components per pixel */
-  cinfo.in_color_space = JCS_RGB;       /* colorspace of input image */
+  cinfo.in_color_space = JCS_EXT_RGBA;  /* colorspace of input image */
  /* Now use the library's routine to set default compression parameters.
   * (You must set at least cinfo.in_color_space before calling this,
   * since the defaults depend on the source color space.)
   */
  jpeg_set_defaults(&cinfo);
  /* Now you can set any non-default parameters you wish to.
   * Here we just illustrate the use of quality (quantization table) scaling:
   */
-  jpeg_set_quality(&cinfo, quality, TRUE /* limit to baseline-JPEG values */);
+  jpeg_set_colorspace(&cinfo, (J_COLOR_SPACE) opts.color_space);
  if (opts.quant_table != -1) {
    jpeg_c_set_int_param(&cinfo, JINT_BASE_QUANT_TBL_IDX, opts.quant_table);
  }
  cinfo.optimize_coding = opts.optimize_coding;
  if (opts.arithmetic) {
    cinfo.arith_code = TRUE;
    cinfo.optimize_coding = FALSE;
  }
  cinfo.smoothing_factor = opts.smoothing;
  jpeg_c_set_bool_param(&cinfo, JBOOLEAN_USE_SCANS_IN_TRELLIS, opts.trellis_multipass);
  jpeg_c_set_bool_param(&cinfo, JBOOLEAN_TRELLIS_EOB_OPT, opts.trellis_opt_zero);
  jpeg_c_set_bool_param(&cinfo, JBOOLEAN_TRELLIS_Q_OPT, opts.trellis_opt_table);
  jpeg_c_set_int_param(&cinfo, JINT_TRELLIS_NUM_LOOPS, opts.trellis_loops);
  std::string quality_str = std::to_string(opts.quality);
  char const *pqual = quality_str.c_str();
  set_quality_ratings(&cinfo, (char*) pqual, opts.baseline);
  if (!opts.baseline && opts.progressive) {
    jpeg_simple_progression(&cinfo);
  } else {
    cinfo.num_scans = 0;
    cinfo.scan_info = NULL;
  }
  /* Step 4: Start compressor */
  /* TRUE ensures that we will write a complete interchange-JPEG file.
@@ -136,7 +168,7 @@ void encode(uint8_t* image_buffer, int image_width, int image_height, int qualit
   * To keep things simple, we pass one scanline per call; you can pass
   * more if you wish, though.
   */
-  row_stride = image_width * 3; /* JSAMPLEs per row in image_buffer */
+  row_stride = image_width * 4; /* JSAMPLEs per row in image_buffer */
  while (cinfo.next_scanline < cinfo.image_height) {
    /* jpeg_write_scanlines expects an array of pointers to scanlines.
@@ -152,27 +184,34 @@ void encode(uint8_t* image_buffer, int image_width, int image_height, int qualit
  jpeg_finish_compress(&cinfo);
  /* Step 7: release JPEG compression object */
-  result[0] = (int)output;
+  last_result = output;
  result[1] = size;
  /* This is an important step since it will release a good deal of memory. */
  jpeg_destroy_compress(&cinfo);
  /* And we're done! */
  return val(typed_memory_view(size, output));
 }
 EMSCRIPTEN_KEEPALIVE
 void free_result() {
-  free(result[0]); // not sure if this is right with mozjpeg
+  /* This is an important step since it will release a good deal of memory. */
  jpeg_destroy_compress(&cinfo);
 }
-EMSCRIPTEN_KEEPALIVE
+EMSCRIPTEN_BINDINGS(my_module) {
-int get_result_pointer() {
+  value_object<MozJpegOptions>("MozJpegOptions")
-  return result[0];
+    .field("quality", &MozJpegOptions::quality)
-}
+    .field("baseline", &MozJpegOptions::baseline)
    .field("arithmetic", &MozJpegOptions::arithmetic)
    .field("progressive", &MozJpegOptions::progressive)
    .field("optimize_coding", &MozJpegOptions::optimize_coding)
    .field("smoothing", &MozJpegOptions::smoothing)
    .field("color_space", &MozJpegOptions::color_space)
    .field("quant_table", &MozJpegOptions::quant_table)
    .field("trellis_multipass", &MozJpegOptions::trellis_multipass)
    .field("trellis_opt_zero", &MozJpegOptions::trellis_opt_zero)
    .field("trellis_opt_table", &MozJpegOptions::trellis_opt_table)
    .field("trellis_loops", &MozJpegOptions::trellis_loops)
    ;
-EMSCRIPTEN_KEEPALIVE
+  function("version", &version);
-int get_result_size() {
+  function("encode", &encode);
-  return result[1];
+  function("free_result", &free_result);
 }
--- a/codecs/mozjpeg_enc/mozjpeg_enc.d.ts
+++ b/codecs/mozjpeg_enc/mozjpeg_enc.d.ts
@@ -1 +1,8 @@
-export default function(opts: EmscriptenWasm.ModuleOpts): EmscriptenWasm.Module;
+import { EncodeOptions } from '../../src/codecs/mozjpeg/encoder-meta';
 interface MozJPEGModule extends EmscriptenWasm.Module {
  encode(data: BufferSource, width: number, height: number, options: EncodeOptions): Uint8Array;
  free_result(): void;
 }
 export default function(opts: EmscriptenWasm.ModuleOpts): MozJPEGModule;
--- a/codecs/mozjpeg_enc/mozjpeg_enc.js
+++ b/codecs/mozjpeg_enc/mozjpeg_enc.js
--- a/codecs/mozjpeg_enc/mozjpeg_enc.wasm
+++ b/codecs/mozjpeg_enc/mozjpeg_enc.wasm
--- a/codecs/mozjpeg_enc/package.json
+++ b/codecs/mozjpeg_enc/package.json
@@ -2,9 +2,7 @@
  "name": "mozjpeg_enc",
  "scripts": {
    "install": "napa",
-    "build": "npm run build:library && npm run build:wasm",
+    "build": "docker run --rm -v $(pwd):/src trzeci/emscripten ./build.sh"
    "build:library": "cd node_modules/mozjpeg && autoreconf -fiv && docker run --rm -v $(pwd):/src trzeci/emscripten emconfigure ./configure --without-simd && docker run --rm -v $(pwd):/src trzeci/emscripten emmake make libjpeg.la",
    "build:wasm": "docker run --rm -v $(pwd):/src trzeci/emscripten emcc -O3 -s WASM=1 -s EXTRA_EXPORTED_RUNTIME_METHODS='[\"cwrap\"]' -s ALLOW_MEMORY_GROWTH=1 -s MODULARIZE=1 -s 'EXPORT_NAME=\"mozjpeg_enc\"' -I node_modules/mozjpeg -o ./mozjpeg_enc.js mozjpeg_enc.c node_modules/mozjpeg/.libs/libjpeg.a"
  },
  "napa": {
    "mozjpeg": "mozilla/mozjpeg#v3.3.1"
--- a/codecs/optipng/.gitignore
+++ b/codecs/optipng/.gitignore
@@ -0,0 +1,2 @@
 build/
 *.o
--- a/codecs/optipng/README.md
+++ b/codecs/optipng/README.md
@@ -0,0 +1,26 @@
 # OptiPNG
 - Source: <https://sourceforge.net/project/optipng>
 - Version: v0.7.7
 ## Dependencies
 - Docker
 ## Example
 See `example.html`
 ## API
 ### `int version()`
 Returns the version of optipng as a number. va.b.c is encoded as 0x0a0b0c
 ### `ArrayBuffer compress(std::string buffer, {level})`;
 `compress` will re-compress the given PNG image via `buffer`. `level` is a number between 0 and 7.
 ### `void free_result()`
 Frees the result created by `compress()`.
--- a/codecs/optipng/build.sh
+++ b/codecs/optipng/build.sh
@@ -0,0 +1,87 @@
 #!/bin/bash
 set -e
 export OPTIMIZE="-Os"
 export PREFIX="/src/build"
 export CFLAGS="${OPTIMIZE} -I${PREFIX}/include/"
 export CPPFLAGS="${OPTIMIZE} -I${PREFIX}/include/"
 export LDFLAGS="${OPTIMIZE} -L${PREFIX}/lib/"
 apt-get update
 apt-get install -qqy autoconf libtool
 echo "============================================="
 echo "Compiling zlib"
 echo "============================================="
 test -n "$SKIP_ZLIB" || (
  cd node_modules/zlib
  emconfigure ./configure --prefix=${PREFIX}/
  emmake make
  emmake make install
 )
 echo "============================================="
 echo "Compiling zlib done"
 echo "============================================="
 echo "============================================="
 echo "Compiling libpng"
 echo "============================================="
 test -n "$SKIP_LIBPNG" || (
  cd node_modules/libpng
  autoreconf -i
  emconfigure ./configure --with-zlib-prefix=${PREFIX}/ --prefix=${PREFIX}/
  emmake make
  emmake make install
 )
 echo "============================================="
 echo "Compiling libpng done"
 echo "============================================="
 echo "============================================="
 echo "Compiling optipng"
 echo "============================================="
 (
  emcc \
    ${OPTIMIZE} \
    -Wno-implicit-function-declaration \
    -I ${PREFIX}/include \
    -I node_modules/optipng/src/opngreduc \
    -I node_modules/optipng/src/pngxtern \
    -I node_modules/optipng/src/cexcept \
    -I node_modules/optipng/src/gifread \
    -I node_modules/optipng/src/pnmio \
    -I node_modules/optipng/src/minitiff \
    --std=c99 -c \
    node_modules/optipng/src/opngreduc/*.c \
    node_modules/optipng/src/pngxtern/*.c \
    node_modules/optipng/src/gifread/*.c \
    node_modules/optipng/src/minitiff/*.c \
    node_modules/optipng/src/pnmio/*.c \
    node_modules/optipng/src/optipng/*.c
  emcc \
    --bind \
    ${OPTIMIZE} \
    -s ALLOW_MEMORY_GROWTH=1 -s MODULARIZE=1 -s 'EXPORT_NAME="optipng"' \
    -I ${PREFIX}/include \
    -I node_modules/optipng/src/opngreduc \
    -I node_modules/optipng/src/pngxtern \
    -I node_modules/optipng/src/cexcept \
    -I node_modules/optipng/src/gifread \
    -I node_modules/optipng/src/pnmio \
    -I node_modules/optipng/src/minitiff \
    -o "optipng.js" \
    --std=c++11 \
    optipng.cpp \
    *.o \
    ${PREFIX}/lib/libz.so ${PREFIX}/lib/libpng.a
 )
 echo "============================================="
 echo "Compiling optipng done"
 echo "============================================="
 echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
 echo "Did you update your docker image?"
 echo "Run \`docker pull trzeci/emscripten\`"
 echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
--- a/codecs/optipng/example.html
+++ b/codecs/optipng/example.html
@@ -0,0 +1,19 @@
 <!doctype html>
 <script src='optipng.js'></script>
 <script>
  const Module = optipng();
  Module.onRuntimeInitialized = async _ => {
    console.log('Version:', Module.version().toString(16));
    const image = await fetch('../example_palette.png').then(r => r.arrayBuffer());
    const newImage = Module.compress(image, {level: 3});
    console.log('done');
    Module.free_result();
    console.log(`Old size: ${image.byteLength}, new size: ${newImage.byteLength} (${newImage.byteLength/image.byteLength*100}%)`);
    const blobURL = URL.createObjectURL(new Blob([newImage], {type: 'image/png'}));
    const img = document.createElement('img');
    img.src = blobURL;
    document.body.appendChild(img);
  };
 </script>
--- a/codecs/optipng/optipng.cpp
+++ b/codecs/optipng/optipng.cpp
@@ -0,0 +1,53 @@
 #include "emscripten/bind.h"
 #include "emscripten/val.h"
 #include <stdio.h>
 using namespace emscripten;
 extern "C" int main(int argc, char *argv[]);
 int version() {
  // FIXME (@surma): Haven’t found a version in optipng :(
  return 0;
 }
 struct OptiPngOpts {
  int level;
 };
 uint8_t* result;
 val compress(std::string png, OptiPngOpts opts) {
  remove("input.png");
  remove("output.png");
  FILE* infile = fopen("input.png", "wb");
  fwrite(png.c_str(), png.length(), 1, infile);
  fflush(infile);
  fclose(infile);
  char optlevel[8];
  sprintf(&optlevel[0], "-o%d", opts.level);
  char* args[] = {"optipng", optlevel, "-out", "output.png", "input.png"};
  main(5, args);
  FILE *outfile = fopen("output.png", "rb");
  fseek(outfile, 0, SEEK_END);
  int fsize = ftell(outfile);
  result = (uint8_t*) malloc(fsize);
  fseek(outfile, 0, SEEK_SET);
  fread(result, fsize, 1, outfile);
  return val(typed_memory_view(fsize, result));
 }
 void free_result() {
  free(result);
 }
 EMSCRIPTEN_BINDINGS(my_module) {
  value_object<OptiPngOpts>("OptiPngOpts")
    .field("level", &OptiPngOpts::level);
  function("version", &version);
  function("compress", &compress);
  function("free_result", &free_result);
 }
--- a/codecs/optipng/optipng.d.ts
+++ b/codecs/optipng/optipng.d.ts
@@ -0,0 +1,10 @@
 import {EncodeOptions} from "src/codecs/optipng/encoder";
 export interface OptiPngModule extends EmscriptenWasm.Module {
  compress(data: BufferSource, opts: EncodeOptions): Uint8Array;
  free_result(): void;
 }
 export default function(opts: EmscriptenWasm.ModuleOpts): OptiPngModule;
--- a/codecs/optipng/optipng.js
+++ b/codecs/optipng/optipng.js
--- a/codecs/optipng/optipng.wasm
+++ b/codecs/optipng/optipng.wasm
--- a/codecs/optipng/package-lock.json
+++ b/codecs/optipng/package-lock.json
--- a/codecs/optipng/package.json
+++ b/codecs/optipng/package.json
@@ -0,0 +1,22 @@
 {
  "name": "optipng",
  "scripts": {
    "install": "tar-dependency install && napa",
    "build": "npm run build:wasm",
    "build:wasm": "docker run --rm -v $(pwd):/src -e SKIP_ZLIB=\"${SKIP_ZLIB}\" -e SKIP_LIBPNG=\"${SKIP_LIBPNG}\" trzeci/emscripten ./build.sh"
  },
  "tarDependencies": {
    "node_modules/optipng": {
      "url": "https://netcologne.dl.sourceforge.net/project/optipng/OptiPNG/optipng-0.7.7/optipng-0.7.7.tar.gz",
      "strip": 1
    }
  },
  "napa": {
    "libpng": "emscripten-ports/libpng",
    "zlib": "emscripten-ports/zlib"
  },
  "dependencies": {
    "napa": "^3.0.0",
    "tar-dependency": "0.0.3"
  }
 }
--- a/codecs/webp_dec/README.md
+++ b/codecs/webp_dec/README.md
@@ -13,30 +13,10 @@ See `example.html`
 Returns the version of libwebp as a number. va.b.c is encoded as 0x0a0b0c
-### `uint8_t* create_buffer(int size)`
+### `RawImage decode(std::string buffer)`
-Allocates an buffer for the file data.
+Decodes the given webp buffer into raw RGBA. `RawImage` is a class with 3 fields: `buffer`, `width`, and `height`.
 ### `void destroy_buffer(uint8_t* p)`
 Frees a buffer created with `create_buffer`.
 ### `void decode(uint8_t* img_in, int size)`
 Decodes the given webp file into raw RGBA. The result is implicitly stored and can be accessed using the `get_result_*()` functions.
 ### `void free_result()`
 Frees the result created by `decode()`.
 ### `int get_result_pointer()`
 Returns the pointer to the start of the buffer holding the encoded data. Length is width x height x 4 bytes.
 ### `int get_result_width()`
 Returns the width of the image.
 ### `int get_result_height()`
 Returns the height of the image.
--- a/codecs/webp_dec/build.sh
+++ b/codecs/webp_dec/build.sh
@@ -0,0 +1,34 @@
 #!/bin/bash
 set -e
 export OPTIMIZE="-Os"
 export LDFLAGS="${OPTIMIZE}"
 export CFLAGS="${OPTIMIZE}"
 export CPPFLAGS="${OPTIMIZE}"
 echo "============================================="
 echo "Compiling wasm bindings"
 echo "============================================="
 (
  emcc \
    ${OPTIMIZE} \
    --bind \
    -s ALLOW_MEMORY_GROWTH=1 \
    -s MODULARIZE=1 \
    -s 'EXPORT_NAME="webp_dec"' \
    --std=c++11 \
    -I node_modules/libwebp \
    -o ./webp_dec.js \
    node_modules/libwebp/src/{dec,dsp,demux,enc,mux,utils}/*.c \
    -x c++ \
    webp_dec.cpp
 )
 echo "============================================="
 echo "Compiling wasm bindings done"
 echo "============================================="
 echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
 echo "Did you update your docker image?"
 echo "Run \`docker pull trzeci/emscripten\`"
 echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
--- a/codecs/webp_dec/example.html
+++ b/codecs/webp_dec/example.html
@@ -9,35 +9,14 @@
  }
  Module.onRuntimeInitialized = async _ => {
-    const api = {
+    console.log('Version:', Module.version().toString(16));
      version: Module.cwrap('version', 'number', []),
      create_buffer: Module.cwrap('create_buffer', 'number', ['number', 'number']),
      destroy_buffer: Module.cwrap('destroy_buffer', '', ['number']),
      decode: Module.cwrap('decode', '', ['number', 'number']),
      free_result: Module.cwrap('free_result', '', ['number']),
      get_result_pointer: Module.cwrap('get_result_pointer', 'number', []),
      get_result_width: Module.cwrap('get_result_width', 'number', []),
      get_result_height: Module.cwrap('get_result_height', 'number', []),
    };
    console.log('Version:', api.version().toString(16));
    const image = await loadFile('../example.webp');
-    const p = api.create_buffer(image.byteLength);
+    const result = Module.decode(image);
-    Module.HEAP8.set(new Uint8Array(image), p);
+    const imageData = new ImageData(new Uint8ClampedArray(result.buffer), result.width, result.height);
-    api.decode(p, image.byteLength);
+    Module.free_result();
    const resultPointer = api.get_result_pointer();
    if(resultPointer === 0) {
      throw new Error("Could not decode image");
    }
    const resultWidth = api.get_result_width();
    const resultHeight = api.get_result_height();
    const resultView = new Uint8Array(Module.HEAP8.buffer, resultPointer, resultWidth * resultHeight * 4);
    const result = new Uint8ClampedArray(resultView);
    const imageData = new ImageData(result, resultWidth, resultHeight);
    api.free_result(resultPointer);
    api.destroy_buffer(p);
    const canvas = document.createElement('canvas');
-    canvas.width = resultWidth;
+    canvas.width = result.width;
-    canvas.height = resultHeight;
+    canvas.height = result.height;
    document.body.appendChild(canvas);
    const ctx = canvas.getContext('2d');
    ctx.putImageData(imageData, 0, 0);
--- a/codecs/webp_dec/package.json
+++ b/codecs/webp_dec/package.json
@@ -2,7 +2,7 @@
  "name": "webp_dec",
  "scripts": {
    "install": "napa",
-    "build": "docker run --rm -v $(pwd):/src trzeci/emscripten emcc -O3 -s WASM=1 -s EXTRA_EXPORTED_RUNTIME_METHODS='[\"cwrap\"]' -s ALLOW_MEMORY_GROWTH=1 -s MODULARIZE=1 -s 'EXPORT_NAME=\"webp_dec\"' -I node_modules/libwebp -o ./webp_dec.js webp_dec.c node_modules/libwebp/src/{dec,dsp,demux,enc,mux,utils}/*.c"
+    "build": "docker run --rm -v $(pwd):/src trzeci/emscripten ./build.sh"
  },
  "napa": {
    "libwebp": "webmproject/libwebp#v1.0.0"
--- a/codecs/webp_dec/webp_dec.c
+++ b/codecs/webp_dec/webp_dec.c
@@ -1,51 +0,0 @@
 #include "emscripten.h"
 #include "src/webp/decode.h"
 #include "src/webp/demux.h"
 #include <stdlib.h>
 EMSCRIPTEN_KEEPALIVE
 int version() {
  return WebPGetDecoderVersion();
 }
 EMSCRIPTEN_KEEPALIVE
 uint8_t* create_buffer(int size) {
  return malloc(size);
 }
 EMSCRIPTEN_KEEPALIVE
 void destroy_buffer(uint8_t* p) {
  free(p);
 }
 int result[3];
 EMSCRIPTEN_KEEPALIVE
 void decode(uint8_t* img_in, int size) {
  int width, height;
  uint8_t* img_out = WebPDecodeRGBA(img_in, size, &width, &height);
  result[0] = (int)img_out;
  result[1] = width;
  result[2] = height;
 }
 EMSCRIPTEN_KEEPALIVE
 void free_result() {
  WebPFree(result[0]);
 }
 EMSCRIPTEN_KEEPALIVE
 int get_result_pointer() {
  return result[0];
 }
 EMSCRIPTEN_KEEPALIVE
 int get_result_width() {
  return result[1];
 }
 EMSCRIPTEN_KEEPALIVE
 int get_result_height() {
  return result[2];
 }
--- a/codecs/webp_dec/webp_dec.cpp
+++ b/codecs/webp_dec/webp_dec.cpp
@@ -0,0 +1,47 @@
 #include "emscripten/bind.h"
 #include "emscripten/val.h"
 #include "src/webp/decode.h"
 #include "src/webp/demux.h"
 #include <string>
 using namespace emscripten;
 int version() {
  return WebPGetDecoderVersion();
 }
 class RawImage {
 public:
  val buffer;
  int width;
  int height;
  RawImage(val b, int w, int h)
    : buffer(b), width(w), height(h) {}
 };
 uint8_t* last_result;
 RawImage decode(std::string buffer) {
  int width, height;
  last_result = WebPDecodeRGBA((const uint8_t*)buffer.c_str(), buffer.size(), &width, &height);
  return RawImage(
    val(typed_memory_view(width*height*4, last_result)),
    width,
    height
  );
 }
 void free_result() {
  free(last_result);
 }
 EMSCRIPTEN_BINDINGS(my_module) {
  class_<RawImage>("RawImage")
    .property("buffer", &RawImage::buffer)
    .property("width", &RawImage::width)
    .property("height", &RawImage::height);
  function("decode", &decode);
  function("version", &version);
  function("free_result", &free_result);
 }
--- a/codecs/webp_dec/webp_dec.d.ts
+++ b/codecs/webp_dec/webp_dec.d.ts
@@ -0,0 +1,13 @@
 interface RawImage {
  buffer: Uint8Array;
  width: number;
  height: number;
 }
 interface WebPModule extends EmscriptenWasm.Module {
  decode(data: BufferSource): RawImage;
  free_result(): void;
 }
 export default function(opts: EmscriptenWasm.ModuleOpts): WebPModule;
--- a/codecs/webp_dec/webp_dec.js
+++ b/codecs/webp_dec/webp_dec.js
--- a/codecs/webp_dec/webp_dec.wasm
+++ b/codecs/webp_dec/webp_dec.wasm
--- a/codecs/webp_enc/README.md
+++ b/codecs/webp_enc/README.md
@@ -17,26 +17,10 @@ See `example.html`
 Returns the version of libwebp as a number. va.b.c is encoded as 0x0a0b0c
-### `uint8_t* create_buffer(int width, int height)`
+### `UInt8Array encode(uint8_t* image_buffer, int image_width, int image_height, WebPConfig config)`
-Allocates an RGBA buffer for an image with the given dimension.
+Encodes the given image with given dimension to WebP.
 ### `void destroy_buffer(uint8_t* p)`
 Frees a buffer created with `create_buffer`.
 ### `void encode(uint8_t* image_buffer, int image_width, int image_height, float quality)`
 Encodes the given image with given dimension to WebP. `quality` is a number between 0 and 100. The higher the number, the better the quality of the encoded image. The result is implicitly stored and can be accessed using the `get_result_*()` functions.
 ### `void free_result()`
-Frees the result created by `encode()`.
+Frees the last result created by `encode()`.
 ### `int get_result_pointer()`
 Returns the pointer to the start of the buffer holding the encoded data.
 ### `int get_result_size()`
 Returns the length of the buffer holding the encoded data.
--- a/codecs/webp_enc/build.sh
+++ b/codecs/webp_enc/build.sh
@@ -0,0 +1,34 @@
 #!/bin/bash
 set -e
 export OPTIMIZE="-Os"
 export LDFLAGS="${OPTIMIZE}"
 export CFLAGS="${OPTIMIZE}"
 export CPPFLAGS="${OPTIMIZE}"
 echo "============================================="
 echo "Compiling wasm bindings"
 echo "============================================="
 (
  emcc \
    ${OPTIMIZE} \
    --bind \
    -s ALLOW_MEMORY_GROWTH=1 \
    -s MODULARIZE=1 \
    -s 'EXPORT_NAME="webp_enc"' \
    --std=c++11 \
    -I node_modules/libwebp \
    -o ./webp_enc.js \
    node_modules/libwebp/src/{dec,dsp,demux,enc,mux,utils}/*.c \
    -x c++ \
    webp_enc.cpp
 )
 echo "============================================="
 echo "Compiling wasm bindings done"
 echo "============================================="
 echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
 echo "Did you update your docker image?"
 echo "Run \`docker pull trzeci/emscripten\`"
 echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
--- a/codecs/webp_enc/example.html
+++ b/codecs/webp_enc/example.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <script src='webp_enc.js'></script>
 <script>
-  const Module = webp_enc();
+  const module = webp_enc();
  async function loadImage(src) {
    // Load image
@@ -17,29 +17,43 @@
    return ctx.getImageData(0, 0, img.width, img.height);
  }
-  Module.onRuntimeInitialized = async _ => {
+  module.onRuntimeInitialized = async _ => {
-    const api = {
+    console.log('Version:', module.version().toString(16));
      version: Module.cwrap('version', 'number', []),
      create_buffer: Module.cwrap('create_buffer', 'number', ['number', 'number']),
      destroy_buffer: Module.cwrap('destroy_buffer', '', ['number']),
      encode: Module.cwrap('encode', '', ['number', 'number', 'number', 'number']),
      free_result: Module.cwrap('free_result', '', ['number']),
      get_result_pointer: Module.cwrap('get_result_pointer', 'number', []),
      get_result_size: Module.cwrap('get_result_size', 'number', []),
    };
    console.log('Version:', api.version().toString(16));
    const image = await loadImage('../example.png');
-    const p = api.create_buffer(image.width, image.height);
+    const result = module.encode(image.data, image.width, image.height, {
-    Module.HEAP8.set(image.data, p);
+      quality: 75,
-    api.encode(p, image.width, image.height, 2);
+      target_size: 0,
-    const resultPointer = api.get_result_pointer();
+      target_PSNR: 0,
-    const resultSize = api.get_result_size();
+      method: 4,
-    const resultView = new Uint8Array(Module.HEAP8.buffer, resultPointer, resultSize);
+      sns_strength: 50,
-    const result = new Uint8Array(resultView);
+      filter_strength: 60,
-    api.free_result(resultPointer);
+      filter_sharpness: 0,
-    api.destroy_buffer(p);
+      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,
    });
    console.log('size', result.length);
    const blob = new Blob([result], {type: 'image/webp'});
    module.free_result();
    const blobURL = URL.createObjectURL(blob);
    const img = document.createElement('img');
    img.src = blobURL;
--- a/codecs/webp_enc/package.json
+++ b/codecs/webp_enc/package.json
@@ -2,7 +2,7 @@
  "name": "webp_enc",
  "scripts": {
    "install": "napa",
-    "build": "docker run --rm -v $(pwd):/src trzeci/emscripten emcc -O3 -s WASM=1 -s EXTRA_EXPORTED_RUNTIME_METHODS='[\"cwrap\"]' -s ALLOW_MEMORY_GROWTH=1 -s MODULARIZE=1 -s 'EXPORT_NAME=\"webp_enc\"' -I node_modules/libwebp -o ./webp_enc.js webp_enc.c node_modules/libwebp/src/{dec,dsp,demux,enc,mux,utils}/*.c"
+    "build": "docker run --rm -v $(pwd):/src trzeci/emscripten ./build.sh"
  },
  "napa": {
    "libwebp": "webmproject/libwebp#v1.0.0"
--- a/codecs/webp_enc/webp_enc.c
+++ b/codecs/webp_enc/webp_enc.c
@@ -1,44 +0,0 @@
 #include "emscripten.h"
 #include "src/webp/encode.h"
 #include <stdlib.h>
 EMSCRIPTEN_KEEPALIVE
 int version() {
  return WebPGetEncoderVersion();
 }
 EMSCRIPTEN_KEEPALIVE
 uint8_t* create_buffer(int width, int height) {
  return malloc(width * height * 4 * sizeof(uint8_t));
 }
 EMSCRIPTEN_KEEPALIVE
 void destroy_buffer(uint8_t* p) {
  free(p);
 }
 int result[2];
 EMSCRIPTEN_KEEPALIVE
 void encode(uint8_t* img_in, int width, int height, float quality) {
  uint8_t* img_out;
  size_t size;
  size = WebPEncodeRGBA(img_in, width, height, width * 4, quality, &img_out);
  result[0] = (int)img_out;
  result[1] = size;
 }
 EMSCRIPTEN_KEEPALIVE
 void free_result() {
  WebPFree(result[0]);
 }
 EMSCRIPTEN_KEEPALIVE
 int get_result_pointer() {
  return result[0];
 }
 EMSCRIPTEN_KEEPALIVE
 int get_result_size() {
  return result[1];
 }
--- a/codecs/webp_enc/webp_enc.cpp
+++ b/codecs/webp_enc/webp_enc.cpp
@@ -0,0 +1,95 @@
 #include <emscripten/bind.h>
 #include <emscripten/val.h>
 #include "src/webp/encode.h"
 #include <stdlib.h>
 #include <string.h>
 #include <stdexcept>
 using namespace emscripten;
 int version() {
  return WebPGetEncoderVersion();
 }
 uint8_t* last_result;
 val encode(std::string img, int width, int height, WebPConfig config) {
  uint8_t* img_in = (uint8_t*) img.c_str();
  // A lot of this is duplicated from Encode in picture_enc.c
  WebPPicture pic;
  WebPMemoryWriter wrt;
  int ok;
  if (!WebPPictureInit(&pic)) {
    // shouldn't happen, except if system installation is broken
    throw std::runtime_error("Unexpected error");
  }
  pic.use_argb = !!config.lossless;
  pic.width = width;
  pic.height = height;
  pic.writer = WebPMemoryWrite;
  pic.custom_ptr = &wrt;
  WebPMemoryWriterInit(&wrt);
  ok = WebPPictureImportRGBA(&pic, (uint8_t*) img_in, width * 4) && WebPEncode(&config, &pic);
  WebPPictureFree(&pic);
  if (!ok) {
    WebPMemoryWriterClear(&wrt);
    throw std::runtime_error("Encode failed");
  }
  last_result = wrt.mem;
  return val(typed_memory_view(wrt.size, wrt.mem));
 }
 void free_result() {
  WebPFree(last_result);
 }
 EMSCRIPTEN_BINDINGS(my_module) {
  enum_<WebPImageHint>("WebPImageHint")
    .value("WEBP_HINT_DEFAULT", WebPImageHint::WEBP_HINT_DEFAULT)
    .value("WEBP_HINT_PICTURE", WebPImageHint::WEBP_HINT_PICTURE)
    .value("WEBP_HINT_PHOTO", WebPImageHint::WEBP_HINT_PHOTO)
    .value("WEBP_HINT_GRAPH", WebPImageHint::WEBP_HINT_GRAPH)
    ;
  value_object<WebPConfig>("WebPConfig")
    .field("lossless", &WebPConfig::lossless)
    .field("quality", &WebPConfig::quality)
    .field("method", &WebPConfig::method)
    .field("image_hint", &WebPConfig::image_hint)
    .field("target_size", &WebPConfig::target_size)
    .field("target_PSNR", &WebPConfig::target_PSNR)
    .field("segments", &WebPConfig::segments)
    .field("sns_strength", &WebPConfig::sns_strength)
    .field("filter_strength", &WebPConfig::filter_strength)
    .field("filter_sharpness", &WebPConfig::filter_sharpness)
    .field("filter_type", &WebPConfig::filter_type)
    .field("autofilter", &WebPConfig::autofilter)
    .field("alpha_compression", &WebPConfig::alpha_compression)
    .field("alpha_filtering", &WebPConfig::alpha_filtering)
    .field("alpha_quality", &WebPConfig::alpha_quality)
    .field("pass", &WebPConfig::pass)
    .field("show_compressed", &WebPConfig::show_compressed)
    .field("preprocessing", &WebPConfig::preprocessing)
    .field("partitions", &WebPConfig::partitions)
    .field("partition_limit", &WebPConfig::partition_limit)
    .field("emulate_jpeg_size", &WebPConfig::emulate_jpeg_size)
    .field("thread_level", &WebPConfig::thread_level)
    .field("low_memory", &WebPConfig::low_memory)
    .field("near_lossless", &WebPConfig::near_lossless)
    .field("exact", &WebPConfig::exact)
    .field("use_delta_palette", &WebPConfig::use_delta_palette)
    .field("use_sharp_yuv", &WebPConfig::use_sharp_yuv)
    ;
  function("version", &version);
  function("encode", &encode);
  function("free_result", &free_result);
 }
--- a/codecs/webp_enc/webp_enc.d.ts
+++ b/codecs/webp_enc/webp_enc.d.ts
@@ -0,0 +1,9 @@
 import { EncodeOptions } from '../../src/codecs/webp/encoder-meta';
 interface WebPModule extends EmscriptenWasm.Module {
  encode(data: BufferSource, width: number, height: number, options: EncodeOptions): Uint8Array;
  free_result(): void;
 }
 export default function(opts: EmscriptenWasm.ModuleOpts): WebPModule;
--- a/codecs/webp_enc/webp_enc.js
+++ b/codecs/webp_enc/webp_enc.js
--- a/codecs/webp_enc/webp_enc.wasm
+++ b/codecs/webp_enc/webp_enc.wasm
--- a/firebase.json
+++ b/firebase.json
@@ -1,54 +0,0 @@
 {
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
        "headers": [
          {
            "key": "Access-Control-Allow-Origin",
            "value": "*"
          }
        ]
      },
      {
        "source": "**/*.@(jpg|jpeg|gif|png|ico)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=7200"
          }
        ]
      },
      {
        "source": "**/*.@(js|css|json|manifest|map)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=31536000"
          }
        ]
      },
      {
        "source": "sw.js",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=0"
          }
        ]
      }
    ]
  }
 }
--- a/global.d.ts
+++ b/global.d.ts
@@ -13,10 +13,6 @@ declare namespace JSX {
  interface IntrinsicElements { }
 }
 declare module 'preact-i18n';
 declare module 'preact-material-components-drawer';
 declare module 'material-radial-progress';
 declare module 'classnames' {
  export default function classnames(...args: any[]): string;
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -4,12 +4,10 @@
  "version": "0.0.0",
  "license": "apache-2.0",
  "scripts": {
    "build:mozjpeg_enc": "cd codecs/mozjpeg_enc && npm run build",
    "build:codecs": "npm run build:mozjpeg_enc",
    "start": "webpack serve --host 0.0.0.0 --hot",
    "build": "webpack -p",
-    "lint": "tslint -c tslint.json -t verbose 'src/**/*.{ts,js}'",
+    "lint": "tslint -c tslint.json -t verbose 'src/**/*.{ts,tsx,js,jsx}'",
-    "lintfix": "tslint -c tslint.json -t verbose --fix 'src/**/*.{ts,js}'"
+    "lintfix": "tslint -c tslint.json -t verbose --fix 'src/**/*.{ts,tsx,js,jsx}'"
  },
  "husky": {
    "hooks": {
@@ -17,58 +15,56 @@
    }
  },
  "devDependencies": {
-    "@types/node": "^9.4.7",
+    "@types/node": "^9.6.23",
    "@types/pretty-bytes": "^5.1.0",
    "@types/webassembly-js-api": "0.0.1",
-    "babel-loader": "^7.1.4",
+    "@webcomponents/custom-elements": "^1.2.0",
    "babel-loader": "^7.1.5",
    "babel-plugin-jsx-pragmatic": "^1.0.2",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-react-constant-elements": "^6.23.0",
    "babel-plugin-transform-react-jsx": "^6.24.1",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.13",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.14",
-    "babel-preset-env": "^1.6.1",
+    "babel-preset-env": "^1.7.0",
    "babel-register": "^6.26.0",
    "clean-webpack-plugin": "^0.1.19",
-    "copy-webpack-plugin": "^4.5.1",
+    "copy-webpack-plugin": "^4.5.2",
    "css-loader": "^0.28.11",
    "exports-loader": "^0.7.0",
    "file-loader": "^1.1.11",
-    "html-webpack-plugin": "^3.0.6",
+    "html-webpack-plugin": "^3.2.0",
-    "husky": "^1.0.0-rc.9",
+    "husky": "^1.0.0-rc.13",
    "if-env": "^1.0.4",
    "loader-utils": "^1.1.0",
    "mini-css-extract-plugin": "^0.3.0",
-    "node-sass": "^4.7.2",
+    "node-sass": "^4.9.3",
-    "optimize-css-assets-webpack-plugin": "^4.0.0",
+    "optimize-css-assets-webpack-plugin": "^4.0.3",
    "progress-bar-webpack-plugin": "^1.11.0",
    "raw-loader": "^0.5.1",
-    "sass-loader": "^6.0.7",
+    "sass-loader": "^7.1.0",
    "script-ext-html-webpack-plugin": "^2.0.1",
    "source-map-loader": "^0.2.3",
-    "style-loader": "^0.20.3",
+    "style-loader": "^0.22.1",
-    "ts-loader": "^4.0.1",
+    "ts-loader": "^4.4.2",
-    "tslint": "^5.10.0",
+    "tslint": "^5.11.0",
    "tslint-config-airbnb": "^5.9.2",
    "tslint-config-semistandard": "^7.0.0",
-    "tslint-react": "^3.5.1",
+    "tslint-react": "^3.6.0",
-    "typescript": "^2.7.2",
+    "typescript": "^2.9.2",
    "typings-for-css-modules-loader": "^1.7.0",
-    "webpack": "^4.3.0",
+    "webpack": "^4.19.1",
-    "webpack-bundle-analyzer": "^2.11.1",
+    "webpack-bundle-analyzer": "^2.13.1",
-    "webpack-cli": "^2.0.13",
+    "webpack-cli": "^2.1.5",
-    "webpack-dev-server": "^3.1.1",
+    "webpack-dev-server": "^3.1.5",
-    "webpack-plugin-replace": "^1.1.1"
+    "webpack-plugin-replace": "^1.1.1",
-  },
+    "classnames": "^2.2.6",
  "dependencies": {
    "classnames": "^2.2.5",
    "comlink": "^3.0.3",
-    "comlink-loader": "^1.0.0",
+    "linkstate": "^1.1.1",
-    "material-components-web": "^0.32.0",
+    "preact": "^8.3.1",
-    "preact": "^8.2.7",
+    "pretty-bytes": "^5.1.0",
-    "preact-i18n": "^1.2.0",
+    "worker-plugin": "^1.1.1"
    "preact-material-components": "^1.3.7",
    "preact-router": "^2.6.0"
  }
 }
--- a/src/assets/favicon.ico
+++ b/src/assets/favicon.ico
--- a/src/assets/icon-large.png
+++ b/src/assets/icon-large.png
--- a/src/assets/icon-small.png
+++ b/src/assets/icon-small.png
--- a/src/assets/icon.png
+++ b/src/assets/icon.png
--- a/src/codecs/browser-bmp/encoder-meta.ts
+++ b/src/codecs/browser-bmp/encoder-meta.ts
@@ -0,0 +1,11 @@
 import { canvasEncodeTest } from '../generic/util';
 export interface EncodeOptions { }
 export interface EncoderState { type: typeof type; options: EncodeOptions; }
 export const type = 'browser-bmp';
 export const label = 'Browser BMP';
 export const mimeType = 'image/bmp';
 export const extension = 'bmp';
 export const defaultOptions: EncodeOptions = {};
 export const featureTest = () => canvasEncodeTest(mimeType);
--- a/src/codecs/browser-bmp/encoder.ts
+++ b/src/codecs/browser-bmp/encoder.ts
@@ -0,0 +1,6 @@
 import { mimeType } from './encoder-meta';
 import { canvasEncode } from '../../lib/util';
 export function encode(data: ImageData) {
  return canvasEncode(data, mimeType);
 }
--- a/src/codecs/browser-gif/encoder-meta.ts
+++ b/src/codecs/browser-gif/encoder-meta.ts
@@ -0,0 +1,11 @@
 import { canvasEncodeTest } from '../generic/util';
 export interface EncodeOptions {}
 export interface EncoderState { type: typeof type; options: EncodeOptions; }
 export const type = 'browser-gif';
 export const label = 'Browser GIF';
 export const mimeType = 'image/gif';
 export const extension = 'gif';
 export const defaultOptions: EncodeOptions = {};
 export const featureTest = () => canvasEncodeTest(mimeType);
--- a/src/codecs/browser-gif/encoder.ts
+++ b/src/codecs/browser-gif/encoder.ts
@@ -0,0 +1,6 @@
 import { mimeType } from './encoder-meta';
 import { canvasEncode } from '../../lib/util';
 export function encode(data: ImageData) {
  return canvasEncode(data, mimeType);
 }
--- a/src/codecs/browser-jp2/encoder-meta.ts
+++ b/src/codecs/browser-jp2/encoder-meta.ts
@@ -0,0 +1,11 @@
 import { canvasEncodeTest } from '../generic/util';
 export interface EncodeOptions { }
 export interface EncoderState { type: typeof type; options: EncodeOptions; }
 export const type = 'browser-jp2';
 export const label = 'Browser JPEG 2000';
 export const mimeType = 'image/jp2';
 export const extension = 'jp2';
 export const defaultOptions: EncodeOptions = {};
 export const featureTest = () => canvasEncodeTest(mimeType);
--- a/src/codecs/browser-jp2/encoder.ts
+++ b/src/codecs/browser-jp2/encoder.ts
@@ -0,0 +1,6 @@
 import { mimeType } from './encoder-meta';
 import { canvasEncode } from '../../lib/util';
 export function encode(data: ImageData) {
  return canvasEncode(data, mimeType);
 }
--- a/src/codecs/browser-jpeg/encoder-meta.ts
+++ b/src/codecs/browser-jpeg/encoder-meta.ts
@@ -0,0 +1,8 @@
 export interface EncodeOptions { quality: number; }
 export interface EncoderState { type: typeof type; options: EncodeOptions; }
 export const type = 'browser-jpeg';
 export const label = 'Browser JPEG';
 export const mimeType = 'image/jpeg';
 export const extension = 'jpg';
 export const defaultOptions: EncodeOptions = { quality: 0.75 };
--- a/src/codecs/browser-jpeg/encoder.ts
+++ b/src/codecs/browser-jpeg/encoder.ts
@@ -0,0 +1,6 @@
 import { EncodeOptions, mimeType } from './encoder-meta';
 import { canvasEncode } from '../../lib/util';
 export function encode(data: ImageData, { quality }: EncodeOptions) {
  return canvasEncode(data, mimeType, quality);
 }
--- a/src/codecs/browser-jpeg/options.ts
+++ b/src/codecs/browser-jpeg/options.ts
@@ -0,0 +1,3 @@
 import qualityOption from '../generic/quality-option';
 export default qualityOption({ min: 0, max: 1, step: 0.01 });
--- a/src/codecs/browser-pdf/encoder-meta.ts
+++ b/src/codecs/browser-pdf/encoder-meta.ts
@@ -0,0 +1,11 @@
 import { canvasEncodeTest } from '../generic/util';
 export interface EncodeOptions { }
 export interface EncoderState { type: typeof type; options: EncodeOptions; }
 export const type = 'browser-pdf';
 export const label = 'Browser PDF';
 export const mimeType = 'application/pdf';
 export const extension = 'pdf';
 export const defaultOptions: EncodeOptions = {};
 export const featureTest = () => canvasEncodeTest(mimeType);
--- a/src/codecs/browser-pdf/encoder.ts
+++ b/src/codecs/browser-pdf/encoder.ts
@@ -0,0 +1,6 @@
 import { mimeType } from './encoder-meta';
 import { canvasEncode } from '../../lib/util';
 export function encode(data: ImageData) {
  return canvasEncode(data, mimeType);
 }
--- a/src/codecs/browser-png/encoder-meta.ts
+++ b/src/codecs/browser-png/encoder-meta.ts
@@ -0,0 +1,8 @@
 export interface EncodeOptions {}
 export interface EncoderState { type: typeof type; options: EncodeOptions; }
 export const type = 'browser-png';
 export const label = 'Browser PNG';
 export const mimeType = 'image/png';
 export const extension = 'png';
 export const defaultOptions: EncodeOptions = {};
--- a/src/codecs/browser-png/encoder.tsx
+++ b/src/codecs/browser-png/encoder.tsx
@@ -0,0 +1,6 @@
 import { mimeType } from './encoder-meta';
 import { canvasEncode } from '../../lib/util';
 export function encode(data: ImageData) {
  return canvasEncode(data, mimeType);
 }
--- a/src/codecs/browser-tiff/encoder-meta.ts
+++ b/src/codecs/browser-tiff/encoder-meta.ts
@@ -0,0 +1,11 @@
 import { canvasEncodeTest } from '../generic/util';
 export interface EncodeOptions { }
 export interface EncoderState { type: typeof type; options: EncodeOptions; }
 export const type = 'browser-tiff';
 export const label = 'Browser TIFF';
 export const mimeType = 'image/tiff';
 export const extension = 'tiff';
 export const defaultOptions: EncodeOptions = {};
 export const featureTest = () => canvasEncodeTest(mimeType);
--- a/src/codecs/browser-tiff/encoder.ts
+++ b/src/codecs/browser-tiff/encoder.ts
@@ -0,0 +1,6 @@
 import { mimeType } from './encoder-meta';
 import { canvasEncode } from '../../lib/util';
 export function encode(data: ImageData) {
  return canvasEncode(data, mimeType);
 }
--- a/src/codecs/browser-webp/encoder-meta.ts
+++ b/src/codecs/browser-webp/encoder-meta.ts
@@ -0,0 +1,11 @@
 import { canvasEncodeTest } from '../generic/util';
 export interface EncodeOptions { quality: number; }
 export interface EncoderState { type: typeof type; options: EncodeOptions; }
 export const type = 'browser-webp';
 export const label = 'Browser WebP';
 export const mimeType = 'image/webp';
 export const extension = 'webp';
 export const defaultOptions: EncodeOptions = { quality: 0.75 };
 export const featureTest = () => canvasEncodeTest(mimeType);
--- a/src/codecs/browser-webp/encoder.ts
+++ b/src/codecs/browser-webp/encoder.ts
@@ -0,0 +1,6 @@
 import { EncodeOptions, mimeType } from './encoder-meta';
 import { canvasEncode } from '../../lib/util';
 export function encode(data: ImageData, { quality }: EncodeOptions) {
  return canvasEncode(data, mimeType, quality);
 }
--- a/src/codecs/browser-webp/options.ts
+++ b/src/codecs/browser-webp/options.ts
@@ -0,0 +1,3 @@
 import qualityOption from '../generic/quality-option';
 export default qualityOption({ min: 0, max: 1, step: 0.01 });
--- a/src/codecs/decoders.ts
+++ b/src/codecs/decoders.ts
@@ -0,0 +1,21 @@
 import { nativeDecode, sniffMimeType, canDecodeImage } from '../lib/util';
 import Processor from './processor';
 // tslint:disable-next-line:max-line-length It’s a data URL. Whatcha gonna do?
 const webpFile = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
 const nativeWebPSupported = canDecodeImage(webpFile);
 export async function decodeImage(blob: Blob, processor: Processor): Promise<ImageData> {
  const mimeType = await sniffMimeType(blob);
  try {
    if (mimeType === 'image/webp' && !(await nativeWebPSupported)) {
      return await processor.webpDecode(blob);
    }
    // Otherwise, just throw it at the browser's decoder.
    return await nativeDecode(blob);
  } catch (err) {
    throw Error("Couldn't decode image");
  }
 }
--- a/src/codecs/encoders.ts
+++ b/src/codecs/encoders.ts
@@ -1,13 +1,78 @@
-import * as mozJPEG from './mozjpeg/encoder';
+import * as identity from './identity/encoder-meta';
-import * as identity from './identity/encoder';
+import * as optiPNG from './optipng/encoder-meta';
 import * as mozJPEG from './mozjpeg/encoder-meta';
 import * as webP from './webp/encoder-meta';
 import * as browserPNG from './browser-png/encoder-meta';
 import * as browserJPEG from './browser-jpeg/encoder-meta';
 import * as browserWebP from './browser-webp/encoder-meta';
 import * as browserGIF from './browser-gif/encoder-meta';
 import * as browserTIFF from './browser-tiff/encoder-meta';
 import * as browserJP2 from './browser-jp2/encoder-meta';
 import * as browserBMP from './browser-bmp/encoder-meta';
 import * as browserPDF from './browser-pdf/encoder-meta';
 export interface EncoderSupportMap {
  [key: string]: boolean;
 }
 export type EncoderState =
  identity.EncoderState |
  optiPNG.EncoderState |
  mozJPEG.EncoderState |
  webP.EncoderState |
  browserPNG.EncoderState |
  browserJPEG.EncoderState |
  browserWebP.EncoderState |
  browserGIF.EncoderState |
  browserTIFF.EncoderState |
  browserJP2.EncoderState |
  browserBMP.EncoderState |
  browserPDF.EncoderState;
 export type EncoderOptions =
  identity.EncodeOptions |
  optiPNG.EncodeOptions |
  mozJPEG.EncodeOptions |
  webP.EncodeOptions |
  browserPNG.EncodeOptions |
  browserJPEG.EncodeOptions |
  browserWebP.EncodeOptions |
  browserGIF.EncodeOptions |
  browserTIFF.EncodeOptions |
  browserJP2.EncodeOptions |
  browserBMP.EncodeOptions |
  browserPDF.EncodeOptions;
 export type EncoderState = identity.EncoderState | mozJPEG.EncoderState;
 export type EncoderOptions = identity.EncodeOptions | mozJPEG.EncodeOptions;
 export type EncoderType = keyof typeof encoderMap;
 export const encoderMap = {
  [identity.type]: identity,
  [optiPNG.type]: optiPNG,
  [mozJPEG.type]: mozJPEG,
  [webP.type]: webP,
  [browserPNG.type]: browserPNG,
  [browserJPEG.type]: browserJPEG,
  [browserWebP.type]: browserWebP,
  // Safari & Firefox only:
  [browserBMP.type]: browserBMP,
  // Safari only:
  [browserGIF.type]: browserGIF,
  [browserTIFF.type]: browserTIFF,
  [browserJP2.type]: browserJP2,
  [browserPDF.type]: browserPDF,
 };
 export const encoders = Array.from(Object.values(encoderMap));
 /** Does this browser support a given encoder? Indexed by label */
 export const encodersSupported = Promise.resolve().then(async () => {
  const encodersSupported: EncoderSupportMap = {};
  await Promise.all(encoders.map(async (encoder) => {
    // If the encoder provides a featureTest, call it, otherwise assume supported.
    const isSupported = !('featureTest' in encoder) || await encoder.featureTest();
    encodersSupported[encoder.type] = isSupported;
  }));
  return encodersSupported;
 });
--- a/src/codecs/generic/quality-option.tsx
+++ b/src/codecs/generic/quality-option.tsx
@@ -0,0 +1,56 @@
 import { h, Component } from 'preact';
 import { bind } from '../../lib/initial-util';
 import * as style from '../../components/Options/style.scss';
 import Range from '../../components/range';
 interface EncodeOptions {
  quality: number;
 }
 type Props = {
  options: EncodeOptions,
  onChange(newOptions: EncodeOptions): void,
 };
 interface QualityOptionArg {
  min?: number;
  max?: number;
  step?: number;
 }
 export default function qualityOption(opts: QualityOptionArg = {}) {
  const {
    min = 0,
    max = 100,
    step = 1,
  } = opts;
  class QualityOptions extends Component<Props, {}> {
    @bind
    onChange(event: Event) {
      const el = event.currentTarget as HTMLInputElement;
      this.props.onChange({ quality: Number(el.value) });
    }
    render({ options }: Props) {
      return (
        <div class={style.optionsSection}>
          <div class={style.optionOneCell}>
            <Range
              name="quality"
              min={min}
              max={max}
              step={step || 'any'}
              value={options.quality}
              onInput={this.onChange}
            >
              Quality:
            </Range>
          </div>
        </div>
      );
    }
  }
  return QualityOptions;
 }
--- a/src/codecs/generic/util.ts
+++ b/src/codecs/generic/util.ts
@@ -0,0 +1,13 @@
 import { canvasEncode } from '../../lib/util';
 export async function canvasEncodeTest(mimeType: string) {
  try {
    const blob = await canvasEncode(new ImageData(1, 1), mimeType);
    // According to the spec, the blob should be null if the format isn't supported…
    if (!blob) return false;
    // …but Safari & Firefox fall back to PNG, so we need to check the mime type.
    return blob.type === mimeType;
  } catch (err) {
    return false;
  }
 }
--- a/src/codecs/identity/encoder-meta.ts
+++ b/src/codecs/identity/encoder-meta.ts
--- a/src/codecs/imagequant/options.tsx
+++ b/src/codecs/imagequant/options.tsx
@@ -0,0 +1,91 @@
 import { h, Component } from 'preact';
 import { bind } from '../../lib/initial-util';
 import { inputFieldValueAsNumber, konami } from '../../lib/util';
 import { QuantizeOptions } from './processor-meta';
 import * as style from '../../components/Options/style.scss';
 import Expander from '../../components/expander';
 import Select from '../../components/select';
 import Range from '../../components/range';
 const konamiPromise = konami();
 interface Props {
  options: QuantizeOptions;
  onChange(newOptions: QuantizeOptions): void;
 }
 interface State {
  extendedSettings: boolean;
 }
 export default class QuantizerOptions extends Component<Props, State> {
  state: State = { extendedSettings: false };
  componentDidMount() {
    konamiPromise.then(() => {
      this.setState({ extendedSettings: true });
    });
  }
  @bind
  onChange(event: Event) {
    const form = (event.currentTarget as HTMLInputElement).closest('form') as HTMLFormElement;
    const { options } = this.props;
    const newOptions: QuantizeOptions = {
      zx: inputFieldValueAsNumber(form.zx, options.zx),
      maxNumColors: inputFieldValueAsNumber(form.maxNumColors, options.maxNumColors),
      dither: inputFieldValueAsNumber(form.dither),
    };
    this.props.onChange(newOptions);
  }
  render({ options }: Props, { extendedSettings }: State) {
    return (
      <form class={style.optionsSection}>
        <Expander>
          {extendedSettings ?
            <label class={style.optionTextFirst}>
              Type:
              <Select
                name="zx"
                value={'' + options.zx}
                onChange={this.onChange}
              >
                <option value="0">Standard</option>
                <option value="1">ZX</option>
              </Select>
            </label>
          : null}
        </Expander>
        <Expander>
          {options.zx ? null :
            <div class={style.optionOneCell}>
              <Range
                name="maxNumColors"
                min="2"
                max="256"
                value={options.maxNumColors}
                onInput={this.onChange}
              >
                Colors:
              </Range>
            </div>
          }
        </Expander>
        <div class={style.optionOneCell}>
          <Range
            name="dither"
            min="0"
            max="1"
            step="0.01"
            value={options.dither}
            onInput={this.onChange}
          >
            Dithering:
          </Range>
        </div>
      </form>
    );
  }
 }
--- a/src/codecs/imagequant/processor-meta.ts
+++ b/src/codecs/imagequant/processor-meta.ts
@@ -0,0 +1,11 @@
 export interface QuantizeOptions {
  zx: number;
  maxNumColors: number;
  dither: number;
 }
 export const defaultOptions: QuantizeOptions = {
  zx: 0,
  maxNumColors: 256,
  dither: 1.0,
 };
--- a/src/codecs/imagequant/processor.ts
+++ b/src/codecs/imagequant/processor.ts
@@ -0,0 +1,21 @@
 import imagequant, { QuantizerModule } from '../../../codecs/imagequant/imagequant';
 import wasmUrl from '../../../codecs/imagequant/imagequant.wasm';
 import { QuantizeOptions } from './processor-meta';
 import { initWasmModule } from '../util';
 let emscriptenModule: Promise<QuantizerModule>;
 export async function process(data: ImageData, opts: QuantizeOptions): Promise<ImageData> {
  if (!emscriptenModule) emscriptenModule = initWasmModule(imagequant, wasmUrl);
  const module = await emscriptenModule;
  const result = opts.zx ?
      module.zx_quantize(data.data, data.width, data.height, opts.dither)
    :
      module.quantize(data.data, data.width, data.height, opts.maxNumColors, opts.dither);
  module.free_result();
  return new ImageData(new Uint8ClampedArray(result.buffer), result.width, result.height);
 }
--- a/src/codecs/mozjpeg/EncoderWorker.ts
+++ b/src/codecs/mozjpeg/EncoderWorker.ts
@@ -1,79 +0,0 @@
 import mozjpeg_enc from '../../../codecs/mozjpeg_enc/mozjpeg_enc';
 // Using require() so TypeScript doesn’t complain about this not being a module.
 import { EncodeOptions } from './encoder';
 const wasmBinaryUrl = require('../../../codecs/mozjpeg_enc/mozjpeg_enc.wasm');
 // API exposed by wasm module. Details in the codec’s README.
 interface ModuleAPI {
  version(): number;
  create_buffer(width: number, height: number): number;
  destroy_buffer(pointer: number): void;
  encode(buffer: number, width: number, height: number, quality: number): void;
  free_result(): void;
  get_result_pointer(): number;
  get_result_size(): number;
 }
 export default class MozJpegEncoder {
  private emscriptenModule: Promise<EmscriptenWasm.Module>;
  private api: Promise<ModuleAPI>;
  constructor() {
    this.emscriptenModule = new Promise((resolve) => {
      const m = mozjpeg_enc({
        // Just to be safe, don’t automatically invoke any wasm functions
        noInitialRun: false,
        locateFile(url: string): string {
          // Redirect the request for the wasm binary to whatever webpack gave us.
          if (url.endsWith('.wasm')) {
            return wasmBinaryUrl;
          }
          return url;
        },
        onRuntimeInitialized() {
          // An Emscripten is a then-able that, for some reason, `then()`s itself,
          // causing an infite loop when you wrap it in a real promise. Deleten the `then`
          // prop solves this for now.
          // See: https://github.com/kripken/emscripten/blob/incoming/src/postamble.js#L129
          // TODO(surma@): File a bug with Emscripten on this.
          delete (m as any).then;
          resolve(m);
        },
      });
    });
    this.api = (async () => {
      // Not sure why, but TypeScript complains that I am using
      // `emscriptenModule` before it’s getting assigned, which is clearly not
      // true :shrug: Using `any`
      const m = await (this as any).emscriptenModule;
      return {
        version: m.cwrap('version', 'number', []),
        create_buffer: m.cwrap('create_buffer', 'number', ['number', 'number']),
        destroy_buffer: m.cwrap('destroy_buffer', '', ['number']),
        encode: m.cwrap('encode', '', ['number', 'number', 'number', 'number']),
        free_result: m.cwrap('free_result', '', []),
        get_result_pointer: m.cwrap('get_result_pointer', 'number', []),
        get_result_size: m.cwrap('get_result_size', 'number', []),
      };
    })();
  }
  async encode(data: ImageData, options: EncodeOptions): Promise<ArrayBuffer> {
    const m = await this.emscriptenModule;
    const api = await this.api;
    const p = api.create_buffer(data.width, data.height);
    m.HEAP8.set(data.data, p);
    api.encode(p, data.width, data.height, options.quality);
    const resultPointer = api.get_result_pointer();
    const resultSize = api.get_result_size();
    const resultView = new Uint8Array(m.HEAP8.buffer, resultPointer, resultSize);
    const result = new Uint8Array(resultView);
    api.free_result();
    api.destroy_buffer(p);
    // wasm can’t run on SharedArrayBuffers, so we hard-cast to ArrayBuffer.
    return result.buffer as ArrayBuffer;
  }
 }
--- a/src/codecs/mozjpeg/encoder-meta.ts
+++ b/src/codecs/mozjpeg/encoder-meta.ts
@@ -0,0 +1,41 @@
 export enum MozJpegColorSpace {
  GRAYSCALE = 1,
  RGB,
  YCbCr,
 }
 export interface EncodeOptions {
  quality: number;
  baseline: boolean;
  arithmetic: boolean;
  progressive: boolean;
  optimize_coding: boolean;
  smoothing: number;
  color_space: MozJpegColorSpace;
  quant_table: number;
  trellis_multipass: boolean;
  trellis_opt_zero: boolean;
  trellis_opt_table: boolean;
  trellis_loops: number;
 }
 export interface EncoderState { type: typeof type; options: EncodeOptions; }
 export const type = 'mozjpeg';
 export const label = 'MozJPEG';
 export const mimeType = 'image/jpeg';
 export const extension = 'jpg';
 export const defaultOptions: EncodeOptions = {
  quality: 75,
  baseline: false,
  arithmetic: false,
  progressive: true,
  optimize_coding: true,
  smoothing: 0,
  color_space: MozJpegColorSpace.YCbCr,
  quant_table: 3,
  trellis_multipass: false,
  trellis_opt_zero: false,
  trellis_opt_table: false,
  trellis_loops: 1,
 };
--- a/src/codecs/mozjpeg/encoder.ts
+++ b/src/codecs/mozjpeg/encoder.ts
@@ -1,16 +1,18 @@
-import EncoderWorker from './EncoderWorker';
+import mozjpeg_enc, { MozJPEGModule } from '../../../codecs/mozjpeg_enc/mozjpeg_enc';
 import wasmUrl from '../../../codecs/mozjpeg_enc/mozjpeg_enc.wasm';
 import { EncodeOptions } from './encoder-meta';
 import { initWasmModule } from '../util';
-export interface EncodeOptions { quality: number; }
+let emscriptenModule: Promise<MozJPEGModule>;
 export interface EncoderState { type: typeof type; options: EncodeOptions; }
-export const type = 'mozjpeg';
+export async function encode(data: ImageData, options: EncodeOptions): Promise<ArrayBuffer> {
-export const label = 'MozJPEG';
+  if (!emscriptenModule) emscriptenModule = initWasmModule(mozjpeg_enc, wasmUrl);
 export const mimeType = 'image/jpeg';
 export const extension = 'jpg';
 export const defaultOptions: EncodeOptions = { quality: 7 };
-export async function encode(data: ImageData, options: EncodeOptions) {
+  const module = await emscriptenModule;
-  // We need to await this because it's been comlinked.
+  const resultView = module.encode(data.data, data.width, data.height, options);
-  const encoder = await new EncoderWorker();
+  const result = new Uint8Array(resultView);
-  return encoder.encode(data, options);
+  module.free_result();
  // wasm can’t run on SharedArrayBuffers, so we hard-cast to ArrayBuffer.
  return result.buffer as ArrayBuffer;
 }
--- a/src/codecs/mozjpeg/options.tsx
+++ b/src/codecs/mozjpeg/options.tsx
@@ -1,35 +1,199 @@
 import { h, Component } from 'preact';
-import { EncodeOptions } from './encoder';
+import { bind } from '../../lib/initial-util';
-import { bind } from '../../lib/util';
+import { inputFieldChecked, inputFieldValueAsNumber } from '../../lib/util';
 import { EncodeOptions, MozJpegColorSpace } 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';
-type Props = {
+interface Props {
-  options: EncodeOptions,
+  options: EncodeOptions;
-  onChange(newOptions: EncodeOptions): void
+  onChange(newOptions: EncodeOptions): void;
-};
+}
 interface State {
  showAdvanced: boolean;
 }
 export default class MozJPEGEncoderOptions extends Component<Props, State> {
  state: State = {
    showAdvanced: false,
  };
 export default class MozJpegCodecOptions extends Component<Props, {}> {
  @bind
  onChange(event: Event) {
-    const el = event.currentTarget as HTMLInputElement;
+    const form = (event.currentTarget as HTMLInputElement).closest('form') as HTMLFormElement;
-    this.props.onChange({ quality: Number(el.value) });
+    const { options } = this.props;
    const newOptions: EncodeOptions = {
      // Copy over options the form doesn't currently care about, eg arithmetic
      ...this.props.options,
      // And now stuff from the form:
      // .checked
      baseline: inputFieldChecked(form.baseline, options.baseline),
      progressive: inputFieldChecked(form.progressive, options.progressive),
      optimize_coding: inputFieldChecked(form.optimize_coding, options.optimize_coding),
      trellis_multipass: inputFieldChecked(form.trellis_multipass, options.trellis_multipass),
      trellis_opt_zero: inputFieldChecked(form.trellis_opt_zero, options.trellis_opt_zero),
      trellis_opt_table: inputFieldChecked(form.trellis_opt_table, options.trellis_opt_table),
      // .value
      quality: inputFieldValueAsNumber(form.quality, options.quality),
      smoothing: inputFieldValueAsNumber(form.smoothing, options.smoothing),
      color_space: inputFieldValueAsNumber(form.color_space, options.color_space),
      quant_table: inputFieldValueAsNumber(form.quant_table, options.quant_table),
      trellis_loops: inputFieldValueAsNumber(form.trellis_loops, options.trellis_loops),
    };
    this.props.onChange(newOptions);
  }
-  render({ options }: Props) {
+  render({ options }: Props, { showAdvanced }: State) {
    // I'm rendering both lossy and lossless forms, as it becomes much easier when
    // gathering the data.
    return (
-      <div>
+      <form class={style.optionsSection}>
-        <label>
+        <div class={style.optionOneCell}>
-          Quality:
+          <Range
          <input
            name="quality"
-            type="range"
+            min="0"
            min="1"
            max="100"
-            step="1"
+            value={options.quality}
-            value={'' + options.quality}
+            onInput={this.onChange}
-            onChange={this.onChange}
+          >
            Quality:
          </Range>
        </div>
        <label class={style.optionInputFirst}>
          <Checkbox
            checked={showAdvanced}
            onChange={linkState(this, 'showAdvanced')}
          />
          Show advanced settings
        </label>
-      </div>
+        <Expander>
          {showAdvanced ?
            <div>
              <label class={style.optionInputFirst}>
                <Checkbox
                  name="baseline"
                  checked={options.baseline}
                  onChange={this.onChange}
                />
                Pointless spec compliance
              </label>
              <Expander>
                {options.baseline ? null :
                  <label class={style.optionInputFirst}>
                    <Checkbox
                      name="progressive"
                      checked={options.progressive}
                      onChange={this.onChange}
                    />
                    Progressive rendering
                  </label>
                }
              </Expander>
              <Expander>
                {options.baseline ?
                  <label class={style.optionInputFirst}>
                    <Checkbox
                      name="optimize_coding"
                      checked={options.optimize_coding}
                      onChange={this.onChange}
                    />
                    Optimize Huffman table
                  </label>
                  : null
                }
              </Expander>
              <div class={style.optionOneCell}>
                <Range
                  name="smoothing"
                  min="0"
                  max="100"
                  value={options.smoothing}
                  onInput={this.onChange}
                >
                  Smoothing:
                </Range>
              </div>
              <label class={style.optionTextFirst}>
                Channels:
                <Select
                  name="color_space"
                  value={options.color_space}
                  onChange={this.onChange}
                >
                  <option value={MozJpegColorSpace.GRAYSCALE}>Grayscale</option>
                  <option value={MozJpegColorSpace.RGB}>RGB</option>
                  <option value={MozJpegColorSpace.YCbCr}>YCbCr</option>
                </Select>
              </label>
              <label class={style.optionTextFirst}>
                Quantization:
                <Select
                  name="quant_table"
                  value={options.quant_table}
                  onChange={this.onChange}
                >
                  <option value="0">JPEG Annex K</option>
                  <option value="1">Flat</option>
                  <option value="2">MSSIM-tuned Kodak</option>
                  <option value="3">ImageMagick</option>
                  <option value="4">PSNR-HVS-M-tuned Kodak</option>
                  <option value="5">Klein et al</option>
                  <option value="6">Watson et al</option>
                  <option value="7">Ahumada et al</option>
                  <option value="8">Peterson et al</option>
                </Select>
              </label>
              <label class={style.optionInputFirst}>
                <Checkbox
                  name="trellis_multipass"
                  checked={options.trellis_multipass}
                  onChange={this.onChange}
                />
                Trellis multipass
              </label>
              <Expander>
                {options.trellis_multipass ?
                  <label class={style.optionInputFirst}>
                    <Checkbox
                      name="trellis_opt_zero"
                      checked={options.trellis_opt_zero}
                      onChange={this.onChange}
                    />
                    Optimize zero block runs
                  </label>
                  : null
                }
              </Expander>
              <label class={style.optionInputFirst}>
                <Checkbox
                  name="trellis_opt_table"
                  checked={options.trellis_opt_table}
                  onChange={this.onChange}
                />
                Optimize after trellis quantization
              </label>
              <div class={style.optionOneCell}>
                <Range
                  name="trellis_loops"
                  min="1"
                  max="50"
                  value={options.trellis_loops}
                  onInput={this.onChange}
                >
                  Trellis quantization passes:
                </Range>
              </div>
            </div>
            : null
          }
        </Expander>
      </form>
    );
  }
 }
--- a/src/codecs/optipng/encoder-meta.ts
+++ b/src/codecs/optipng/encoder-meta.ts
@@ -0,0 +1,13 @@
 export interface EncodeOptions {
  level: number;
 }
 export interface EncoderState { type: typeof type; options: EncodeOptions; }
 export const type = 'png';
 export const label = 'OptiPNG';
 export const mimeType = 'image/png';
 export const extension = 'png';
 export const defaultOptions: EncodeOptions = {
  level: 2,
 };
--- a/src/codecs/optipng/encoder.ts
+++ b/src/codecs/optipng/encoder.ts
@@ -0,0 +1,18 @@
 import optipng, { OptiPngModule } from '../../../codecs/optipng/optipng';
 import wasmUrl from '../../../codecs/optipng/optipng.wasm';
 import { EncodeOptions } from './encoder-meta';
 import { initWasmModule } from '../util';
 let emscriptenModule: Promise<OptiPngModule>;
 export async function compress(data: BufferSource, options: EncodeOptions): Promise<ArrayBuffer> {
  if (!emscriptenModule) emscriptenModule = initWasmModule(optipng, wasmUrl);
  const module = await emscriptenModule;
  const resultView = module.compress(data, 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;
 }
--- a/src/codecs/optipng/options.tsx
+++ b/src/codecs/optipng/options.tsx
@@ -0,0 +1,42 @@
 import { h, Component } from 'preact';
 import { bind } from '../../lib/initial-util';
 import { inputFieldValueAsNumber } from '../../lib/util';
 import { EncodeOptions } from './encoder-meta';
 import Range from '../../components/range';
 import * as style from '../../components/Options/style.scss';
 type Props = {
  options: EncodeOptions;
  onChange(newOptions: EncodeOptions): void;
 };
 export default class OptiPNGEncoderOptions extends Component<Props, {}> {
  @bind
  onChange(event: Event) {
    const form = (event.currentTarget as HTMLInputElement).closest('form') as HTMLFormElement;
    const options: EncodeOptions = {
      level: inputFieldValueAsNumber(form.level),
    };
    this.props.onChange(options);
  }
  render({ options }: Props) {
    return (
      <form class={style.optionsSection}>
        <div class={style.optionOneCell}>
          <Range
            name="level"
            min="0"
            max="7"
            step="1"
            value={options.level}
            onInput={this.onChange}
          >
            Effort:
          </Range>
        </div>
      </form>
    );
  }
 }
--- a/src/codecs/preprocessors.ts
+++ b/src/codecs/preprocessors.ts
@@ -0,0 +1,23 @@
 import {
  QuantizeOptions, defaultOptions as quantizerDefaultOptions,
 } from './imagequant/processor-meta';
 import { ResizeOptions, defaultOptions as resizeDefaultOptions } from './resize/processor-meta';
 interface Enableable {
  enabled: boolean;
 }
 export interface PreprocessorState {
  quantizer: Enableable & QuantizeOptions;
  resize: Enableable & ResizeOptions;
 }
 export const defaultPreprocessorState: PreprocessorState = {
  quantizer: {
    enabled: false,
    ...quantizerDefaultOptions,
  },
  resize: {
    enabled: false,
    ...resizeDefaultOptions,
  },
 };
--- a/src/codecs/processor-worker.ts
+++ b/src/codecs/processor-worker.ts
@@ -0,0 +1,41 @@
 import { expose } from 'comlink';
 import { EncodeOptions as MozJPEGEncoderOptions } from './mozjpeg/encoder-meta';
 import { QuantizeOptions } from './imagequant/processor-meta';
 import { EncodeOptions as OptiPNGEncoderOptions } from './optipng/encoder-meta';
 import { EncodeOptions as WebPEncoderOptions } from './webp/encoder-meta';
 async function mozjpegEncode(
  data: ImageData, options: MozJPEGEncoderOptions,
 ): Promise<ArrayBuffer> {
  const { encode } = await import('./mozjpeg/encoder');
  return encode(data, options);
 }
 async function quantize(data: ImageData, opts: QuantizeOptions): Promise<ImageData> {
  const { process } = await import('./imagequant/processor');
  return process(data, opts);
 }
 async function optiPngEncode(
  data: BufferSource, options: OptiPNGEncoderOptions,
 ): Promise<ArrayBuffer> {
  const { compress } = await import('./optipng/encoder');
  return compress(data, options);
 }
 async function webpEncode(
  data: ImageData, options: WebPEncoderOptions,
 ): Promise<ArrayBuffer> {
  const { encode } = await import('./webp/encoder');
  return encode(data, options);
 }
 async function webpDecode(data: ArrayBuffer): Promise<ImageData> {
  const { decode } = await import('./webp/decoder');
  return decode(data);
 }
 const exports = { mozjpegEncode, quantize, optiPngEncode, webpEncode, webpDecode };
 export type ProcessorWorkerApi = typeof exports;
 expose(exports, self);
--- a/src/codecs/processor.ts
+++ b/src/codecs/processor.ts
@@ -0,0 +1,204 @@
 import { proxy } from 'comlink';
 import { QuantizeOptions } from './imagequant/processor-meta';
 import { ProcessorWorkerApi } from './processor-worker';
 import { canvasEncode, blobToArrayBuffer } from '../lib/util';
 import { EncodeOptions as MozJPEGEncoderOptions } from './mozjpeg/encoder-meta';
 import { EncodeOptions as OptiPNGEncoderOptions } from './optipng/encoder-meta';
 import { EncodeOptions as WebPEncoderOptions } from './webp/encoder-meta';
 import { EncodeOptions as BrowserJPEGOptions } from './browser-jpeg/encoder-meta';
 import { EncodeOptions as BrowserWebpEncodeOptions } from './browser-webp/encoder-meta';
 import { BitmapResizeOptions, VectorResizeOptions } from './resize/processor-meta';
 import { resize, vectorResize } from './resize/processor';
 import * as browserBMP from './browser-bmp/encoder';
 import * as browserPNG from './browser-png/encoder';
 import * as browserJPEG from './browser-jpeg/encoder';
 import * as browserWebP from './browser-webp/encoder';
 import * as browserGIF from './browser-gif/encoder';
 import * as browserTIFF from './browser-tiff/encoder';
 import * as browserJP2 from './browser-jp2/encoder';
 import * as browserPDF from './browser-pdf/encoder';
 /** How long the worker should be idle before terminating. */
 const workerTimeout = 1000;
 interface ProcessingJobOptions {
  needsWorker?: boolean;
 }
 export default class Processor {
  /** Worker instance associated with this processor. */
  private _worker?: Worker;
  /** Comlinked worker API. */
  private _workerApi?: ProcessorWorkerApi;
  /** Rejector for a pending promise. */
  private _abortRejector?: (err: Error) => void;
  /** Is work currently happening? */
  private _busy = false;
  /** Incementing ID so we can tell if a job has been superseded. */
  private _latestJobId: number = 0;
  /** setTimeout ID for killing the worker when idle. */
  private _workerTimeoutId: number = 0;
  /**
   * Decorator that manages the (re)starting of the worker and aborting existing jobs. Not all
   * processing jobs require a worker (e.g. the main thread canvas encodes), use the needsWorker
   * option to control this.
   */
  private static _processingJob(options: ProcessingJobOptions = {}) {
    const { needsWorker = false } = options;
    return (target: Processor, propertyKey: string, descriptor: PropertyDescriptor): void => {
      const processingFunc = descriptor.value;
      descriptor.value = async function (this: Processor, ...args: any[]) {
        this._latestJobId += 1;
        const jobId = this._latestJobId;
        this.abortCurrent();
        if (needsWorker) self.clearTimeout(this._workerTimeoutId);
        if (!this._worker && needsWorker) {
          // worker-loader does magic here.
          // @ts-ignore - Typescript doesn't know about the 2nd param to new Worker, and the
          // definition can't be overwritten.
          this._worker = new Worker('./processor-worker.ts', { type: 'module' }) as Worker;
          // Need to do some TypeScript trickery to make the type match.
          this._workerApi = proxy(this._worker) as any as ProcessorWorkerApi;
        }
        this._busy = true;
        const returnVal = Promise.race([
          processingFunc.call(this, ...args),
          new Promise((_, reject) => { this._abortRejector = reject; }),
        ]);
        // Wait for the operation to settle.
        await returnVal.catch(() => {});
        // If no other jobs are happening, cleanup.
        if (jobId === this._latestJobId) this._jobCleanup();
        return returnVal;
      };
    };
  }
  private _jobCleanup(): void {
    this._busy = false;
    if (!this._worker) return;
    // If the worker is unused for 10 seconds, remove it to save memory.
    this._workerTimeoutId = self.setTimeout(
      () => {
        if (!this._worker) return;
        this._worker.terminate();
        this._worker = undefined;
      },
      workerTimeout,
    );
  }
  /** Abort the current job, if any */
  abortCurrent() {
    if (!this._busy) return;
    if (!this._abortRejector) throw Error("There must be a rejector if it's busy");
    this._abortRejector(new DOMException('Aborted', 'AbortError'));
    this._abortRejector = undefined;
    this._busy = false;
    if (!this._worker) return;
    this._worker.terminate();
    this._worker = undefined;
  }
  // Off main thread jobs:
  @Processor._processingJob({ needsWorker: true })
  imageQuant(data: ImageData, opts: QuantizeOptions): Promise<ImageData> {
    return this._workerApi!.quantize(data, opts);
  }
  @Processor._processingJob({ needsWorker: true })
  mozjpegEncode(
    data: ImageData, opts: MozJPEGEncoderOptions,
  ): Promise<ArrayBuffer> {
    return this._workerApi!.mozjpegEncode(data, opts);
  }
  @Processor._processingJob({ needsWorker: true })
  async optiPngEncode(
    data: ImageData, opts: OptiPNGEncoderOptions,
  ): Promise<ArrayBuffer> {
    // OptiPNG expects PNG input.
    const pngBlob = await canvasEncode(data, 'image/png');
    const pngBuffer = await blobToArrayBuffer(pngBlob);
    return this._workerApi!.optiPngEncode(pngBuffer, opts);
  }
  @Processor._processingJob({ needsWorker: true })
  webpEncode(data: ImageData, opts: WebPEncoderOptions): Promise<ArrayBuffer> {
    return this._workerApi!.webpEncode(data, opts);
  }
  @Processor._processingJob({ needsWorker: true })
  async webpDecode(blob: Blob): Promise<ImageData> {
    const data = await blobToArrayBuffer(blob);
    return this._workerApi!.webpDecode(data);
  }
  // Not-worker jobs:
  @Processor._processingJob()
  browserBmpEncode(data: ImageData): Promise<Blob> {
    return browserBMP.encode(data);
  }
  @Processor._processingJob()
  browserPngEncode(data: ImageData): Promise<Blob> {
    return browserPNG.encode(data);
  }
  @Processor._processingJob()
  browserJpegEncode(data: ImageData, opts: BrowserJPEGOptions): Promise<Blob> {
    return browserJPEG.encode(data, opts);
  }
  @Processor._processingJob()
  browserWebpEncode(data: ImageData, opts: BrowserWebpEncodeOptions): Promise<Blob> {
    return browserWebP.encode(data, opts);
  }
  @Processor._processingJob()
  browserGifEncode(data: ImageData): Promise<Blob> {
    return browserGIF.encode(data);
  }
  @Processor._processingJob()
  browserTiffEncode(data: ImageData): Promise<Blob> {
    return browserTIFF.encode(data);
  }
  @Processor._processingJob()
  browserJp2Encode(data: ImageData): Promise<Blob> {
    return browserJP2.encode(data);
  }
  @Processor._processingJob()
  browserPdfEncode(data: ImageData): Promise<Blob> {
    return browserPDF.encode(data);
  }
  // Synchronous jobs
  resize(data: ImageData, opts: BitmapResizeOptions) {
    this.abortCurrent();
    return resize(data, opts);
  }
  vectorResize(data: HTMLImageElement, opts: VectorResizeOptions) {
    this.abortCurrent();
    return vectorResize(data, opts);
  }
 }
--- a/src/codecs/resize/options.tsx
+++ b/src/codecs/resize/options.tsx
@@ -0,0 +1,146 @@
 import { h, Component } from 'preact';
 import linkState from 'linkstate';
 import { bind, linkRef } from '../../lib/initial-util';
 import { inputFieldValueAsNumber, inputFieldValue } from '../../lib/util';
 import { ResizeOptions } from './processor-meta';
 import * as style from '../../components/Options/style.scss';
 import Checkbox from '../../components/checkbox';
 import Expander from '../../components/expander';
 import Select from '../../components/select';
 interface Props {
  isVector: Boolean;
  options: ResizeOptions;
  aspect: number;
  onChange(newOptions: ResizeOptions): void;
 }
 interface State {
  maintainAspect: boolean;
 }
 export default class ResizerOptions extends Component<Props, State> {
  state: State = {
    maintainAspect: true,
  };
  form?: HTMLFormElement;
  private reportOptions() {
    const form = this.form!;
    const width = form.width as HTMLInputElement;
    const height = form.height as HTMLInputElement;
    const { options } = this.props;
    if (!width.checkValidity() || !height.checkValidity()) return;
    const newOptions: ResizeOptions = {
      width: inputFieldValueAsNumber(width),
      height: inputFieldValueAsNumber(height),
      method: form.resizeMethod.value,
      // Casting, as the formfield only returns the correct values.
      fitMethod: inputFieldValue(form.fitMethod, options.fitMethod) as ResizeOptions['fitMethod'],
    };
    this.props.onChange(newOptions);
  }
  @bind
  private onChange() {
    this.reportOptions();
  }
  componentDidUpdate(prevProps: Props, prevState: State) {
    if (!prevState.maintainAspect && this.state.maintainAspect) {
      this.form!.height.value = Math.round(Number(this.form!.width.value) / this.props.aspect);
      this.reportOptions();
    }
  }
  @bind
  private onWidthInput() {
    if (this.state.maintainAspect) {
      const width = inputFieldValueAsNumber(this.form!.width);
      this.form!.height.value = Math.round(width / this.props.aspect);
    }
    this.reportOptions();
  }
  @bind
  private onHeightInput() {
    if (this.state.maintainAspect) {
      const height = inputFieldValueAsNumber(this.form!.height);
      this.form!.width.value = Math.round(height * this.props.aspect);
    }
    this.reportOptions();
  }
  render({ options, isVector }: Props, { maintainAspect }: State) {
    return (
      <form ref={linkRef(this, 'form')} class={style.optionsSection}>
        <label class={style.optionTextFirst}>
          Method:
          <Select
            name="resizeMethod"
            value={options.method}
            onChange={this.onChange}
          >
            {isVector && <option value="vector">Vector</option>}
            <option value="browser-pixelated">Browser pixelated</option>
            <option value="browser-low">Browser low quality</option>
            <option value="browser-medium">Browser medium quality</option>
            <option value="browser-high">Browser high quality</option>
          </Select>
        </label>
        <label class={style.optionTextFirst}>
          Width:
          <input
            required
            class={style.textField}
            name="width"
            type="number"
            min="1"
            value={'' + options.width}
            onInput={this.onWidthInput}
          />
        </label>
        <label class={style.optionTextFirst}>
          Height:
          <input
            required
            class={style.textField}
            name="height"
            type="number"
            min="1"
            value={'' + options.height}
            onInput={this.onHeightInput}
          />
        </label>
        <label class={style.optionInputFirst}>
          <Checkbox
            name="maintainAspect"
            checked={maintainAspect}
            onChange={linkState(this, 'maintainAspect')}
          />
          Maintain aspect ratio
        </label>
        <Expander>
          {maintainAspect ? null :
            <label class={style.optionTextFirst}>
              Fit method:
              <Select
                name="fitMethod"
                value={options.fitMethod}
                onChange={this.onChange}
              >
                <option value="stretch">Stretch</option>
                <option value="cover">Cover</option>
              </Select>
            </label>
          }
        </Expander>
      </form>
    );
  }
 }
--- a/src/codecs/resize/processor-meta.ts
+++ b/src/codecs/resize/processor-meta.ts
@@ -0,0 +1,26 @@
 type BitmapResizeMethods = 'browser-pixelated' | 'browser-low' | 'browser-medium' | 'browser-high';
 export interface ResizeOptions {
  width: number;
  height: number;
  method: 'vector' | BitmapResizeMethods;
  fitMethod: 'stretch' | 'cover';
 }
 export interface BitmapResizeOptions extends ResizeOptions {
  method: BitmapResizeMethods;
 }
 export interface VectorResizeOptions extends ResizeOptions {
  method: 'vector';
 }
 export const defaultOptions: ResizeOptions = {
  // Width and height will always default to the image size.
  // This is set elsewhere.
  width: 1,
  height: 1,
  // This will be set to 'vector' if the input is SVG.
  method: 'browser-high',
  fitMethod: 'stretch',
 };
--- a/src/codecs/resize/processor.ts
+++ b/src/codecs/resize/processor.ts
@@ -0,0 +1,49 @@
 import { nativeResize, NativeResizeMethod, drawableToImageData } from '../../lib/util';
 import { BitmapResizeOptions, VectorResizeOptions } from './processor-meta';
 function getCoverOffsets(sw: number, sh: number, dw: number, dh: number) {
  const currentAspect = sw / sh;
  const endAspect = dw / dh;
  if (endAspect > currentAspect) {
    const newSh = sw / endAspect;
    const newSy = (sh - newSh) / 2;
    return { sw, sh: newSh, sx: 0, sy: newSy };
  }
  const newSw = sh * endAspect;
  const newSx = (sw - newSw) / 2;
  return { sh, sw: newSw, sx: newSx, sy: 0 };
 }
 export function resize(data: ImageData, opts: BitmapResizeOptions): ImageData {
  let sx = 0;
  let sy = 0;
  let sw = data.width;
  let sh = data.height;
  if (opts.fitMethod === 'cover') {
    ({ sx, sy, sw, sh } = getCoverOffsets(sw, sh, opts.width, opts.height));
  }
  return nativeResize(
    data, sx, sy, sw, sh, opts.width, opts.height,
    opts.method.slice('browser-'.length) as NativeResizeMethod,
  );
 }
 export function vectorResize(data: HTMLImageElement, opts: VectorResizeOptions): ImageData {
  let sx = 0;
  let sy = 0;
  let sw = data.width;
  let sh = data.height;
  if (opts.fitMethod === 'cover') {
    ({ sx, sy, sw, sh } = getCoverOffsets(sw, sh, opts.width, opts.height));
  }
  return drawableToImageData(data, {
    sx, sy, sw, sh,
    width: opts.width, height: opts.height,
  });
 }
--- a/src/codecs/util.ts
+++ b/src/codecs/util.ts
@@ -0,0 +1,27 @@
 type ModuleFactory<M extends EmscriptenWasm.Module> = (
  opts: EmscriptenWasm.ModuleOpts,
 ) => M;
 export function initWasmModule<T extends EmscriptenWasm.Module>(
  moduleFactory: ModuleFactory<T>,
  wasmUrl: string,
 ): Promise<T> {
  return new Promise((resolve) => {
    const module = moduleFactory({
      // Just to be safe, don't automatically invoke any wasm functions
      noInitialRun: true,
      locateFile(url: string): string {
        // Redirect the request for the wasm binary to whatever webpack gave us.
        if (url.endsWith('.wasm')) return wasmUrl;
        return url;
      },
      onRuntimeInitialized() {
        // An Emscripten is a then-able that resolves with itself, causing an infite loop when you
        // wrap it in a real promise. Delete the `then` prop solves this for now.
        // https://github.com/kripken/emscripten/issues/5820
        delete (module as any).then;
        resolve(module);
      },
    });
  });
 }
--- a/src/codecs/webp/decoder-meta.ts
+++ b/src/codecs/webp/decoder-meta.ts
@@ -0,0 +1,7 @@
 export const name = 'WASM WebP Decoder';
 const supportedMimeTypes = ['image/webp'];
 export function canHandleMimeType(mimeType: string): boolean {
  return supportedMimeTypes.includes(mimeType);
 }
--- a/src/codecs/webp/decoder.ts
+++ b/src/codecs/webp/decoder.ts
@@ -0,0 +1,20 @@
 import webp_dec, { WebPModule } from '../../../codecs/webp_dec/webp_dec';
 import wasmUrl from '../../../codecs/webp_dec/webp_dec.wasm';
 import { initWasmModule } from '../util';
 let emscriptenModule: Promise<WebPModule>;
 export async function decode(data: ArrayBuffer): Promise<ImageData> {
  if (!emscriptenModule) emscriptenModule = initWasmModule(webp_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;
 }
--- a/src/codecs/webp/encoder-meta.ts
+++ b/src/codecs/webp/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,
 };
--- a/Show More
+++ b/Show More
		`@@ -0,0 +1,3 @@`
							`import qualityOption from '../generic/quality-option';`

							`export default qualityOption({ min: 0, max: 1, step: 0.01 });`