Add examples and codec-specific documentation

2018-05-15 16:22:23 +01:00
parent 03a6716745
commit 6249ca8ac8
8 changed files with 174 additions and 4 deletions
--- a/codecs/mozjpeg_enc/README.md
+++ b/codecs/mozjpeg_enc/README.md
@ -0,0 +1,38 @@
+# MozJPEG encoder
+
+- Source: <https://github.com/mozilla/mozjpeg>
+- Version: v3.3.1
+
+## Example
+
+See `example.html`
+
+## API
+
+### `int version()`
+
+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()`
+
+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/mozjpeg_enc/example.html
+++ b/codecs/mozjpeg_enc/example.html
@ -0,0 +1,47 @@
+<!doctype html>
+<script src='mozjpeg_enc.js'></script>
+<script>
+  const Module = mozjpeg_enc();
+
+  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 _ => {
+    const api = {
+      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', []),
+    };
+    const image = await loadImage('/example.png');
+    const p = api.create_buffer(image.width, image.height);
+    Module.HEAP8.set(image.data, p);
+    api.encode(p, image.width, image.height, 2);
+    const resultPointer = api.get_result_pointer();
+    const resultSize = api.get_result_size();
+    const resultView = new Uint8Array(Module.HEAP8.buffer, resultPointer, resultSize);
+    const result = new Uint8Array(resultView);
+    api.free_result(resultPointer);
+    api.destroy_buffer(p);
+
+    const blob = new Blob([result], {type: 'image/jpeg'});
+    const blobURL = URL.createObjectURL(blob);
+    const img = document.createElement('img');
+    img.src = blobURL;
+    document.body.appendChild(img);
+  };
+</script>
--- a/codecs/mozjpeg_enc/example.png
+++ b/codecs/mozjpeg_enc/example.png
--- a/codecs/mozjpeg_enc/mozjpeg_enc.c
+++ b/codecs/mozjpeg_enc/mozjpeg_enc.c
@ -162,8 +162,8 @@ void encode(uint8_t* image_buffer, int image_width, int image_height, int qualit
 }

 EMSCRIPTEN_KEEPALIVE
-void free_result(uint8_t* result) {
-  free(result); // not sure if this is right with mozjpeg
+void free_result() {
+  free(result[0]); // not sure if this is right with mozjpeg
 }

 EMSCRIPTEN_KEEPALIVE
--- a/codecs/webp_enc/README.md
+++ b/codecs/webp_enc/README.md
@ -0,0 +1,38 @@
+# WebP encoder
+
+- Source: <https://github.com/webmproject/libwebp>
+- Version: v0.6.1
+
+## Example
+
+See `example.html`
+
+## API
+
+### `int version()`
+
+Returns the version of libwebp 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, 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()`.
+
+### `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/example.html
+++ b/codecs/webp_enc/example.html
@ -0,0 +1,47 @@
+<!doctype html>
+<script src='webp_enc.js'></script>
+<script>
+  const Module = webp_enc();
+
+  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 _ => {
+    const api = {
+      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', []),
+    };
+    const image = await loadImage('/example.png');
+    const p = api.create_buffer(image.width, image.height);
+    Module.HEAP8.set(image.data, p);
+    api.encode(p, image.width, image.height, 2);
+    const resultPointer = api.get_result_pointer();
+    const resultSize = api.get_result_size();
+    const resultView = new Uint8Array(Module.HEAP8.buffer, resultPointer, resultSize);
+    const result = new Uint8Array(resultView);
+    api.free_result(resultPointer);
+    api.destroy_buffer(p);
+
+    const blob = new Blob([result], {type: 'image/jpeg'});
+    const blobURL = URL.createObjectURL(blob);
+    const img = document.createElement('img');
+    img.src = blobURL;
+    document.body.appendChild(img);
+  };
+</script>
--- a/codecs/webp_enc/example.png
+++ b/codecs/webp_enc/example.png
--- a/codecs/webp_enc/webp_enc.c
+++ b/codecs/webp_enc/webp_enc.c
@ -28,8 +28,8 @@ void encode(uint8_t* img_in, int width, int height, float quality) {
 }

 EMSCRIPTEN_KEEPALIVE
-void free_result(uint8_t* result) {
-  WebPFree(result);
+void free_result() {
+  WebPFree(result[0]);
 }

 EMSCRIPTEN_KEEPALIVE