Compare commits
1 Commits
chroma-sub
...
prerenderi
Author | SHA1 | Date | |
---|---|---|---|
dbf38e5a44 |
40
.babelrc
@ -1,13 +1,31 @@
|
|||||||
{
|
{
|
||||||
"plugins": [
|
"presets": [
|
||||||
"transform-class-properties",
|
[
|
||||||
"transform-react-constant-elements",
|
"env",
|
||||||
"transform-react-remove-prop-types",
|
{
|
||||||
[
|
"loose": true,
|
||||||
"transform-react-jsx",
|
"uglify": false,
|
||||||
{
|
"modules": false,
|
||||||
"pragma": "h"
|
"targets": {
|
||||||
}
|
"browsers": "last 2 versions"
|
||||||
]
|
},
|
||||||
]
|
"exclude": [
|
||||||
|
"transform-regenerator",
|
||||||
|
"transform-es2015-typeof-symbol"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"plugins": [
|
||||||
|
"transform-decorators-legacy",
|
||||||
|
"transform-class-properties",
|
||||||
|
"transform-react-constant-elements",
|
||||||
|
"transform-react-remove-prop-types",
|
||||||
|
[
|
||||||
|
"transform-react-jsx",
|
||||||
|
{
|
||||||
|
"pragma": "h"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
2
.gitignore
vendored
@ -2,5 +2,3 @@ node_modules
|
|||||||
/build
|
/build
|
||||||
/*.log
|
/*.log
|
||||||
*.scss.d.ts
|
*.scss.d.ts
|
||||||
*.css.d.ts
|
|
||||||
*.o
|
|
||||||
|
@ -1,5 +0,0 @@
|
|||||||
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
|
|
@ -1,16 +0,0 @@
|
|||||||
# Codecs
|
|
||||||
|
|
||||||
This folder contains a self-contained sub-project for each encoder and decoder that squoosh supplies.
|
|
||||||
|
|
||||||
## Build
|
|
||||||
|
|
||||||
Each subproject can be built using [Docker](https://www.docker.com/) the following commands:
|
|
||||||
|
|
||||||
```
|
|
||||||
$ npm install
|
|
||||||
$ npm run build
|
|
||||||
```
|
|
||||||
|
|
||||||
This will build two files: `<codec name>_<enc or dec>.js` and `<codec name>_<enc or dec>.wasm`. It will most likely be necessary to set [`Module["locateFile"]`](https://kripken.github.io/emscripten-site/docs/api_reference/module.html#affecting-execution) to sucessfully load the `.wasm` file. When the `.js` file is loaded, a global `<codec name>_<enc or dec>` is created with the same API as an [Emscripten `Module`](https://kripken.github.io/emscripten-site/docs/api_reference/module.html).
|
|
||||||
|
|
||||||
Each codec will document its API in its README.
|
|
Before Width: | Height: | Size: 3.3 MiB |
Before Width: | Height: | Size: 74 KiB |
Before Width: | Height: | Size: 239 KiB |
@ -1,30 +0,0 @@
|
|||||||
# 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()`.
|
|
@ -1,48 +0,0 @@
|
|||||||
#!/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 "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
|
|
@ -1,41 +0,0 @@
|
|||||||
<!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>
|
|
@ -1,245 +0,0 @@
|
|||||||
#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);
|
|
||||||
}
|
|
15
codecs/imagequant/imagequant.d.ts
vendored
@ -1,15 +0,0 @@
|
|||||||
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;
|
|
||||||
|
|
||||||
|
|
1147
codecs/imagequant/package-lock.json
generated
@ -1,13 +0,0 @@
|
|||||||
{
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,47 +0,0 @@
|
|||||||
# MozJPEG encoder
|
|
||||||
|
|
||||||
- Source: <https://github.com/mozilla/mozjpeg>
|
|
||||||
- Version: v3.3.1
|
|
||||||
|
|
||||||
## Dependencies
|
|
||||||
|
|
||||||
- Docker
|
|
||||||
|
|
||||||
## Example
|
|
||||||
|
|
||||||
See `example.html`
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
### `int version()`
|
|
||||||
|
|
||||||
Returns the version of MozJPEG as a number. va.b.c is encoded as 0x0a0b0c
|
|
||||||
|
|
||||||
### `void free_result()`
|
|
||||||
|
|
||||||
Frees the result created by `encode()`.
|
|
||||||
|
|
||||||
### `Uint8Array encode(std::string image_in, int image_width, int image_height, MozJpegOptions opts)`
|
|
||||||
|
|
||||||
Encodes the given image with given dimension to JPEG. Options looks like this:
|
|
||||||
|
|
||||||
```c++
|
|
||||||
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;
|
|
||||||
bool auto_subsample;
|
|
||||||
int chroma_subsample;
|
|
||||||
bool separate_chroma_quality;
|
|
||||||
int chroma_quality;
|
|
||||||
};
|
|
||||||
```
|
|
@ -1,53 +0,0 @@
|
|||||||
#!/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 "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
|
|
@ -1,48 +0,0 @@
|
|||||||
<!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 _ => {
|
|
||||||
console.log('Version:', module.version().toString(16));
|
|
||||||
const image = await loadImage('../example.png');
|
|
||||||
const result = module.encode(image.data, image.width, image.height, {
|
|
||||||
quality: 75,
|
|
||||||
baseline: false,
|
|
||||||
arithmetic: false,
|
|
||||||
progressive: true,
|
|
||||||
optimize_coding: true,
|
|
||||||
smoothing: 0,
|
|
||||||
color_space: 3,
|
|
||||||
quant_table: 3,
|
|
||||||
trellis_multipass: false,
|
|
||||||
trellis_opt_zero: false,
|
|
||||||
trellis_opt_table: false,
|
|
||||||
trellis_loops: 1,
|
|
||||||
auto_subsample: true,
|
|
||||||
chroma_subsample: 2,
|
|
||||||
separate_chroma_quality: false,
|
|
||||||
chroma_quality: 75,
|
|
||||||
});
|
|
||||||
|
|
||||||
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>
|
|
@ -1,234 +0,0 @@
|
|||||||
#include <emscripten/bind.h>
|
|
||||||
#include <emscripten/val.h>
|
|
||||||
#include <stdlib.h>
|
|
||||||
#include <inttypes.h>
|
|
||||||
#include <stdio.h>
|
|
||||||
#include <setjmp.h>
|
|
||||||
#include <string.h>
|
|
||||||
#include "config.h"
|
|
||||||
#include "jpeglib.h"
|
|
||||||
#include "cdjpeg.h"
|
|
||||||
|
|
||||||
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
|
|
||||||
|
|
||||||
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;
|
|
||||||
bool auto_subsample;
|
|
||||||
int chroma_subsample;
|
|
||||||
bool separate_chroma_quality;
|
|
||||||
int chroma_quality;
|
|
||||||
};
|
|
||||||
|
|
||||||
int version() {
|
|
||||||
char buffer[] = xstr(MOZJPEG_VERSION);
|
|
||||||
int version = 0;
|
|
||||||
int last_index = 0;
|
|
||||||
for(int i = 0; i < strlen(buffer); i++) {
|
|
||||||
if(buffer[i] == '.') {
|
|
||||||
buffer[i] = '\0';
|
|
||||||
version = version << 8 | atoi(&buffer[last_index]);
|
|
||||||
buffer[i] = '.';
|
|
||||||
last_index = i + 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
version = version << 8 | atoi(&buffer[last_index]);
|
|
||||||
return version;
|
|
||||||
}
|
|
||||||
|
|
||||||
uint8_t* last_result;
|
|
||||||
struct jpeg_compress_struct cinfo;
|
|
||||||
|
|
||||||
val encode(std::string image_in, int image_width, int image_height, MozJpegOptions opts) {
|
|
||||||
uint8_t* image_buffer = (uint8_t*) image_in.c_str();
|
|
||||||
|
|
||||||
// The code below is basically the `write_JPEG_file` function from
|
|
||||||
// https://github.com/mozilla/mozjpeg/blob/master/example.c
|
|
||||||
// I just write to memory instead of a file.
|
|
||||||
|
|
||||||
|
|
||||||
/* This struct contains the JPEG compression parameters and pointers to
|
|
||||||
* working space (which is allocated as needed by the JPEG library).
|
|
||||||
* It is possible to have several such structures, representing multiple
|
|
||||||
* compression/decompression processes, in existence at once. We refer
|
|
||||||
* to any one struct (and its associated working data) as a "JPEG object".
|
|
||||||
*/
|
|
||||||
/* 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
|
|
||||||
* take the easy way out and use the standard error handler, which will
|
|
||||||
* print a message on stderr and call exit() if compression fails.
|
|
||||||
* Note that this struct must live as long as the main JPEG parameter
|
|
||||||
* struct, to avoid dangling-pointer problems.
|
|
||||||
*/
|
|
||||||
struct jpeg_error_mgr jerr;
|
|
||||||
/* More stuff */
|
|
||||||
JSAMPROW row_pointer[1]; /* pointer to JSAMPLE row[s] */
|
|
||||||
int row_stride; /* physical row width in image buffer */
|
|
||||||
uint8_t* output;
|
|
||||||
unsigned long size;
|
|
||||||
|
|
||||||
/* Step 1: allocate and initialize JPEG compression object */
|
|
||||||
|
|
||||||
/* We have to set up the error handler first, in case the initialization
|
|
||||||
* step fails. (Unlikely, but it could happen if you are out of memory.)
|
|
||||||
* This routine fills in the contents of struct jerr, and returns jerr's
|
|
||||||
* address which we place into the link field in cinfo.
|
|
||||||
*/
|
|
||||||
cinfo.err = jpeg_std_error(&jerr);
|
|
||||||
/* Now we can initialize the JPEG compression object. */
|
|
||||||
jpeg_create_compress(&cinfo);
|
|
||||||
|
|
||||||
/* Step 2: specify data destination (eg, a file) */
|
|
||||||
/* Note: steps 2 and 3 can be done in either order. */
|
|
||||||
|
|
||||||
/* Here we use the library-supplied code to send compressed data to a
|
|
||||||
* stdio stream. You can also write your own code to do something else.
|
|
||||||
* VERY IMPORTANT: use "b" option to fopen() if you are on a machine that
|
|
||||||
* requires it in order to write binary files.
|
|
||||||
*/
|
|
||||||
// if ((outfile = fopen(filename, "wb")) == NULL) {
|
|
||||||
// fprintf(stderr, "can't open %s\n", filename);
|
|
||||||
// exit(1);
|
|
||||||
// }
|
|
||||||
jpeg_mem_dest(&cinfo, &output, &size);
|
|
||||||
|
|
||||||
/* Step 3: set parameters for compression */
|
|
||||||
|
|
||||||
/* First we supply a description of the input image.
|
|
||||||
* Four fields of the cinfo struct must be filled in:
|
|
||||||
*/
|
|
||||||
cinfo.image_width = image_width; /* image width and height, in pixels */
|
|
||||||
cinfo.image_height = image_height;
|
|
||||||
cinfo.input_components = 4; /* # of color components per pixel */
|
|
||||||
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);
|
|
||||||
|
|
||||||
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);
|
|
||||||
|
|
||||||
// A little hacky to build a string for this, but it means we can use set_quality_ratings which
|
|
||||||
// does some useful heuristic stuff.
|
|
||||||
std::string quality_str = std::to_string(opts.quality);
|
|
||||||
|
|
||||||
if (opts.separate_chroma_quality && opts.color_space == JCS_YCbCr) {
|
|
||||||
quality_str += "," + std::to_string(opts.chroma_quality);
|
|
||||||
}
|
|
||||||
|
|
||||||
char const *pqual = quality_str.c_str();
|
|
||||||
|
|
||||||
set_quality_ratings(&cinfo, (char*) pqual, opts.baseline);
|
|
||||||
|
|
||||||
if (!opts.auto_subsample && opts.color_space == JCS_YCbCr) {
|
|
||||||
cinfo.comp_info[0].h_samp_factor = opts.chroma_subsample;
|
|
||||||
cinfo.comp_info[0].v_samp_factor = opts.chroma_subsample;
|
|
||||||
}
|
|
||||||
|
|
||||||
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.
|
|
||||||
* Pass TRUE unless you are very sure of what you're doing.
|
|
||||||
*/
|
|
||||||
jpeg_start_compress(&cinfo, TRUE);
|
|
||||||
|
|
||||||
/* Step 5: while (scan lines remain to be written) */
|
|
||||||
/* jpeg_write_scanlines(...); */
|
|
||||||
|
|
||||||
/* Here we use the library's state variable cinfo.next_scanline as the
|
|
||||||
* loop counter, so that we don't have to keep track ourselves.
|
|
||||||
* To keep things simple, we pass one scanline per call; you can pass
|
|
||||||
* more if you wish, though.
|
|
||||||
*/
|
|
||||||
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.
|
|
||||||
* Here the array is only one element long, but you could pass
|
|
||||||
* more than one scanline at a time if that's more convenient.
|
|
||||||
*/
|
|
||||||
row_pointer[0] = & image_buffer[cinfo.next_scanline * row_stride];
|
|
||||||
(void) jpeg_write_scanlines(&cinfo, row_pointer, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Step 6: Finish compression */
|
|
||||||
|
|
||||||
jpeg_finish_compress(&cinfo);
|
|
||||||
/* Step 7: release JPEG compression object */
|
|
||||||
|
|
||||||
last_result = output;
|
|
||||||
|
|
||||||
/* And we're done! */
|
|
||||||
return val(typed_memory_view(size, output));
|
|
||||||
}
|
|
||||||
|
|
||||||
void free_result() {
|
|
||||||
/* This is an important step since it will release a good deal of memory. */
|
|
||||||
jpeg_destroy_compress(&cinfo);
|
|
||||||
}
|
|
||||||
|
|
||||||
EMSCRIPTEN_BINDINGS(my_module) {
|
|
||||||
value_object<MozJpegOptions>("MozJpegOptions")
|
|
||||||
.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)
|
|
||||||
.field("chroma_subsample", &MozJpegOptions::chroma_subsample)
|
|
||||||
.field("auto_subsample", &MozJpegOptions::auto_subsample)
|
|
||||||
.field("separate_chroma_quality", &MozJpegOptions::separate_chroma_quality)
|
|
||||||
.field("chroma_quality", &MozJpegOptions::chroma_quality)
|
|
||||||
;
|
|
||||||
|
|
||||||
function("version", &version);
|
|
||||||
function("encode", &encode);
|
|
||||||
function("free_result", &free_result);
|
|
||||||
}
|
|
8
codecs/mozjpeg_enc/mozjpeg_enc.d.ts
vendored
@ -1,8 +0,0 @@
|
|||||||
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;
|
|
1147
codecs/mozjpeg_enc/package-lock.json
generated
@ -1,13 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "mozjpeg_enc",
|
|
||||||
"scripts": {
|
|
||||||
"install": "napa",
|
|
||||||
"build": "docker run --rm -v $(pwd):/src trzeci/emscripten ./build.sh"
|
|
||||||
},
|
|
||||||
"napa": {
|
|
||||||
"mozjpeg": "mozilla/mozjpeg#v3.3.1"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"napa": "^3.0.0"
|
|
||||||
}
|
|
||||||
}
|
|
2
codecs/optipng/.gitignore
vendored
@ -1,2 +0,0 @@
|
|||||||
build/
|
|
||||||
*.o
|
|
@ -1,26 +0,0 @@
|
|||||||
# 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()`.
|
|
@ -1,87 +0,0 @@
|
|||||||
#!/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 "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
|
|
@ -1,19 +0,0 @@
|
|||||||
<!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>
|
|
@ -1,53 +0,0 @@
|
|||||||
#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);
|
|
||||||
}
|
|
10
codecs/optipng/optipng.d.ts
vendored
@ -1,10 +0,0 @@
|
|||||||
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;
|
|
||||||
|
|
||||||
|
|
1457
codecs/optipng/package-lock.json
generated
@ -1,22 +0,0 @@
|
|||||||
{
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,22 +0,0 @@
|
|||||||
# WebP decoder
|
|
||||||
|
|
||||||
- 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
|
|
||||||
|
|
||||||
### `RawImage decode(std::string buffer)`
|
|
||||||
|
|
||||||
Decodes the given webp buffer into raw RGBA. `RawImage` is a class with 3 fields: `buffer`, `width`, and `height`.
|
|
||||||
|
|
||||||
### `void free_result()`
|
|
||||||
|
|
||||||
Frees the result created by `decode()`.
|
|
@ -1,34 +0,0 @@
|
|||||||
#!/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 "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
|
|
@ -1,24 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<script src='webp_dec.js'></script>
|
|
||||||
<script>
|
|
||||||
const Module = webp_dec();
|
|
||||||
|
|
||||||
async function loadFile(src) {
|
|
||||||
const resp = await fetch(src);
|
|
||||||
return await resp.arrayBuffer();
|
|
||||||
}
|
|
||||||
|
|
||||||
Module.onRuntimeInitialized = async _ => {
|
|
||||||
console.log('Version:', Module.version().toString(16));
|
|
||||||
const image = await loadFile('../example.webp');
|
|
||||||
const result = Module.decode(image);
|
|
||||||
const imageData = new ImageData(new Uint8ClampedArray(result.buffer), result.width, result.height);
|
|
||||||
Module.free_result();
|
|
||||||
const canvas = document.createElement('canvas');
|
|
||||||
canvas.width = result.width;
|
|
||||||
canvas.height = result.height;
|
|
||||||
document.body.appendChild(canvas);
|
|
||||||
const ctx = canvas.getContext('2d');
|
|
||||||
ctx.putImageData(imageData, 0, 0);
|
|
||||||
};
|
|
||||||
</script>
|
|
1147
codecs/webp_dec/package-lock.json
generated
@ -1,13 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "webp_dec",
|
|
||||||
"scripts": {
|
|
||||||
"install": "napa",
|
|
||||||
"build": "docker run --rm -v $(pwd):/src trzeci/emscripten ./build.sh"
|
|
||||||
},
|
|
||||||
"napa": {
|
|
||||||
"libwebp": "webmproject/libwebp#v1.0.0"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"napa": "^3.0.0"
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,47 +0,0 @@
|
|||||||
#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);
|
|
||||||
}
|
|
13
codecs/webp_dec/webp_dec.d.ts
vendored
@ -1,13 +0,0 @@
|
|||||||
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;
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
|||||||
# WebP encoder
|
|
||||||
|
|
||||||
- Source: <https://github.com/webmproject/libwebp>
|
|
||||||
- Version: v0.6.1
|
|
||||||
|
|
||||||
## Dependencies
|
|
||||||
|
|
||||||
- Docker
|
|
||||||
|
|
||||||
## Example
|
|
||||||
|
|
||||||
See `example.html`
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
### `int version()`
|
|
||||||
|
|
||||||
Returns the version of libwebp as a number. va.b.c is encoded as 0x0a0b0c
|
|
||||||
|
|
||||||
### `UInt8Array encode(uint8_t* image_buffer, int image_width, int image_height, WebPConfig config)`
|
|
||||||
|
|
||||||
Encodes the given image with given dimension to WebP.
|
|
||||||
|
|
||||||
### `void free_result()`
|
|
||||||
|
|
||||||
Frees the last result created by `encode()`.
|
|
@ -1,34 +0,0 @@
|
|||||||
#!/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 "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
|
|
@ -1,62 +0,0 @@
|
|||||||
<!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 _ => {
|
|
||||||
console.log('Version:', module.version().toString(16));
|
|
||||||
const image = await loadImage('../example.png');
|
|
||||||
const result = module.encode(image.data, image.width, image.height, {
|
|
||||||
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,
|
|
||||||
});
|
|
||||||
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;
|
|
||||||
document.body.appendChild(img);
|
|
||||||
};
|
|
||||||
</script>
|
|
1147
codecs/webp_enc/package-lock.json
generated
@ -1,13 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "webp_enc",
|
|
||||||
"scripts": {
|
|
||||||
"install": "napa",
|
|
||||||
"build": "docker run --rm -v $(pwd):/src trzeci/emscripten ./build.sh"
|
|
||||||
},
|
|
||||||
"napa": {
|
|
||||||
"libwebp": "webmproject/libwebp#v1.0.0"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"napa": "^3.0.0"
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,95 +0,0 @@
|
|||||||
#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);
|
|
||||||
}
|
|
9
codecs/webp_enc/webp_enc.d.ts
vendored
@ -1,9 +0,0 @@
|
|||||||
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;
|
|
107
emscripten-wasm.d.ts
vendored
@ -1,107 +0,0 @@
|
|||||||
// These types roughly model the object that the JS files generated by Emscripten define. Copied from https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/emscripten/index.d.ts and turned into a type definition rather than a global to support our way of using Emscripten.
|
|
||||||
// TODO(@surma): Upstream this?
|
|
||||||
declare namespace EmscriptenWasm {
|
|
||||||
type EnvironmentType = "WEB" | "NODE" | "SHELL" | "WORKER";
|
|
||||||
|
|
||||||
// Options object for modularized Emscripten files. Shoe-horned by @surma.
|
|
||||||
// FIXME: This an incomplete definition!
|
|
||||||
interface ModuleOpts {
|
|
||||||
noInitialRun?: boolean;
|
|
||||||
locateFile?: (url: string) => string;
|
|
||||||
onRuntimeInitialized?: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Module {
|
|
||||||
print(str: string): void;
|
|
||||||
printErr(str: string): void;
|
|
||||||
arguments: string[];
|
|
||||||
environment: EnvironmentType;
|
|
||||||
preInit: { (): void }[];
|
|
||||||
preRun: { (): void }[];
|
|
||||||
postRun: { (): void }[];
|
|
||||||
preinitializedWebGLContext: WebGLRenderingContext;
|
|
||||||
noInitialRun: boolean;
|
|
||||||
noExitRuntime: boolean;
|
|
||||||
logReadFiles: boolean;
|
|
||||||
filePackagePrefixURL: string;
|
|
||||||
wasmBinary: ArrayBuffer;
|
|
||||||
|
|
||||||
destroy(object: object): void;
|
|
||||||
getPreloadedPackage(remotePackageName: string, remotePackageSize: number): ArrayBuffer;
|
|
||||||
instantiateWasm(
|
|
||||||
imports: WebAssembly.Imports,
|
|
||||||
successCallback: (module: WebAssembly.Module) => void
|
|
||||||
): WebAssembly.Exports;
|
|
||||||
locateFile(url: string): string;
|
|
||||||
onCustomMessage(event: MessageEvent): void;
|
|
||||||
|
|
||||||
Runtime: any;
|
|
||||||
|
|
||||||
ccall(ident: string, returnType: string | null, argTypes: string[], args: any[]): any;
|
|
||||||
cwrap(ident: string, returnType: string | null, argTypes: string[]): any;
|
|
||||||
|
|
||||||
setValue(ptr: number, value: any, type: string, noSafe?: boolean): void;
|
|
||||||
getValue(ptr: number, type: string, noSafe?: boolean): number;
|
|
||||||
|
|
||||||
ALLOC_NORMAL: number;
|
|
||||||
ALLOC_STACK: number;
|
|
||||||
ALLOC_STATIC: number;
|
|
||||||
ALLOC_DYNAMIC: number;
|
|
||||||
ALLOC_NONE: number;
|
|
||||||
|
|
||||||
allocate(slab: any, types: string, allocator: number, ptr: number): number;
|
|
||||||
allocate(slab: any, types: string[], allocator: number, ptr: number): number;
|
|
||||||
|
|
||||||
Pointer_stringify(ptr: number, length?: number): string;
|
|
||||||
UTF16ToString(ptr: number): string;
|
|
||||||
stringToUTF16(str: string, outPtr: number): void;
|
|
||||||
UTF32ToString(ptr: number): string;
|
|
||||||
stringToUTF32(str: string, outPtr: number): void;
|
|
||||||
|
|
||||||
// USE_TYPED_ARRAYS == 1
|
|
||||||
HEAP: Int32Array;
|
|
||||||
IHEAP: Int32Array;
|
|
||||||
FHEAP: Float64Array;
|
|
||||||
|
|
||||||
// USE_TYPED_ARRAYS == 2
|
|
||||||
HEAP8: Int8Array;
|
|
||||||
HEAP16: Int16Array;
|
|
||||||
HEAP32: Int32Array;
|
|
||||||
HEAPU8: Uint8Array;
|
|
||||||
HEAPU16: Uint16Array;
|
|
||||||
HEAPU32: Uint32Array;
|
|
||||||
HEAPF32: Float32Array;
|
|
||||||
HEAPF64: Float64Array;
|
|
||||||
|
|
||||||
TOTAL_STACK: number;
|
|
||||||
TOTAL_MEMORY: number;
|
|
||||||
FAST_MEMORY: number;
|
|
||||||
|
|
||||||
addOnPreRun(cb: () => any): void;
|
|
||||||
addOnInit(cb: () => any): void;
|
|
||||||
addOnPreMain(cb: () => any): void;
|
|
||||||
addOnExit(cb: () => any): void;
|
|
||||||
addOnPostRun(cb: () => any): void;
|
|
||||||
|
|
||||||
// Tools
|
|
||||||
intArrayFromString(stringy: string, dontAddNull?: boolean, length?: number): number[];
|
|
||||||
intArrayToString(array: number[]): string;
|
|
||||||
writeStringToMemory(str: string, buffer: number, dontAddNull: boolean): void;
|
|
||||||
writeArrayToMemory(array: number[], buffer: number): void;
|
|
||||||
writeAsciiToMemory(str: string, buffer: number, dontAddNull: boolean): void;
|
|
||||||
|
|
||||||
addRunDependency(id: any): void;
|
|
||||||
removeRunDependency(id: any): void;
|
|
||||||
|
|
||||||
|
|
||||||
preloadedImages: any;
|
|
||||||
preloadedAudios: any;
|
|
||||||
|
|
||||||
_malloc(size: number): number;
|
|
||||||
_free(ptr: number): void;
|
|
||||||
|
|
||||||
// Augmentations below by @surma.
|
|
||||||
onRuntimeInitialized: () => void | null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
4
global.d.ts
vendored
@ -13,6 +13,10 @@ declare namespace JSX {
|
|||||||
interface IntrinsicElements { }
|
interface IntrinsicElements { }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
declare module 'preact-i18n';
|
||||||
|
declare module 'preact-material-components-drawer';
|
||||||
|
declare module 'material-radial-progress';
|
||||||
|
|
||||||
declare module 'classnames' {
|
declare module 'classnames' {
|
||||||
export default function classnames(...args: any[]): string;
|
export default function classnames(...args: any[]): string;
|
||||||
}
|
}
|
||||||
|
12776
package-lock.json
generated
97
package.json
@ -4,67 +4,86 @@
|
|||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"license": "apache-2.0",
|
"license": "apache-2.0",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "webpack serve --host 0.0.0.0 --hot",
|
"start": "webpack serve --hot",
|
||||||
"build": "webpack -p",
|
"build": "webpack -p",
|
||||||
"lint": "tslint -c tslint.json -t verbose 'src/**/*.{ts,tsx,js,jsx}'",
|
"lint": "eslint src"
|
||||||
"lintfix": "tslint -c tslint.json -t verbose --fix 'src/**/*.{ts,tsx,js,jsx}'"
|
|
||||||
},
|
},
|
||||||
"husky": {
|
"eslintConfig": {
|
||||||
"hooks": {
|
"extends": [
|
||||||
"pre-commit": "npm run lint"
|
"standard",
|
||||||
|
"standard-jsx"
|
||||||
|
],
|
||||||
|
"rules": {
|
||||||
|
"indent": [
|
||||||
|
2,
|
||||||
|
2
|
||||||
|
],
|
||||||
|
"semi": [
|
||||||
|
2,
|
||||||
|
"always"
|
||||||
|
],
|
||||||
|
"prefer-const": 1
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"eslintIgnore": [
|
||||||
|
"build/*"
|
||||||
|
],
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/node": "^9.6.23",
|
"@types/node": "^9.4.7",
|
||||||
"@types/pretty-bytes": "^5.1.0",
|
"babel-loader": "^7.1.4",
|
||||||
"@types/webassembly-js-api": "0.0.1",
|
|
||||||
"@webcomponents/custom-elements": "^1.2.0",
|
|
||||||
"babel-loader": "^7.1.5",
|
|
||||||
"babel-plugin-jsx-pragmatic": "^1.0.2",
|
"babel-plugin-jsx-pragmatic": "^1.0.2",
|
||||||
"babel-plugin-syntax-dynamic-import": "^6.18.0",
|
"babel-plugin-syntax-dynamic-import": "^6.18.0",
|
||||||
"babel-plugin-transform-class-properties": "^6.24.1",
|
"babel-plugin-transform-class-properties": "^6.24.1",
|
||||||
"babel-plugin-transform-decorators-legacy": "^1.3.5",
|
"babel-plugin-transform-decorators-legacy": "^1.3.4",
|
||||||
"babel-plugin-transform-object-rest-spread": "^6.26.0",
|
"babel-plugin-transform-object-rest-spread": "^6.26.0",
|
||||||
"babel-plugin-transform-react-constant-elements": "^6.23.0",
|
"babel-plugin-transform-react-constant-elements": "^6.23.0",
|
||||||
"babel-plugin-transform-react-jsx": "^6.24.1",
|
"babel-plugin-transform-react-jsx": "^6.24.1",
|
||||||
"babel-plugin-transform-react-remove-prop-types": "^0.4.14",
|
"babel-plugin-transform-react-remove-prop-types": "^0.4.13",
|
||||||
"babel-preset-env": "^1.7.0",
|
"babel-preset-env": "^1.6.1",
|
||||||
"babel-register": "^6.26.0",
|
"babel-register": "^6.26.0",
|
||||||
"clean-webpack-plugin": "^0.1.19",
|
"clean-webpack-plugin": "^0.1.19",
|
||||||
"copy-webpack-plugin": "^4.5.2",
|
"copy-webpack-plugin": "^4.5.1",
|
||||||
"css-loader": "^0.28.11",
|
"css-loader": "^0.28.11",
|
||||||
"exports-loader": "^0.7.0",
|
"eslint": "^4.18.2",
|
||||||
"file-loader": "^1.1.11",
|
"eslint-config-standard": "^11.0.0",
|
||||||
"html-webpack-plugin": "^3.2.0",
|
"eslint-config-standard-jsx": "^5.0.0",
|
||||||
"husky": "^1.0.0-rc.13",
|
"eslint-plugin-import": "^2.10.0",
|
||||||
|
"eslint-plugin-node": "^6.0.1",
|
||||||
|
"eslint-plugin-promise": "^3.7.0",
|
||||||
|
"eslint-plugin-react": "^7.7.0",
|
||||||
|
"eslint-plugin-standard": "^3.0.1",
|
||||||
|
"html-webpack-plugin": "^3.0.6",
|
||||||
"if-env": "^1.0.4",
|
"if-env": "^1.0.4",
|
||||||
"loader-utils": "^1.1.0",
|
"loader-utils": "^1.1.0",
|
||||||
"mini-css-extract-plugin": "^0.3.0",
|
"mini-css-extract-plugin": "^0.3.0",
|
||||||
"node-sass": "^4.9.3",
|
"node-sass": "^4.7.2",
|
||||||
"optimize-css-assets-webpack-plugin": "^4.0.3",
|
"optimize-css-assets-webpack-plugin": "^4.0.0",
|
||||||
"progress-bar-webpack-plugin": "^1.11.0",
|
"progress-bar-webpack-plugin": "^1.11.0",
|
||||||
"raw-loader": "^0.5.1",
|
"raw-loader": "^0.5.1",
|
||||||
"sass-loader": "^7.1.0",
|
"sass-loader": "^6.0.7",
|
||||||
"script-ext-html-webpack-plugin": "^2.0.1",
|
"script-ext-html-webpack-plugin": "^2.0.1",
|
||||||
"source-map-loader": "^0.2.3",
|
"source-map-loader": "^0.2.3",
|
||||||
"style-loader": "^0.22.1",
|
"style-loader": "^0.20.3",
|
||||||
"ts-loader": "^4.4.2",
|
"ts-loader": "^4.0.1",
|
||||||
"tslint": "^5.11.0",
|
"tslint": "^5.9.1",
|
||||||
"tslint-config-airbnb": "^5.9.2",
|
|
||||||
"tslint-config-semistandard": "^7.0.0",
|
"tslint-config-semistandard": "^7.0.0",
|
||||||
"tslint-react": "^3.6.0",
|
"tslint-react": "^3.5.1",
|
||||||
"typescript": "^2.9.2",
|
"typescript": "^2.7.2",
|
||||||
"typings-for-css-modules-loader": "^1.7.0",
|
"typings-for-css-modules-loader": "^1.7.0",
|
||||||
"webpack": "^4.19.1",
|
"webpack": "^4.3.0",
|
||||||
"webpack-bundle-analyzer": "^2.13.1",
|
"webpack-bundle-analyzer": "^2.11.1",
|
||||||
"webpack-cli": "^2.1.5",
|
"webpack-cli": "^2.0.13",
|
||||||
"webpack-dev-server": "^3.1.5",
|
"webpack-dev-server": "^3.1.1",
|
||||||
"webpack-plugin-replace": "^1.1.1",
|
"webpack-plugin-replace": "^1.1.1"
|
||||||
"classnames": "^2.2.6",
|
},
|
||||||
"comlink": "^3.0.3",
|
"dependencies": {
|
||||||
"linkstate": "^1.1.1",
|
"classnames": "^2.2.5",
|
||||||
"preact": "^8.3.1",
|
"material-components-web": "^0.32.0",
|
||||||
"pretty-bytes": "^5.1.0",
|
"material-radial-progress": "git+https://gist.github.com/02134901c77c5309924bfcf8b4435ebe.git",
|
||||||
"worker-plugin": "^1.1.1"
|
"preact": "^8.2.7",
|
||||||
|
"preact-i18n": "^1.2.0",
|
||||||
|
"preact-material-components": "^1.3.7",
|
||||||
|
"preact-material-components-drawer": "git+https://gist.github.com/a78fceed440b98e62582e4440b86bfab.git",
|
||||||
|
"preact-router": "^2.6.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 26 KiB |
Before Width: | Height: | Size: 6.7 KiB |
BIN
src/assets/icon.png
Normal file
After Width: | Height: | Size: 27 KiB |
@ -1,11 +0,0 @@
|
|||||||
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);
|
|
@ -1,6 +0,0 @@
|
|||||||
import { mimeType } from './encoder-meta';
|
|
||||||
import { canvasEncode } from '../../lib/util';
|
|
||||||
|
|
||||||
export function encode(data: ImageData) {
|
|
||||||
return canvasEncode(data, mimeType);
|
|
||||||
}
|
|
@ -1,11 +0,0 @@
|
|||||||
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);
|
|
@ -1,6 +0,0 @@
|
|||||||
import { mimeType } from './encoder-meta';
|
|
||||||
import { canvasEncode } from '../../lib/util';
|
|
||||||
|
|
||||||
export function encode(data: ImageData) {
|
|
||||||
return canvasEncode(data, mimeType);
|
|
||||||
}
|
|
@ -1,11 +0,0 @@
|
|||||||
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);
|
|
@ -1,6 +0,0 @@
|
|||||||
import { mimeType } from './encoder-meta';
|
|
||||||
import { canvasEncode } from '../../lib/util';
|
|
||||||
|
|
||||||
export function encode(data: ImageData) {
|
|
||||||
return canvasEncode(data, mimeType);
|
|
||||||
}
|
|
@ -1,8 +0,0 @@
|
|||||||
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 };
|
|
@ -1,6 +0,0 @@
|
|||||||
import { EncodeOptions, mimeType } from './encoder-meta';
|
|
||||||
import { canvasEncode } from '../../lib/util';
|
|
||||||
|
|
||||||
export function encode(data: ImageData, { quality }: EncodeOptions) {
|
|
||||||
return canvasEncode(data, mimeType, quality);
|
|
||||||
}
|
|
@ -1,3 +0,0 @@
|
|||||||
import qualityOption from '../generic/quality-option';
|
|
||||||
|
|
||||||
export default qualityOption({ min: 0, max: 1, step: 0.01 });
|
|
@ -1,11 +0,0 @@
|
|||||||
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);
|
|
@ -1,6 +0,0 @@
|
|||||||
import { mimeType } from './encoder-meta';
|
|
||||||
import { canvasEncode } from '../../lib/util';
|
|
||||||
|
|
||||||
export function encode(data: ImageData) {
|
|
||||||
return canvasEncode(data, mimeType);
|
|
||||||
}
|
|
@ -1,8 +0,0 @@
|
|||||||
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 = {};
|
|
@ -1,6 +0,0 @@
|
|||||||
import { mimeType } from './encoder-meta';
|
|
||||||
import { canvasEncode } from '../../lib/util';
|
|
||||||
|
|
||||||
export function encode(data: ImageData) {
|
|
||||||
return canvasEncode(data, mimeType);
|
|
||||||
}
|
|
@ -1,11 +0,0 @@
|
|||||||
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);
|
|
@ -1,6 +0,0 @@
|
|||||||
import { mimeType } from './encoder-meta';
|
|
||||||
import { canvasEncode } from '../../lib/util';
|
|
||||||
|
|
||||||
export function encode(data: ImageData) {
|
|
||||||
return canvasEncode(data, mimeType);
|
|
||||||
}
|
|
@ -1,11 +0,0 @@
|
|||||||
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);
|
|
@ -1,6 +0,0 @@
|
|||||||
import { EncodeOptions, mimeType } from './encoder-meta';
|
|
||||||
import { canvasEncode } from '../../lib/util';
|
|
||||||
|
|
||||||
export function encode(data: ImageData, { quality }: EncodeOptions) {
|
|
||||||
return canvasEncode(data, mimeType, quality);
|
|
||||||
}
|
|
@ -1,3 +0,0 @@
|
|||||||
import qualityOption from '../generic/quality-option';
|
|
||||||
|
|
||||||
export default qualityOption({ min: 0, max: 1, step: 0.01 });
|
|
@ -1,21 +0,0 @@
|
|||||||
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");
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,78 +0,0 @@
|
|||||||
import * as identity from './identity/encoder-meta';
|
|
||||||
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 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;
|
|
||||||
});
|
|
@ -1,56 +0,0 @@
|
|||||||
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;
|
|
||||||
}
|
|
@ -1,13 +0,0 @@
|
|||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,6 +0,0 @@
|
|||||||
export interface EncodeOptions {}
|
|
||||||
export interface EncoderState { type: typeof type; options: EncodeOptions; }
|
|
||||||
|
|
||||||
export const type = 'identity';
|
|
||||||
export const label = 'Original image';
|
|
||||||
export const defaultOptions: EncodeOptions = {};
|
|
@ -1,91 +0,0 @@
|
|||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,11 +0,0 @@
|
|||||||
export interface QuantizeOptions {
|
|
||||||
zx: number;
|
|
||||||
maxNumColors: number;
|
|
||||||
dither: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const defaultOptions: QuantizeOptions = {
|
|
||||||
zx: 0,
|
|
||||||
maxNumColors: 256,
|
|
||||||
dither: 1.0,
|
|
||||||
};
|
|
@ -1,21 +0,0 @@
|
|||||||
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);
|
|
||||||
}
|
|
@ -1,49 +0,0 @@
|
|||||||
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;
|
|
||||||
auto_subsample: boolean;
|
|
||||||
chroma_subsample: number;
|
|
||||||
separate_chroma_quality: boolean;
|
|
||||||
chroma_quality: 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,
|
|
||||||
auto_subsample: true,
|
|
||||||
chroma_subsample: 2,
|
|
||||||
separate_chroma_quality: false,
|
|
||||||
chroma_quality: 75,
|
|
||||||
};
|
|
@ -1,18 +0,0 @@
|
|||||||
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';
|
|
||||||
|
|
||||||
let emscriptenModule: Promise<MozJPEGModule>;
|
|
||||||
|
|
||||||
export async function encode(data: ImageData, options: EncodeOptions): Promise<ArrayBuffer> {
|
|
||||||
if (!emscriptenModule) emscriptenModule = initWasmModule(mozjpeg_enc, wasmUrl);
|
|
||||||
|
|
||||||
const module = await emscriptenModule;
|
|
||||||
const resultView = module.encode(data.data, data.width, data.height, options);
|
|
||||||
const result = new Uint8Array(resultView);
|
|
||||||
module.free_result();
|
|
||||||
|
|
||||||
// wasm can’t run on SharedArrayBuffers, so we hard-cast to ArrayBuffer.
|
|
||||||
return result.buffer as ArrayBuffer;
|
|
||||||
}
|
|
@ -1,258 +0,0 @@
|
|||||||
import { h, Component } from 'preact';
|
|
||||||
import { bind } from '../../lib/initial-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';
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
options: EncodeOptions;
|
|
||||||
onChange(newOptions: EncodeOptions): void;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface State {
|
|
||||||
showAdvanced: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class MozJPEGEncoderOptions extends Component<Props, State> {
|
|
||||||
state: State = {
|
|
||||||
showAdvanced: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
@bind
|
|
||||||
onChange(event: Event) {
|
|
||||||
const form = (event.currentTarget as HTMLInputElement).closest('form') as HTMLFormElement;
|
|
||||||
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),
|
|
||||||
auto_subsample: inputFieldChecked(form.auto_subsample, options.auto_subsample),
|
|
||||||
separate_chroma_quality:
|
|
||||||
inputFieldChecked(form.separate_chroma_quality, options.separate_chroma_quality),
|
|
||||||
// .value
|
|
||||||
quality: inputFieldValueAsNumber(form.quality, options.quality),
|
|
||||||
chroma_quality: inputFieldValueAsNumber(form.chroma_quality, options.chroma_quality),
|
|
||||||
chroma_subsample: inputFieldValueAsNumber(form.chroma_subsample, options.chroma_subsample),
|
|
||||||
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, { showAdvanced }: State) {
|
|
||||||
// I'm rendering both lossy and lossless forms, as it becomes much easier when
|
|
||||||
// gathering the data.
|
|
||||||
return (
|
|
||||||
<form class={style.optionsSection}>
|
|
||||||
<div class={style.optionOneCell}>
|
|
||||||
<Range
|
|
||||||
name="quality"
|
|
||||||
min="0"
|
|
||||||
max="100"
|
|
||||||
value={options.quality}
|
|
||||||
onInput={this.onChange}
|
|
||||||
>
|
|
||||||
Quality:
|
|
||||||
</Range>
|
|
||||||
</div>
|
|
||||||
<label class={style.optionInputFirst}>
|
|
||||||
<Checkbox
|
|
||||||
checked={showAdvanced}
|
|
||||||
onChange={linkState(this, 'showAdvanced')}
|
|
||||||
/>
|
|
||||||
Show advanced settings
|
|
||||||
</label>
|
|
||||||
<Expander>
|
|
||||||
{showAdvanced ?
|
|
||||||
<div>
|
|
||||||
<label class={style.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>
|
|
||||||
<Expander>
|
|
||||||
{options.color_space === MozJpegColorSpace.YCbCr ?
|
|
||||||
<div>
|
|
||||||
<label class={style.optionInputFirst}>
|
|
||||||
<Checkbox
|
|
||||||
name="auto_subsample"
|
|
||||||
checked={options.auto_subsample}
|
|
||||||
onChange={this.onChange}
|
|
||||||
/>
|
|
||||||
Auto subsample chroma
|
|
||||||
</label>
|
|
||||||
<Expander>
|
|
||||||
{options.auto_subsample ? null :
|
|
||||||
<div class={style.optionOneCell}>
|
|
||||||
<Range
|
|
||||||
name="chroma_subsample"
|
|
||||||
min="1"
|
|
||||||
max="4"
|
|
||||||
value={options.chroma_subsample}
|
|
||||||
onInput={this.onChange}
|
|
||||||
>
|
|
||||||
Subsample chroma by:
|
|
||||||
</Range>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</Expander>
|
|
||||||
<label class={style.optionInputFirst}>
|
|
||||||
<Checkbox
|
|
||||||
name="separate_chroma_quality"
|
|
||||||
checked={options.separate_chroma_quality}
|
|
||||||
onChange={this.onChange}
|
|
||||||
/>
|
|
||||||
Separate chroma quality
|
|
||||||
</label>
|
|
||||||
<Expander>
|
|
||||||
{options.separate_chroma_quality ?
|
|
||||||
<div class={style.optionOneCell}>
|
|
||||||
<Range
|
|
||||||
name="chroma_quality"
|
|
||||||
min="0"
|
|
||||||
max="100"
|
|
||||||
value={options.chroma_quality}
|
|
||||||
onInput={this.onChange}
|
|
||||||
>
|
|
||||||
Chroma quality:
|
|
||||||
</Range>
|
|
||||||
</div>
|
|
||||||
: null
|
|
||||||
}
|
|
||||||
</Expander>
|
|
||||||
</div>
|
|
||||||
: null
|
|
||||||
}
|
|
||||||
</Expander>
|
|
||||||
<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}>
|
|
||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,13 +0,0 @@
|
|||||||
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,
|
|
||||||
};
|
|
@ -1,18 +0,0 @@
|
|||||||
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;
|
|
||||||
}
|
|
@ -1,42 +0,0 @@
|
|||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,23 +0,0 @@
|
|||||||
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,
|
|
||||||
},
|
|
||||||
};
|
|
@ -1,41 +0,0 @@
|
|||||||
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);
|
|
@ -1,204 +0,0 @@
|
|||||||
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);
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,146 +0,0 @@
|
|||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,26 +0,0 @@
|
|||||||
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',
|
|
||||||
};
|
|
@ -1,49 +0,0 @@
|
|||||||
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,
|
|
||||||
});
|
|
||||||
}
|
|
@ -1,27 +0,0 @@
|
|||||||
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);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|