Optipng (#156)

* omg it’s compiling * example actually works * Expose compression level options * Disable crypto and path module emulation in webpack * Update README * Remove small image * Use -O3 on optipng * Free memory after copy * Handle unexpected file reader return types * Rename level label to effort
2018-09-04 16:49:45 +01:00
parent 170d75482e
commit 54ad30a7ed
19 changed files with 1832 additions and 10 deletions
--- a/codecs/example_palette.png
+++ b/codecs/example_palette.png
--- 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,80 @@
+#!/bin/bash
+
+set -e
+
+export PREFIX="/src/build"
+export CFLAGS="-I${PREFIX}/include/"
+export CPPFLAGS="-I${PREFIX}/include/"
+export LDFLAGS="-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 \
+    -O3 \
+    -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 -O3 \
+    -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 "============================================="
--- 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,51 @@
+#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) {
+  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/src/codecs/encoders.ts
+++ b/src/codecs/encoders.ts
@ -1,4 +1,5 @@
 import * as identity from './identity/encoder';
+import * as optiPNG from './optipng/encoder';
 import * as mozJPEG from './mozjpeg/encoder';
 import * as webP from './webp/encoder';
 import * as browserPNG from './browser-png/encoder';
@ -15,19 +16,38 @@ export interface EncoderSupportMap {
 }

 export type EncoderState =
-  identity.EncoderState | mozJPEG.EncoderState | webP.EncoderState | browserPNG.EncoderState |
-  browserJPEG.EncoderState | browserWebP.EncoderState | browserGIF.EncoderState |
-  browserTIFF.EncoderState | browserJP2.EncoderState | browserBMP.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 | mozJPEG.EncodeOptions | webP.EncodeOptions | browserPNG.EncodeOptions |
-  browserJPEG.EncodeOptions | browserWebP.EncodeOptions | browserGIF.EncodeOptions |
-  browserTIFF.EncodeOptions | browserJP2.EncodeOptions | browserBMP.EncodeOptions |
+  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 EncoderType = keyof typeof encoderMap;

 export const encoderMap = {
  [identity.type]: identity,
+  [optiPNG.type]: optiPNG,
  [mozJPEG.type]: mozJPEG,
  [webP.type]: webP,
  [browserPNG.type]: browserPNG,
--- a/src/codecs/optipng/Encoder.worker.ts
+++ b/src/codecs/optipng/Encoder.worker.ts
@ -0,0 +1,41 @@
+import optipng, { OptiPngModule } from '../../../codecs/optipng/optipng';
+// Using require() so TypeScript doesn’t complain about this not being a module.
+import { EncodeOptions } from './encoder';
+const wasmBinaryUrl = require('../../../codecs/optipng/optipng.wasm');
+
+export default class OptiPng {
+  private emscriptenModule: Promise<OptiPngModule>;
+
+  constructor() {
+    this.emscriptenModule = new Promise((resolve) => {
+      const m = optipng({
+        // 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. Deleting 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);
+        },
+      });
+    });
+  }
+
+  async compress(data: BufferSource, opts: EncodeOptions): Promise<ArrayBuffer> {
+    const m = await this.emscriptenModule;
+    const result = m.compress(data, opts);
+    const copy = new Uint8Array(result).buffer as ArrayBuffer;
+    m.free_result();
+    return copy;
+  }
+}
--- a/src/codecs/optipng/encoder.ts
+++ b/src/codecs/optipng/encoder.ts
@ -0,0 +1,23 @@
+import { canvasEncode, blobToArrayBuffer } from '../../lib/util';
+import EncodeWorker from './Encoder.worker';
+
+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,
+};
+
+export async function encode(data: ImageData, opts: EncodeOptions): Promise<ArrayBuffer> {
+  const pngBlob = await canvasEncode(data, mimeType);
+  const pngBuffer = await blobToArrayBuffer(pngBlob);
+  const encodeWorker = await new EncodeWorker();
+  return encodeWorker.compress(pngBuffer, opts);
+}
--- a/src/codecs/optipng/options.tsx
+++ b/src/codecs/optipng/options.tsx
@ -0,0 +1,39 @@
+import { h, Component } from 'preact';
+import { bind, inputFieldValueAsNumber } from '../../lib/util';
+import { EncodeOptions } from './encoder';
+
+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>
+        <label>
+          Effort:
+          <input
+            name="level"
+            type="range"
+            min="0"
+            max="7"
+            step="1"
+            value={'' + options.level}
+            onChange={this.onChange}
+          />
+        </label>
+      </form>
+    );
+  }
+}
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@ -9,6 +9,7 @@ import { FileDropEvent } from './custom-els/FileDrop';
 import './custom-els/FileDrop';

 import * as quantizer from '../../codecs/imagequant/quantizer';
+import * as optiPNG from '../../codecs/optipng/encoder';
 import * as mozJPEG from '../../codecs/mozjpeg/encoder';
 import * as webP from '../../codecs/webp/encoder';
 import * as identity from '../../codecs/identity/encoder';
@ -89,6 +90,7 @@ async function compressImage(
 ): Promise<File> {
  const compressedData = await (() => {
    switch (encodeData.type) {
+      case optiPNG.type: return optiPNG.encode(image, encodeData.options);
      case mozJPEG.type: return mozJPEG.encode(image, encodeData.options);
      case webP.type: return webP.encode(image, encodeData.options);
      case browserPNG.type: return browserPNG.encode(image, encodeData.options);
--- a/src/components/Options/index.tsx
+++ b/src/components/Options/index.tsx
@ -3,6 +3,7 @@ import { h, Component } from 'preact';
 import * as style from './style.scss';
 import { bind } from '../../lib/util';
 import { cleanSet, cleanMerge } from '../../lib/clean-modify';
+import OptiPNGEncoderOptions from '../../codecs/optipng/options';
 import MozJpegEncoderOptions from '../../codecs/mozjpeg/options';
 import BrowserJPEGEncoderOptions from '../../codecs/browser-jpeg/options';
 import WebPEncoderOptions from '../../codecs/webp/options';
@ -11,6 +12,7 @@ import BrowserWebPEncoderOptions from '../../codecs/browser-webp/options';
 import QuantizerOptionsComponent from '../../codecs/imagequant/options';

 import * as identity from '../../codecs/identity/encoder';
+import * as optiPNG from '../../codecs/optipng/encoder';
 import * as mozJPEG from '../../codecs/mozjpeg/encoder';
 import * as webP from '../../codecs/webp/encoder';
 import * as browserPNG from '../../codecs/browser-png/encoder';
@ -35,6 +37,7 @@ import { PreprocessorState } from '../../codecs/preprocessors';

 const encoderOptionsComponentMap = {
  [identity.type]: undefined,
+  [optiPNG.type]: OptiPNGEncoderOptions,
  [mozJPEG.type]: MozJpegEncoderOptions,
  [webP.type]: WebPEncoderOptions,
  [browserPNG.type]: undefined,
@ -143,7 +146,7 @@ export default class Options extends Component<Props, State> {
            options={
              // Casting options, as encoderOptionsComponentMap[encodeData.type] ensures the correct
              // type, but typescript isn't smart enough.
-              encoderState.options as typeof EncoderOptionComponent['prototype']['props']['options']
+              encoderState.options as any
            }
            onChange={onEncoderOptionsChange}
          />
--- a/src/lib/util.ts
+++ b/src/lib/util.ts
@ -106,10 +106,13 @@ export function canDecodeImage(data: string): Promise<boolean> {
 }

 export function blobToArrayBuffer(blob: Blob): Promise<ArrayBuffer> {
-  return new Promise((resolve) => {
+  return new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    fileReader.addEventListener('load', () => {
-      resolve(fileReader.result);
+      if (fileReader.result instanceof ArrayBuffer) {
+        return resolve(fileReader.result);
+      }
+      reject(Error('Unexpected return type'));
    });
    fileReader.readAsArrayBuffer(blob);
  });
--- a/webpack.config.js
+++ b/webpack.config.js
@ -160,7 +160,7 @@ module.exports = function (_, env) {
      ]
    },
    plugins: [
-      new webpack.IgnorePlugin(/(fs)/, /\/codecs\//),
+      new webpack.IgnorePlugin(/(fs|crypto|path)/, /\/codecs\//),
      // Pretty progressbar showing build progress:
      new ProgressBarPlugin({
        format: '\u001b[90m\u001b[44mBuild\u001b[49m\u001b[39m [:bar] \u001b[32m\u001b[1m:percent\u001b[22m\u001b[39m (:elapseds) \u001b[2m:msg\u001b[22m\r',