Compare commits
164 Commits
Author | SHA1 | Date | |
---|---|---|---|
3541ce7492 | |||
b6fae0eb4c | |||
fbaa282f07 | |||
6136ae7411 | |||
f024747299 | |||
66feffcc49 | |||
24254df7db | |||
cae73f1f1b | |||
073a52213e | |||
0d34485a00 | |||
65519d539e | |||
ec44a8e817 | |||
920f225cb0 | |||
d5d4bd61ff | |||
5656d10b67 | |||
adb4b6468b | |||
0a293d7f63 | |||
27cb5afd5b | |||
5e58fc6b04 | |||
e820adfc96 | |||
5a8a114dcb | |||
a1c685e820 | |||
377dcfcc1b | |||
913e67ca93 | |||
fb1a97c7d4 | |||
42eef6945d | |||
d04b08d640 | |||
c547dd10d3 | |||
f4579da9c9 | |||
37dc585d80 | |||
bc0a425a0f | |||
b696f246a1 | |||
e6e197e140 | |||
1c0e8a1fd3 | |||
e3e154fa1a | |||
73b7c437f9 | |||
719168be77 | |||
a2021b175c | |||
9a388fbd13 | |||
1ba0452540 | |||
73df9f18f0 | |||
0e7521877b | |||
120b37c192 | |||
5f3502b838 | |||
33f99432c5 | |||
85756ff5df | |||
84e567ad6a | |||
39281331fa | |||
438ce2ce63 | |||
a13e17e256 | |||
cd6db2d776 | |||
a08662b617 | |||
003ec9de35 | |||
e7f76ca0b8 | |||
21111e2927 | |||
445c3ef32c | |||
9df5542ee1 | |||
fffc4a0cd1 | |||
50a8743be3 | |||
8480bc7dbd | |||
72e4546922 | |||
11be5babca | |||
17e5db2427 | |||
465093eb07 | |||
b430ac1041 | |||
ea96847c1e | |||
3b5106a61d | |||
9f611b0b52 | |||
18a6b3c3e5 | |||
d9ed4e18ea | |||
9e757aa896 | |||
89b58bb446 | |||
e80ca583cc | |||
2ecc81b34f | |||
60e98ee34f | |||
538ea89ea9 | |||
3990e11e0a | |||
0251f88fe5 | |||
bbcb959b11 | |||
b5e928bac9 | |||
6592dee4a9 | |||
9b3d72191e | |||
a92e5b48ff | |||
e355764ab0 | |||
c5efd5a8bf | |||
385461944b | |||
8385ba3274 | |||
6ca6a77595 | |||
14c837e894 | |||
33346d7cb6 | |||
05d4f531e2 | |||
ede2c49b12 | |||
16acd32c68 | |||
cc90192860 | |||
3607005fa8 | |||
7646a64f94 | |||
c8ce6ce27b | |||
1240474c4b | |||
f5e84441c0 | |||
6bc19d78bc | |||
a4437d2873 | |||
cd19650748 | |||
253315b3b1 | |||
4203ad9a13 | |||
6958202f9d | |||
386fef063f | |||
d7246ca427 | |||
fd024853b6 | |||
bd53d17876 | |||
3f87f571f4 | |||
1c69a6f1b7 | |||
82419cbb6e | |||
db65630c8d | |||
b8e54b947f | |||
f23897108d | |||
1efe5b21f0 | |||
fc71b4d249 | |||
dc81d46556 | |||
56c2080f43 | |||
4cc50fcaa5 | |||
2d67562576 | |||
76f2d7afa7 | |||
80fa9c4f21 | |||
8f215a5b4b | |||
bffd9cb52a | |||
74b1ff5b10 | |||
3c0079fea0 | |||
c0a9723d20 | |||
a4f0a76200 | |||
eb57b0130b | |||
f8c37c7abc | |||
72373f8812 | |||
b285e99e7d | |||
f9a6b88bb6 | |||
4a65d506f2 | |||
3bc03c90fd | |||
c35dfa4ac5 | |||
1d2a9a9dde | |||
925220bb13 | |||
16d088bfe3 | |||
b8e22ee435 | |||
60dea4b932 | |||
8ae1a42e4b | |||
cfdc7a46e6 | |||
afb23adcbf | |||
3b84a474b8 | |||
e96bb04e88 | |||
2e3b8507b2 | |||
e12c69f1a6 | |||
d049a23469 | |||
2633f427c8 | |||
ff920f1d7b | |||
fd69560025 | |||
ba51e47e05 | |||
409f552274 | |||
69a7c184bd | |||
3039c84738 | |||
bfa5cd085d | |||
7c282b30b1 | |||
06fa3c541e | |||
c9e31ac1f7 | |||
e248486d3d | |||
b32a52d236 | |||
a24b4d6d4d |
5
codecs/hqx/.gitignore
vendored
Normal file
5
codecs/hqx/.gitignore
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
**/*.rs.bk
|
||||
target
|
||||
Cargo.lock
|
||||
bin/
|
||||
pkg/README.md
|
37
codecs/hqx/Cargo.toml
Normal file
37
codecs/hqx/Cargo.toml
Normal file
@ -0,0 +1,37 @@
|
||||
[package]
|
||||
name = "squooshhqx"
|
||||
version = "0.1.0"
|
||||
authors = ["Surma <surma@surma.link>"]
|
||||
|
||||
[lib]
|
||||
crate-type = ["cdylib"]
|
||||
|
||||
[features]
|
||||
default = ["console_error_panic_hook", "wee_alloc"]
|
||||
|
||||
[dependencies]
|
||||
cfg-if = "0.1.2"
|
||||
wasm-bindgen = "0.2.38"
|
||||
# lazy_static = "1.0.0"
|
||||
hqx = {git = "https://github.com/CryZe/wasmboy-rs", tag="v0.1.2"}
|
||||
|
||||
# The `console_error_panic_hook` crate provides better debugging of panics by
|
||||
# logging them with `console.error`. This is great for development, but requires
|
||||
# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
|
||||
# code size when deploying.
|
||||
console_error_panic_hook = { version = "0.1.1", optional = true }
|
||||
|
||||
# `wee_alloc` is a tiny allocator for wasm that is only ~1K in code size
|
||||
# compared to the default allocator's ~10K. It is slower than the default
|
||||
# allocator, however.
|
||||
#
|
||||
# Unfortunately, `wee_alloc` requires nightly Rust when targeting wasm for now.
|
||||
wee_alloc = { version = "0.4.2", optional = true }
|
||||
|
||||
[dev-dependencies]
|
||||
wasm-bindgen-test = "0.2"
|
||||
|
||||
[profile.release]
|
||||
# Tell `rustc` to optimize for small code size.
|
||||
opt-level = "s"
|
||||
lto = true
|
21
codecs/hqx/Dockerfile
Normal file
21
codecs/hqx/Dockerfile
Normal file
@ -0,0 +1,21 @@
|
||||
FROM ubuntu
|
||||
RUN apt-get update && \
|
||||
apt-get install -qqy git build-essential cmake python2.7
|
||||
|
||||
RUN git clone --depth 1 --recursive https://github.com/WebAssembly/wabt /usr/src/wabt
|
||||
RUN mkdir -p /usr/src/wabt/build
|
||||
WORKDIR /usr/src/wabt/build
|
||||
RUN cmake .. -DCMAKE_INSTALL_PREFIX=/opt/wabt && \
|
||||
make && \
|
||||
make install
|
||||
|
||||
FROM rust
|
||||
RUN rustup install nightly && \
|
||||
rustup target add --toolchain nightly wasm32-unknown-unknown && \
|
||||
cargo install wasm-pack
|
||||
|
||||
COPY --from=0 /opt/wabt /opt/wabt
|
||||
RUN mkdir /opt/binaryen && \
|
||||
curl -L https://github.com/WebAssembly/binaryen/releases/download/1.38.32/binaryen-1.38.32-x86-linux.tar.gz | tar -xzf - -C /opt/binaryen --strip 1
|
||||
ENV PATH="/opt/binaryen:/opt/wabt/bin:${PATH}"
|
||||
WORKDIR /src
|
26
codecs/hqx/build.sh
Executable file
26
codecs/hqx/build.sh
Executable file
@ -0,0 +1,26 @@
|
||||
#!/bin/bash
|
||||
|
||||
set -e
|
||||
|
||||
echo "============================================="
|
||||
echo "Compiling wasm"
|
||||
echo "============================================="
|
||||
(
|
||||
rustup run nightly \
|
||||
wasm-pack build --target no-modules
|
||||
wasm-strip pkg/squooshhqx_bg.wasm
|
||||
echo "Optimising WASM so it doesn't break Chrome (this takes like 10-15mins. get a cup of tea)"
|
||||
echo "Once https://bugs.chromium.org/p/chromium/issues/detail?id=97480 is fixed, we can remove this step"
|
||||
wasm-opt -Os --no-validation -o pkg/squooshhqx_bg.wasm pkg/squooshhqx_bg.wasm
|
||||
rm pkg/.gitignore
|
||||
)
|
||||
echo "============================================="
|
||||
echo "Compiling wasm done"
|
||||
echo "============================================="
|
||||
|
||||
echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
|
||||
echo "Did you update your docker image?"
|
||||
echo "Run \`docker pull ubuntu\`"
|
||||
echo "Run \`docker pull rust\`"
|
||||
echo "Run \`docker build -t squoosh-hqx .\`"
|
||||
echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
|
24
codecs/hqx/index.html
Normal file
24
codecs/hqx/index.html
Normal file
@ -0,0 +1,24 @@
|
||||
<!doctype html>
|
||||
<script src ="./pkg/squooshhqx.js"></script>
|
||||
<script type="module">
|
||||
async function run() {
|
||||
await wasm_bindgen("./pkg/squooshhqx_bg.wasm");
|
||||
const bitmap = await createImageBitmap(await fetch("https://i.imgur.com/MNDnBSc.png").then(r => r.blob()));
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = bitmap.width;
|
||||
canvas.height = bitmap.height;
|
||||
const ctx = canvas.getContext("2d");
|
||||
ctx.drawImage(bitmap, 0, 0);
|
||||
const imgdata = ctx.getImageData(0, 0, bitmap.width, bitmap.height);
|
||||
const factor = 4;
|
||||
const r = wasm_bindgen.resize(new Uint32Array(imgdata.data.buffer), bitmap.width, bitmap.height, factor);
|
||||
|
||||
canvas.width = bitmap.width * factor;
|
||||
canvas.height = bitmap.height * factor;
|
||||
const output = new ImageData(new Uint8ClampedArray(r.buffer), canvas.width, canvas.height);
|
||||
ctx.putImageData(output, 0, 0);
|
||||
canvas.style = `width: ${canvas.width}px; height: ${canvas.height}px; image-rendering: pixelated;`;
|
||||
document.body.append(canvas);
|
||||
}
|
||||
run();
|
||||
</script>
|
4
codecs/hqx/package-lock.json
generated
Normal file
4
codecs/hqx/package-lock.json
generated
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"name": "hqx",
|
||||
"lockfileVersion": 1
|
||||
}
|
7
codecs/hqx/package.json
Normal file
7
codecs/hqx/package.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"name": "hqx",
|
||||
"scripts": {
|
||||
"build:image": "docker build -t squoosh-hqx .",
|
||||
"build": "docker run --rm -v $(pwd):/src squoosh-hqx ./build.sh"
|
||||
}
|
||||
}
|
14
codecs/hqx/pkg/package.json
Normal file
14
codecs/hqx/pkg/package.json
Normal file
@ -0,0 +1,14 @@
|
||||
{
|
||||
"name": "squooshhqx",
|
||||
"collaborators": [
|
||||
"Surma <surma@surma.link>"
|
||||
],
|
||||
"version": "0.1.0",
|
||||
"files": [
|
||||
"squooshhqx_bg.wasm",
|
||||
"squooshhqx.js",
|
||||
"squooshhqx.d.ts"
|
||||
],
|
||||
"browser": "squooshhqx.js",
|
||||
"types": "squooshhqx.d.ts"
|
||||
}
|
20
codecs/hqx/pkg/squooshhqx.d.ts
vendored
Normal file
20
codecs/hqx/pkg/squooshhqx.d.ts
vendored
Normal file
@ -0,0 +1,20 @@
|
||||
/* tslint:disable */
|
||||
/**
|
||||
* @param {Uint32Array} input_image
|
||||
* @param {number} input_width
|
||||
* @param {number} input_height
|
||||
* @param {number} factor
|
||||
* @returns {Uint32Array}
|
||||
*/
|
||||
export function resize(input_image: Uint32Array, input_width: number, input_height: number, factor: number): Uint32Array;
|
||||
|
||||
/**
|
||||
* If `module_or_path` is {RequestInfo}, makes a request and
|
||||
* for everything else, calls `WebAssembly.instantiate` directly.
|
||||
*
|
||||
* @param {RequestInfo | BufferSource | WebAssembly.Module} module_or_path
|
||||
*
|
||||
* @returns {Promise<any>}
|
||||
*/
|
||||
export default function init (module_or_path: RequestInfo | BufferSource | WebAssembly.Module): Promise<any>;
|
||||
|
97
codecs/hqx/pkg/squooshhqx.js
Normal file
97
codecs/hqx/pkg/squooshhqx.js
Normal file
@ -0,0 +1,97 @@
|
||||
(function() {
|
||||
const __exports = {};
|
||||
let wasm;
|
||||
|
||||
let cachegetUint32Memory = null;
|
||||
function getUint32Memory() {
|
||||
if (cachegetUint32Memory === null || cachegetUint32Memory.buffer !== wasm.memory.buffer) {
|
||||
cachegetUint32Memory = new Uint32Array(wasm.memory.buffer);
|
||||
}
|
||||
return cachegetUint32Memory;
|
||||
}
|
||||
|
||||
let WASM_VECTOR_LEN = 0;
|
||||
|
||||
function passArray32ToWasm(arg) {
|
||||
const ptr = wasm.__wbindgen_malloc(arg.length * 4);
|
||||
getUint32Memory().set(arg, ptr / 4);
|
||||
WASM_VECTOR_LEN = arg.length;
|
||||
return ptr;
|
||||
}
|
||||
|
||||
function getArrayU32FromWasm(ptr, len) {
|
||||
return getUint32Memory().subarray(ptr / 4, ptr / 4 + len);
|
||||
}
|
||||
|
||||
let cachedGlobalArgumentPtr = null;
|
||||
function globalArgumentPtr() {
|
||||
if (cachedGlobalArgumentPtr === null) {
|
||||
cachedGlobalArgumentPtr = wasm.__wbindgen_global_argument_ptr();
|
||||
}
|
||||
return cachedGlobalArgumentPtr;
|
||||
}
|
||||
/**
|
||||
* @param {Uint32Array} input_image
|
||||
* @param {number} input_width
|
||||
* @param {number} input_height
|
||||
* @param {number} factor
|
||||
* @returns {Uint32Array}
|
||||
*/
|
||||
__exports.resize = function(input_image, input_width, input_height, factor) {
|
||||
const ptr0 = passArray32ToWasm(input_image);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const retptr = globalArgumentPtr();
|
||||
wasm.resize(retptr, ptr0, len0, input_width, input_height, factor);
|
||||
const mem = getUint32Memory();
|
||||
const rustptr = mem[retptr / 4];
|
||||
const rustlen = mem[retptr / 4 + 1];
|
||||
|
||||
const realRet = getArrayU32FromWasm(rustptr, rustlen).slice();
|
||||
wasm.__wbindgen_free(rustptr, rustlen * 4);
|
||||
return realRet;
|
||||
|
||||
};
|
||||
|
||||
function init(module) {
|
||||
|
||||
let result;
|
||||
const imports = {};
|
||||
|
||||
if (module instanceof URL || typeof module === 'string' || module instanceof Request) {
|
||||
|
||||
const response = fetch(module);
|
||||
if (typeof WebAssembly.instantiateStreaming === 'function') {
|
||||
result = WebAssembly.instantiateStreaming(response, imports)
|
||||
.catch(e => {
|
||||
console.warn("`WebAssembly.instantiateStreaming` failed. Assuming this is because your server does not serve wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\n", e);
|
||||
return response
|
||||
.then(r => r.arrayBuffer())
|
||||
.then(bytes => WebAssembly.instantiate(bytes, imports));
|
||||
});
|
||||
} else {
|
||||
result = response
|
||||
.then(r => r.arrayBuffer())
|
||||
.then(bytes => WebAssembly.instantiate(bytes, imports));
|
||||
}
|
||||
} else {
|
||||
|
||||
result = WebAssembly.instantiate(module, imports)
|
||||
.then(result => {
|
||||
if (result instanceof WebAssembly.Instance) {
|
||||
return { instance: result, module };
|
||||
} else {
|
||||
return result;
|
||||
}
|
||||
});
|
||||
}
|
||||
return result.then(({instance, module}) => {
|
||||
wasm = instance.exports;
|
||||
init.__wbindgen_wasm_module = module;
|
||||
|
||||
return wasm;
|
||||
});
|
||||
}
|
||||
|
||||
self.wasm_bindgen = Object.assign(init, __exports);
|
||||
|
||||
})();
|
6
codecs/hqx/pkg/squooshhqx_bg.d.ts
vendored
Normal file
6
codecs/hqx/pkg/squooshhqx_bg.d.ts
vendored
Normal file
@ -0,0 +1,6 @@
|
||||
/* tslint:disable */
|
||||
export const memory: WebAssembly.Memory;
|
||||
export function resize(a: number, b: number, c: number, d: number, e: number, f: number): void;
|
||||
export function __wbindgen_global_argument_ptr(): number;
|
||||
export function __wbindgen_malloc(a: number): number;
|
||||
export function __wbindgen_free(a: number, b: number): void;
|
BIN
codecs/hqx/pkg/squooshhqx_bg.wasm
Normal file
BIN
codecs/hqx/pkg/squooshhqx_bg.wasm
Normal file
Binary file not shown.
55
codecs/hqx/src/lib.rs
Normal file
55
codecs/hqx/src/lib.rs
Normal file
@ -0,0 +1,55 @@
|
||||
extern crate cfg_if;
|
||||
extern crate hqx;
|
||||
extern crate wasm_bindgen;
|
||||
|
||||
mod utils;
|
||||
|
||||
use cfg_if::cfg_if;
|
||||
use wasm_bindgen::prelude::*;
|
||||
|
||||
cfg_if! {
|
||||
// When the `wee_alloc` feature is enabled, use `wee_alloc` as the global
|
||||
// allocator.
|
||||
if #[cfg(feature = "wee_alloc")] {
|
||||
extern crate wee_alloc;
|
||||
#[global_allocator]
|
||||
static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
|
||||
}
|
||||
}
|
||||
|
||||
#[wasm_bindgen]
|
||||
#[no_mangle]
|
||||
pub fn resize(
|
||||
input_image: Vec<u32>,
|
||||
input_width: usize,
|
||||
input_height: usize,
|
||||
factor: usize,
|
||||
) -> Vec<u32> {
|
||||
let num_output_pixels = input_width * input_height * factor * factor;
|
||||
let mut output_image = Vec::<u32>::with_capacity(num_output_pixels * 4);
|
||||
output_image.resize(num_output_pixels, 0);
|
||||
|
||||
match factor {
|
||||
2 => hqx::hq2x(
|
||||
input_image.as_slice(),
|
||||
output_image.as_mut_slice(),
|
||||
input_width,
|
||||
input_height,
|
||||
),
|
||||
3 => hqx::hq3x(
|
||||
input_image.as_slice(),
|
||||
output_image.as_mut_slice(),
|
||||
input_width,
|
||||
input_height,
|
||||
),
|
||||
4 => hqx::hq4x(
|
||||
input_image.as_slice(),
|
||||
output_image.as_mut_slice(),
|
||||
input_width,
|
||||
input_height,
|
||||
),
|
||||
_ => unreachable!(),
|
||||
};
|
||||
|
||||
return output_image;
|
||||
}
|
17
codecs/hqx/src/utils.rs
Normal file
17
codecs/hqx/src/utils.rs
Normal file
@ -0,0 +1,17 @@
|
||||
use cfg_if::cfg_if;
|
||||
|
||||
cfg_if! {
|
||||
// When the `console_error_panic_hook` feature is enabled, we can call the
|
||||
// `set_panic_hook` function at least once during initialization, and then
|
||||
// we will get better error messages if our code ever panics.
|
||||
//
|
||||
// For more details see
|
||||
// https://github.com/rustwasm/console_error_panic_hook#readme
|
||||
if #[cfg(feature = "console_error_panic_hook")] {
|
||||
extern crate console_error_panic_hook;
|
||||
pub use self::console_error_panic_hook::set_once as set_panic_hook;
|
||||
} else {
|
||||
#[inline]
|
||||
pub fn set_panic_hook() {}
|
||||
}
|
||||
}
|
@ -1,203 +0,0 @@
|
||||
const path = require('path');
|
||||
const { URL } = require('url');
|
||||
|
||||
const gzipSize = require('gzip-size');
|
||||
const fetch = require('node-fetch');
|
||||
const prettyBytes = require('pretty-bytes');
|
||||
const escapeRE = require('escape-string-regexp');
|
||||
const readdirp = require('readdirp');
|
||||
const chalk = new require('chalk').constructor({ level: 4 });
|
||||
|
||||
function fetchTravis(path, options = {}) {
|
||||
const url = new URL(path, 'https://api.travis-ci.org');
|
||||
url.search = new URLSearchParams(options);
|
||||
|
||||
return fetch(url, {
|
||||
headers: { 'Travis-API-Version': '3' },
|
||||
});
|
||||
}
|
||||
|
||||
function fetchTravisBuildInfo(user, repo, branch) {
|
||||
return fetchTravis(`/repo/${encodeURIComponent(`${user}/${repo}`)}/builds`, {
|
||||
'branch.name': branch,
|
||||
state: 'passed',
|
||||
limit: 1,
|
||||
event_type: 'push',
|
||||
}).then(r => r.json());
|
||||
}
|
||||
|
||||
function fetchTravisText(path) {
|
||||
return fetchTravis(path).then(r => r.text());
|
||||
}
|
||||
|
||||
/**
|
||||
* Recursively-read a directory and turn it into an array of { name, size, gzipSize }
|
||||
*/
|
||||
async function dirToInfoArray(startPath) {
|
||||
const results = await new Promise((resolve, reject) => {
|
||||
readdirp({ root: startPath }, (err, results) => {
|
||||
if (err) reject(err); else resolve(results);
|
||||
});
|
||||
});
|
||||
|
||||
return Promise.all(
|
||||
results.files.map(async (entry) => ({
|
||||
name: entry.path,
|
||||
gzipSize: await gzipSize.file(entry.fullPath),
|
||||
size: entry.stat.size,
|
||||
})),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Try to treat two entries with different file name hashes as the same file.
|
||||
*/
|
||||
function findHashedMatch(name, buildInfo) {
|
||||
const nameParts = /^(.+\.)[a-f0-9]+(\..+)$/.exec(name);
|
||||
if (!nameParts) return;
|
||||
|
||||
const matchRe = new RegExp(`^${escapeRE(nameParts[1])}[a-f0-9]+${escapeRE(nameParts[2])}$`);
|
||||
const matchingEntry = buildInfo.find(entry => matchRe.test(entry.name));
|
||||
return matchingEntry;
|
||||
}
|
||||
|
||||
const buildSizePrefix = '=== BUILD SIZES: ';
|
||||
const buildSizePrefixRe = new RegExp(`^${escapeRE(buildSizePrefix)}(.+)$`, 'm');
|
||||
|
||||
async function getPreviousBuildInfo() {
|
||||
const buildData = await fetchTravisBuildInfo('GoogleChromeLabs', 'squoosh', 'master');
|
||||
const jobUrl = buildData.builds[0].jobs[0]['@href'];
|
||||
const log = await fetchTravisText(jobUrl + '/log.txt');
|
||||
const reResult = buildSizePrefixRe.exec(log);
|
||||
|
||||
if (!reResult) return;
|
||||
return JSON.parse(reResult[1]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate an array that represents the difference between builds.
|
||||
* Returns an array of { beforeName, afterName, beforeSize, afterSize }.
|
||||
* Sizes are gzipped size.
|
||||
* Before/after properties are missing if resource isn't in the previous/new build.
|
||||
*/
|
||||
function getChanges(previousBuildInfo, buildInfo) {
|
||||
const buildChanges = [];
|
||||
const alsoInPreviousBuild = new Set();
|
||||
|
||||
for (const oldEntry of previousBuildInfo) {
|
||||
const newEntry = buildInfo.find(entry => entry.name === oldEntry.name) ||
|
||||
findHashedMatch(oldEntry.name, buildInfo);
|
||||
|
||||
// Entry is in previous build, but not the new build.
|
||||
if (!newEntry) {
|
||||
buildChanges.push({
|
||||
beforeName: oldEntry.name,
|
||||
beforeSize: oldEntry.gzipSize,
|
||||
});
|
||||
continue;
|
||||
}
|
||||
|
||||
// Mark this entry so we know we've dealt with it.
|
||||
alsoInPreviousBuild.add(newEntry);
|
||||
|
||||
// If they're the same, just ignore.
|
||||
// Using size rather than gzip size. I've seen different platforms produce different zipped
|
||||
// sizes.
|
||||
if (
|
||||
oldEntry.size === newEntry.size &&
|
||||
oldEntry.name === newEntry.name
|
||||
) continue;
|
||||
|
||||
// Entry is in both builds (maybe renamed).
|
||||
buildChanges.push({
|
||||
beforeName: oldEntry.name,
|
||||
afterName: newEntry.name,
|
||||
beforeSize: oldEntry.gzipSize,
|
||||
afterSize: newEntry.gzipSize,
|
||||
});
|
||||
}
|
||||
|
||||
// Look for entries that are only in the new build.
|
||||
for (const newEntry of buildInfo) {
|
||||
if (alsoInPreviousBuild.has(newEntry)) continue;
|
||||
|
||||
buildChanges.push({
|
||||
afterName: newEntry.name,
|
||||
afterSize: newEntry.gzipSize,
|
||||
});
|
||||
}
|
||||
|
||||
return buildChanges;
|
||||
}
|
||||
|
||||
async function main() {
|
||||
// Output the current build sizes for later retrieval.
|
||||
const buildInfo = await dirToInfoArray(__dirname + '/../build');
|
||||
console.log(buildSizePrefix + JSON.stringify(buildInfo));
|
||||
console.log('\nBuild change report:');
|
||||
|
||||
let previousBuildInfo;
|
||||
|
||||
try {
|
||||
previousBuildInfo = await getPreviousBuildInfo();
|
||||
} catch (err) {
|
||||
console.log(` Couldn't parse previous build info`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!previousBuildInfo) {
|
||||
console.log(` Couldn't find previous build info`);
|
||||
return;
|
||||
}
|
||||
|
||||
const buildChanges = getChanges(previousBuildInfo, buildInfo);
|
||||
|
||||
if (buildChanges.length === 0) {
|
||||
console.log(' No changes');
|
||||
return;
|
||||
}
|
||||
|
||||
// One letter references, so it's easier to get the spacing right.
|
||||
const y = chalk.yellow;
|
||||
const g = chalk.green;
|
||||
const r = chalk.red;
|
||||
|
||||
for (const change of buildChanges) {
|
||||
// New file.
|
||||
if (!change.beforeSize) {
|
||||
console.log(` ${g('ADDED')} ${change.afterName} - ${prettyBytes(change.afterSize)}`);
|
||||
continue;
|
||||
}
|
||||
|
||||
// Removed file.
|
||||
if (!change.afterSize) {
|
||||
console.log(` ${r('REMOVED')} ${change.beforeName} - was ${prettyBytes(change.beforeSize)}`);
|
||||
continue;
|
||||
}
|
||||
|
||||
// Changed file.
|
||||
let size;
|
||||
|
||||
if (change.beforeSize === change.afterSize) {
|
||||
// Just renamed.
|
||||
size = `${prettyBytes(change.afterSize)} -> no change`;
|
||||
} else {
|
||||
const color = change.afterSize > change.beforeSize ? r : g;
|
||||
const sizeDiff = prettyBytes(change.afterSize - change.beforeSize, { signed: true });
|
||||
const relativeDiff = Math.round((change.afterSize / change.beforeSize) * 1000) / 1000;
|
||||
|
||||
size = `${prettyBytes(change.beforeSize)} -> ${prettyBytes(change.afterSize)}` +
|
||||
' (' +
|
||||
color(`${sizeDiff}, ${relativeDiff}x`) +
|
||||
')';
|
||||
}
|
||||
|
||||
console.log(` ${y('CHANGED')} ${change.afterName} - ${size}`);
|
||||
|
||||
if (change.beforeName !== change.afterName) {
|
||||
console.log(` Renamed from: ${change.beforeName}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main();
|
10216
package-lock.json
generated
10216
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
61
package.json
61
package.json
@ -1,14 +1,14 @@
|
||||
{
|
||||
"private": true,
|
||||
"name": "squoosh",
|
||||
"version": "1.6.0",
|
||||
"version": "1.8.1",
|
||||
"license": "apache-2.0",
|
||||
"scripts": {
|
||||
"start": "webpack-dev-server --host 0.0.0.0 --hot",
|
||||
"build": "webpack -p",
|
||||
"lint": "tslint -c tslint.json -p tsconfig.json -t verbose",
|
||||
"lintfix": "tslint -c tslint.json -p tsconfig.json -t verbose --fix 'src/**/*.{ts,tsx,js,jsx}'",
|
||||
"sizereport": "node config/size-report.js"
|
||||
"sizereport": "sizereport --config"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
@ -16,60 +16,61 @@
|
||||
}
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "10.12.30",
|
||||
"@types/node": "10.14.9",
|
||||
"@types/pretty-bytes": "5.1.0",
|
||||
"@types/webassembly-js-api": "0.0.2",
|
||||
"@webcomponents/custom-elements": "1.2.1",
|
||||
"@webpack-cli/serve": "0.1.3",
|
||||
"@types/webassembly-js-api": "0.0.3",
|
||||
"@webcomponents/custom-elements": "1.2.4",
|
||||
"@webpack-cli/serve": "0.1.8",
|
||||
"assets-webpack-plugin": "3.9.10",
|
||||
"chokidar": "2.1.2",
|
||||
"chalk": "2.4.2",
|
||||
"chokidar": "3.0.1",
|
||||
"classnames": "2.2.6",
|
||||
"clean-webpack-plugin": "1.0.1",
|
||||
"comlink": "3.1.1",
|
||||
"copy-webpack-plugin": "5.0.1",
|
||||
"copy-webpack-plugin": "5.0.3",
|
||||
"critters-webpack-plugin": "2.3.0",
|
||||
"css-loader": "1.0.1",
|
||||
"ejs": "2.6.1",
|
||||
"escape-string-regexp": "1.0.5",
|
||||
"ejs": "2.6.2",
|
||||
"escape-string-regexp": "2.0.0",
|
||||
"exports-loader": "0.7.0",
|
||||
"file-drop-element": "0.2.0",
|
||||
"file-loader": "3.0.1",
|
||||
"gzip-size": "5.0.0",
|
||||
"file-loader": "4.0.0",
|
||||
"gzip-size": "5.1.1",
|
||||
"html-webpack-plugin": "3.2.0",
|
||||
"husky": "1.3.1",
|
||||
"idb-keyval": "3.1.0",
|
||||
"husky": "2.4.1",
|
||||
"idb-keyval": "3.2.0",
|
||||
"linkstate": "1.1.1",
|
||||
"loader-utils": "1.2.3",
|
||||
"mini-css-extract-plugin": "0.5.0",
|
||||
"mini-css-extract-plugin": "0.7.0",
|
||||
"minimatch": "3.0.4",
|
||||
"node-fetch": "2.3.0",
|
||||
"node-sass": "4.11.0",
|
||||
"node-fetch": "2.6.0",
|
||||
"node-sass": "4.12.0",
|
||||
"optimize-css-assets-webpack-plugin": "5.0.1",
|
||||
"pointer-tracker": "2.0.3",
|
||||
"preact": "8.4.2",
|
||||
"prerender-loader": "1.3.0",
|
||||
"pretty-bytes": "5.1.0",
|
||||
"pretty-bytes": "5.2.0",
|
||||
"progress-bar-webpack-plugin": "1.12.1",
|
||||
"raw-loader": "1.0.0",
|
||||
"readdirp": "2.2.1",
|
||||
"raw-loader": "3.0.0",
|
||||
"readdirp": "3.0.2",
|
||||
"sass-loader": "7.1.0",
|
||||
"script-ext-html-webpack-plugin": "2.1.3",
|
||||
"source-map-loader": "0.2.4",
|
||||
"style-loader": "0.23.1",
|
||||
"terser-webpack-plugin": "1.2.3",
|
||||
"ts-loader": "5.3.3",
|
||||
"tslint": "5.13.1",
|
||||
"terser-webpack-plugin": "1.3.0",
|
||||
"travis-size-report": "1.0.1",
|
||||
"ts-loader": "6.0.3",
|
||||
"tslint": "5.17.0",
|
||||
"tslint-config-airbnb": "5.11.1",
|
||||
"tslint-config-semistandard": "7.0.0",
|
||||
"tslint-react": "3.6.0",
|
||||
"tslint-config-semistandard": "8.0.1",
|
||||
"tslint-react": "4.0.0",
|
||||
"typed-css-modules": "0.4.2",
|
||||
"typescript": "3.3.3333",
|
||||
"url-loader": "1.1.2",
|
||||
"typescript": "3.5.2",
|
||||
"url-loader": "2.0.0",
|
||||
"webpack": "4.28.0",
|
||||
"webpack-bundle-analyzer": "3.1.0",
|
||||
"webpack-cli": "3.2.3",
|
||||
"webpack-dev-server": "3.2.1",
|
||||
"webpack-bundle-analyzer": "3.3.2",
|
||||
"webpack-cli": "3.3.4",
|
||||
"webpack-dev-server": "3.7.1",
|
||||
"worker-plugin": "3.1.0"
|
||||
}
|
||||
}
|
||||
|
14
sizereport.config.js
Normal file
14
sizereport.config.js
Normal file
@ -0,0 +1,14 @@
|
||||
const escapeRE = require("escape-string-regexp");
|
||||
|
||||
module.exports = {
|
||||
repo: "GoogleChromeLabs/squoosh",
|
||||
path: "build/**/!(*.map)",
|
||||
branch: "master",
|
||||
findRenamed(path, newPaths) {
|
||||
const nameParts = /^(.+\.)[a-f0-9]+(\..+)$/.exec(path);
|
||||
if (!nameParts) return;
|
||||
|
||||
const matchRe = new RegExp(`^${escapeRE(nameParts[1])}[a-f0-9]+${escapeRE(nameParts[2])}$`);
|
||||
return newPaths.find(newPath => matchRe.test(newPath));
|
||||
}
|
||||
};
|
3
src/codecs/hqx/processor-meta.ts
Normal file
3
src/codecs/hqx/processor-meta.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export interface HqxOptions {
|
||||
factor: 2 | 3 | 4;
|
||||
}
|
32
src/codecs/hqx/processor.ts
Normal file
32
src/codecs/hqx/processor.ts
Normal file
@ -0,0 +1,32 @@
|
||||
import wasmUrl from '../../../codecs/hqx/pkg/squooshhqx_bg.wasm';
|
||||
import '../../../codecs/hqx/pkg/squooshhqx';
|
||||
import { HqxOptions } from './processor-meta';
|
||||
|
||||
interface WasmBindgenExports {
|
||||
resize: typeof import('../../../codecs/hqx/pkg/squooshhqx').resize;
|
||||
}
|
||||
|
||||
type WasmBindgen = ((url: string) => Promise<void>) & WasmBindgenExports;
|
||||
|
||||
declare var wasm_bindgen: WasmBindgen;
|
||||
|
||||
const ready = wasm_bindgen(wasmUrl);
|
||||
|
||||
export async function hqx(
|
||||
data: ImageData,
|
||||
opts: HqxOptions,
|
||||
): Promise<ImageData> {
|
||||
const input = data;
|
||||
await ready;
|
||||
const result = wasm_bindgen.resize(
|
||||
new Uint32Array(input.data.buffer),
|
||||
input.width,
|
||||
input.height,
|
||||
opts.factor,
|
||||
);
|
||||
return new ImageData(
|
||||
new Uint8ClampedArray(result.buffer),
|
||||
data.width * opts.factor,
|
||||
data.height * opts.factor,
|
||||
);
|
||||
}
|
@ -1,4 +1,6 @@
|
||||
import { expose } from 'comlink';
|
||||
import { isHqx } from '../resize/processor-meta';
|
||||
import { clamp } from '../util';
|
||||
|
||||
async function mozjpegEncode(
|
||||
data: ImageData, options: import('../mozjpeg/encoder-meta').EncodeOptions,
|
||||
@ -31,6 +33,18 @@ async function rotate(
|
||||
async function resize(
|
||||
data: ImageData, opts: import('../resize/processor-meta').WorkerResizeOptions,
|
||||
): Promise<ImageData> {
|
||||
if (isHqx(opts)) {
|
||||
const { hqx } = await import(
|
||||
/* webpackChunkName: "process-hqx" */
|
||||
'../hqx/processor');
|
||||
|
||||
const widthRatio = opts.width / data.width;
|
||||
const heightRatio = opts.height / data.height;
|
||||
const ratio = Math.max(widthRatio, heightRatio);
|
||||
if (ratio <= 1) return data;
|
||||
const factor = clamp(Math.ceil(ratio), { min: 2, max: 4 }) as 2|3|4;
|
||||
return hqx(data, { factor });
|
||||
}
|
||||
const { resize } = await import(
|
||||
/* webpackChunkName: "process-resize" */
|
||||
'../resize/processor');
|
||||
@ -63,7 +77,15 @@ async function webpDecode(data: ArrayBuffer): Promise<ImageData> {
|
||||
return decode(data);
|
||||
}
|
||||
|
||||
const exports = { mozjpegEncode, quantize, rotate, resize, optiPngEncode, webpEncode, webpDecode };
|
||||
const exports = {
|
||||
mozjpegEncode,
|
||||
quantize,
|
||||
rotate,
|
||||
resize,
|
||||
optiPngEncode,
|
||||
webpEncode,
|
||||
webpDecode,
|
||||
};
|
||||
export type ProcessorWorkerApi = typeof exports;
|
||||
|
||||
expose(exports, self);
|
||||
|
@ -16,6 +16,7 @@ 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';
|
||||
import { bind } from '../lib/initial-util';
|
||||
|
||||
type ProcessorWorkerApi = import('./processor-worker').ProcessorWorkerApi;
|
||||
|
||||
@ -94,14 +95,7 @@ export default class Processor {
|
||||
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,
|
||||
);
|
||||
this._workerTimeoutId = self.setTimeout(this.terminateWorker, workerTimeout);
|
||||
}
|
||||
|
||||
/** Abort the current job, if any */
|
||||
@ -111,7 +105,11 @@ export default class Processor {
|
||||
this._abortRejector(new DOMException('Aborted', 'AbortError'));
|
||||
this._abortRejector = undefined;
|
||||
this._busy = false;
|
||||
this.terminateWorker();
|
||||
}
|
||||
|
||||
@bind
|
||||
terminateWorker() {
|
||||
if (!this._worker) return;
|
||||
this._worker.terminate();
|
||||
this._worker = undefined;
|
||||
|
@ -12,8 +12,9 @@ import Select from '../../components/select';
|
||||
|
||||
interface Props {
|
||||
isVector: Boolean;
|
||||
inputWidth: number;
|
||||
inputHeight: number;
|
||||
options: ResizeOptions;
|
||||
aspect: number;
|
||||
onChange(newOptions: ResizeOptions): void;
|
||||
}
|
||||
|
||||
@ -21,12 +22,21 @@ interface State {
|
||||
maintainAspect: boolean;
|
||||
}
|
||||
|
||||
const sizePresets = [0.25, 0.3333, 0.5, 1, 2, 3, 4];
|
||||
|
||||
export default class ResizerOptions extends Component<Props, State> {
|
||||
state: State = {
|
||||
maintainAspect: true,
|
||||
};
|
||||
|
||||
form?: HTMLFormElement;
|
||||
private form?: HTMLFormElement;
|
||||
private presetWidths: { [idx: number]: number } = {};
|
||||
private presetHeights: { [idx: number]: number } = {};
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.generatePresetValues(props.inputWidth, props.inputHeight);
|
||||
}
|
||||
|
||||
private reportOptions() {
|
||||
const form = this.form!;
|
||||
@ -53,18 +63,31 @@ export default class ResizerOptions extends Component<Props, State> {
|
||||
this.reportOptions();
|
||||
}
|
||||
|
||||
private getAspect() {
|
||||
return this.props.inputWidth / this.props.inputHeight;
|
||||
}
|
||||
|
||||
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.form!.height.value = Math.round(Number(this.form!.width.value) / this.getAspect());
|
||||
this.reportOptions();
|
||||
}
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps: Props) {
|
||||
if (
|
||||
this.props.inputWidth !== nextProps.inputWidth ||
|
||||
this.props.inputHeight !== nextProps.inputHeight
|
||||
) {
|
||||
this.generatePresetValues(nextProps.inputWidth, nextProps.inputHeight);
|
||||
}
|
||||
}
|
||||
|
||||
@bind
|
||||
private onWidthInput() {
|
||||
if (this.state.maintainAspect) {
|
||||
const width = inputFieldValueAsNumber(this.form!.width);
|
||||
this.form!.height.value = Math.round(width / this.props.aspect);
|
||||
this.form!.height.value = Math.round(width / this.getAspect());
|
||||
}
|
||||
|
||||
this.reportOptions();
|
||||
@ -74,12 +97,44 @@ export default class ResizerOptions extends Component<Props, State> {
|
||||
private onHeightInput() {
|
||||
if (this.state.maintainAspect) {
|
||||
const height = inputFieldValueAsNumber(this.form!.height);
|
||||
this.form!.width.value = Math.round(height * this.props.aspect);
|
||||
this.form!.width.value = Math.round(height * this.getAspect());
|
||||
}
|
||||
|
||||
this.reportOptions();
|
||||
}
|
||||
|
||||
private generatePresetValues(width: number, height: number) {
|
||||
for (const preset of sizePresets) {
|
||||
this.presetWidths[preset] = Math.round(width * preset);
|
||||
this.presetHeights[preset] = Math.round(height * preset);
|
||||
}
|
||||
}
|
||||
|
||||
private getPreset(): number | string {
|
||||
const { width, height } = this.props.options;
|
||||
|
||||
for (const preset of sizePresets) {
|
||||
if (
|
||||
width === this.presetWidths[preset] &&
|
||||
height === this.presetHeights[preset]
|
||||
) return preset;
|
||||
}
|
||||
|
||||
return 'custom';
|
||||
}
|
||||
|
||||
@bind
|
||||
private onPresetChange(event: Event) {
|
||||
const select = event.target as HTMLSelectElement;
|
||||
if (select.value === 'custom') return;
|
||||
const multiplier = Number(select.value);
|
||||
(this.form!.width as HTMLInputElement).value =
|
||||
Math.round(this.props.inputWidth * multiplier) + '';
|
||||
(this.form!.height as HTMLInputElement).value =
|
||||
Math.round(this.props.inputHeight * multiplier) + '';
|
||||
this.reportOptions();
|
||||
}
|
||||
|
||||
render({ options, isVector }: Props, { maintainAspect }: State) {
|
||||
return (
|
||||
<form ref={linkRef(this, 'form')} class={style.optionsSection} onSubmit={preventDefault}>
|
||||
@ -95,12 +150,22 @@ export default class ResizerOptions extends Component<Props, State> {
|
||||
<option value="mitchell">Mitchell</option>
|
||||
<option value="catrom">Catmull-Rom</option>
|
||||
<option value="triangle">Triangle (bilinear)</option>
|
||||
<option value="hqx">hqx (pixel art)</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}>
|
||||
Preset:
|
||||
<Select value={this.getPreset()} onChange={this.onPresetChange}>
|
||||
{sizePresets.map(preset =>
|
||||
<option value={preset}>{preset * 100}%</option>,
|
||||
)}
|
||||
<option value="custom">Custom</option>
|
||||
</Select>
|
||||
</label>
|
||||
<label class={style.optionTextFirst}>
|
||||
Width:
|
||||
<input
|
||||
|
@ -1,8 +1,26 @@
|
||||
type BrowserResizeMethods = 'browser-pixelated' | 'browser-low' | 'browser-medium' | 'browser-high';
|
||||
type WorkerResizeMethods = 'triangle' | 'catrom' | 'mitchell' | 'lanczos3';
|
||||
const workerResizeMethods: WorkerResizeMethods[] = ['triangle', 'catrom', 'mitchell', 'lanczos3'];
|
||||
type BrowserResizeMethods =
|
||||
| 'browser-pixelated'
|
||||
| 'browser-low'
|
||||
| 'browser-medium'
|
||||
| 'browser-high';
|
||||
type WorkerResizeMethods =
|
||||
| 'triangle'
|
||||
| 'catrom'
|
||||
| 'mitchell'
|
||||
| 'lanczos3'
|
||||
| 'hqx';
|
||||
const workerResizeMethods: WorkerResizeMethods[] = [
|
||||
'triangle',
|
||||
'catrom',
|
||||
'mitchell',
|
||||
'lanczos3',
|
||||
'hqx',
|
||||
];
|
||||
|
||||
export type ResizeOptions = BrowserResizeOptions | WorkerResizeOptions | VectorResizeOptions;
|
||||
export type ResizeOptions =
|
||||
| BrowserResizeOptions
|
||||
| WorkerResizeOptions
|
||||
| VectorResizeOptions;
|
||||
|
||||
export interface ResizeOptionsCommon {
|
||||
width: number;
|
||||
@ -29,10 +47,21 @@ export interface VectorResizeOptions extends ResizeOptionsCommon {
|
||||
*
|
||||
* @param opts
|
||||
*/
|
||||
export function isWorkerOptions(opts: ResizeOptions): opts is WorkerResizeOptions {
|
||||
export function isWorkerOptions(
|
||||
opts: ResizeOptions,
|
||||
): opts is WorkerResizeOptions {
|
||||
return (workerResizeMethods as string[]).includes(opts.method);
|
||||
}
|
||||
|
||||
/**
|
||||
* Return whether a set of options are from the HQ<n>X set
|
||||
*
|
||||
* @param opts
|
||||
*/
|
||||
export function isHqx(opts: ResizeOptions): opts is WorkerResizeOptions {
|
||||
return opts.method === 'hqx';
|
||||
}
|
||||
|
||||
export const defaultOptions: ResizeOptions = {
|
||||
// Width and height will always default to the image size.
|
||||
// This is set elsewhere.
|
||||
|
@ -25,3 +25,12 @@ export function initEmscriptenModule<T extends EmscriptenWasm.Module>(
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
interface ClampOpts {
|
||||
min?: number;
|
||||
max?: number;
|
||||
}
|
||||
|
||||
export function clamp(x: number, opts: ClampOpts): number {
|
||||
return Math.min(Math.max(x, opts.min || Number.MIN_VALUE), opts.max || Number.MAX_VALUE);
|
||||
}
|
||||
|
@ -14,9 +14,10 @@ const ROUTE_EDITOR = '/editor';
|
||||
const compressPromise = import(
|
||||
/* webpackChunkName: "main-app" */
|
||||
'../compress');
|
||||
const offlinerPromise = import(
|
||||
/* webpackChunkName: "offliner" */
|
||||
'../../lib/offliner');
|
||||
|
||||
const swBridgePromise = import(
|
||||
/* webpackChunkName: "sw-bridge" */
|
||||
'../../lib/sw-bridge');
|
||||
|
||||
function back() {
|
||||
window.history.back();
|
||||
@ -25,6 +26,7 @@ function back() {
|
||||
interface Props {}
|
||||
|
||||
interface State {
|
||||
awaitingShareTarget: boolean;
|
||||
file?: File | Fileish;
|
||||
isEditorOpen: Boolean;
|
||||
Compress?: typeof import('../compress').default;
|
||||
@ -32,6 +34,7 @@ interface State {
|
||||
|
||||
export default class App extends Component<Props, State> {
|
||||
state: State = {
|
||||
awaitingShareTarget: new URL(location.href).searchParams.has('share-target'),
|
||||
isEditorOpen: false,
|
||||
file: undefined,
|
||||
Compress: undefined,
|
||||
@ -48,7 +51,15 @@ export default class App extends Component<Props, State> {
|
||||
this.showSnack('Failed to load app');
|
||||
});
|
||||
|
||||
offlinerPromise.then(({ offliner }) => offliner(this.showSnack));
|
||||
swBridgePromise.then(async ({ offliner, getSharedImage }) => {
|
||||
offliner(this.showSnack);
|
||||
if (!this.state.awaitingShareTarget) return;
|
||||
const file = await getSharedImage();
|
||||
// Remove the ?share-target from the URL
|
||||
history.replaceState('', '', '/');
|
||||
this.openEditor();
|
||||
this.setState({ file, awaitingShareTarget: false });
|
||||
});
|
||||
|
||||
// In development, persist application state across hot reloads:
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
@ -99,19 +110,25 @@ export default class App extends Component<Props, State> {
|
||||
@bind
|
||||
private openEditor() {
|
||||
if (this.state.isEditorOpen) return;
|
||||
history.pushState(null, '', ROUTE_EDITOR);
|
||||
// Change path, but preserve query string.
|
||||
const editorURL = new URL(location.href);
|
||||
editorURL.pathname = ROUTE_EDITOR;
|
||||
history.pushState(null, '', editorURL.href);
|
||||
this.setState({ isEditorOpen: true });
|
||||
}
|
||||
|
||||
render({}: Props, { file, isEditorOpen, Compress }: State) {
|
||||
render({}: Props, { file, isEditorOpen, Compress, awaitingShareTarget }: State) {
|
||||
const showSpinner = awaitingShareTarget || (isEditorOpen && !Compress);
|
||||
|
||||
return (
|
||||
<div id="app" class={style.app}>
|
||||
<file-drop accept="image/*" onfiledrop={this.onFileDrop} class={style.drop}>
|
||||
{!isEditorOpen
|
||||
? <Intro onFile={this.onIntroPickFile} showSnack={this.showSnack} />
|
||||
: (Compress)
|
||||
? <Compress file={file!} showSnack={this.showSnack} onBack={back} />
|
||||
: <loading-spinner class={style.appLoader}/>
|
||||
{
|
||||
showSpinner
|
||||
? <loading-spinner class={style.appLoader}/>
|
||||
: isEditorOpen
|
||||
? Compress && <Compress file={file!} showSnack={this.showSnack} onBack={back} />
|
||||
: <Intro onFile={this.onIntroPickFile} showSnack={this.showSnack} />
|
||||
}
|
||||
<snack-bar ref={linkRef(this, 'snackbar')} />
|
||||
</file-drop>
|
||||
|
@ -146,12 +146,14 @@ export default class Options extends Component<Props, State> {
|
||||
{preprocessorState.resize.enabled ?
|
||||
<ResizeOptionsComponent
|
||||
isVector={Boolean(source && source.vectorImage)}
|
||||
aspect={source ? source.processed.width / source.processed.height : 1}
|
||||
inputWidth={source ? source.processed.width : 1}
|
||||
inputHeight={source ? source.processed.height : 1}
|
||||
options={preprocessorState.resize}
|
||||
onChange={this.onResizeOptionsChange}
|
||||
/>
|
||||
: null}
|
||||
</Expander>
|
||||
|
||||
<label class={style.sectionEnabler}>
|
||||
<Checkbox
|
||||
name="quantizer.enable"
|
||||
@ -178,6 +180,7 @@ export default class Options extends Component<Props, State> {
|
||||
{encoderSupportMap ?
|
||||
<Select value={encoderState.type} onChange={this.onEncoderTypeChange} large>
|
||||
{encoders.filter(encoder => encoderSupportMap[encoder.type]).map(encoder => (
|
||||
// tslint:disable-next-line:jsx-key
|
||||
<option value={encoder.type}>{encoder.label}</option>
|
||||
))}
|
||||
</Select>
|
||||
|
@ -24,7 +24,7 @@ import { decodeImage } from '../../codecs/decoders';
|
||||
import { cleanMerge, cleanSet } from '../../lib/clean-modify';
|
||||
import Processor from '../../codecs/processor';
|
||||
import {
|
||||
BrowserResizeOptions, isWorkerOptions as isWorkerResizeOptions,
|
||||
BrowserResizeOptions, isWorkerOptions as isWorkerResizeOptions, isHqx, WorkerResizeOptions,
|
||||
} from '../../codecs/resize/processor-meta';
|
||||
import './custom-els/MultiPanel';
|
||||
import Results from '../results';
|
||||
@ -106,6 +106,18 @@ async function preprocessImage(
|
||||
source.vectorImage,
|
||||
preprocessData.resize,
|
||||
);
|
||||
} else if (isHqx(preprocessData.resize)) {
|
||||
// Hqx can only do x2, x3 or x4.
|
||||
result = await processor.workerResize(result, preprocessData.resize);
|
||||
// Seems like the globals from Rust from hqx and resize are conflicting.
|
||||
// For now we can fix that by terminating the worker.
|
||||
// TODO: Use wasm-bindgen’s new --web target to create a proper ES6 module
|
||||
// and remove this.
|
||||
processor.terminateWorker();
|
||||
// If the target size is not a clean x2, x3 or x4, use Catmull-Rom
|
||||
// for the remaining scaling.
|
||||
const pixelOpts = { ...preprocessData.resize, method: 'catrom' };
|
||||
result = await processor.workerResize(result, pixelOpts as WorkerResizeOptions);
|
||||
} else if (isWorkerResizeOptions(preprocessData.resize)) {
|
||||
result = await processor.workerResize(result, preprocessData.resize);
|
||||
} else {
|
||||
@ -244,7 +256,7 @@ export default class Compress extends Component<Props, State> {
|
||||
this.widthQuery.addListener(this.onMobileWidthChange);
|
||||
this.updateFile(props.file);
|
||||
|
||||
import('../../lib/offliner').then(({ mainAppLoaded }) => mainAppLoaded());
|
||||
import('../../lib/sw-bridge').then(({ mainAppLoaded }) => mainAppLoaded());
|
||||
}
|
||||
|
||||
@bind
|
||||
@ -567,6 +579,7 @@ export default class Compress extends Component<Props, State> {
|
||||
const [leftImageData, rightImageData] = sides.map(i => i.data);
|
||||
|
||||
const options = sides.map((side, index) => (
|
||||
// tslint:disable-next-line:jsx-key
|
||||
<Options
|
||||
source={source}
|
||||
mobileView={mobileView}
|
||||
@ -582,6 +595,7 @@ export default class Compress extends Component<Props, State> {
|
||||
(mobileView ? ['down', 'up'] : ['right', 'left']) as CopyAcrossIconProps['copyDirection'][];
|
||||
|
||||
const results = sides.map((side, index) => (
|
||||
// tslint:disable-next-line:jsx-key
|
||||
<Results
|
||||
downloadUrl={side.downloadUrl}
|
||||
imageFile={side.file}
|
||||
|
File diff suppressed because one or more lines are too long
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
@ -53,11 +53,17 @@ export default class Intro extends Component<Props, State> {
|
||||
state: State = {};
|
||||
private fileInput?: HTMLInputElement;
|
||||
|
||||
@bind
|
||||
private resetFileInput() {
|
||||
this.fileInput!.value = '';
|
||||
}
|
||||
|
||||
@bind
|
||||
private onFileChange(event: Event): void {
|
||||
const fileInput = event.target as HTMLInputElement;
|
||||
const file = fileInput.files && fileInput.files[0];
|
||||
if (!file) return;
|
||||
this.resetFileInput();
|
||||
this.props.onFile(file);
|
||||
}
|
||||
|
||||
|
@ -40,6 +40,23 @@ async function updateReady(reg: ServiceWorkerRegistration): Promise<void> {
|
||||
});
|
||||
}
|
||||
|
||||
/** Wait for a shared image */
|
||||
export function getSharedImage(): Promise<File> {
|
||||
return new Promise((resolve) => {
|
||||
const onmessage = (event: MessageEvent) => {
|
||||
if (event.data.action !== 'load-image') return;
|
||||
resolve(event.data.file);
|
||||
navigator.serviceWorker.removeEventListener('message', onmessage);
|
||||
};
|
||||
|
||||
navigator.serviceWorker.addEventListener('message', onmessage);
|
||||
|
||||
// This message is picked up by the service worker - it's how it knows we're ready to receive
|
||||
// the file.
|
||||
navigator.serviceWorker.controller!.postMessage('share-ready');
|
||||
});
|
||||
}
|
||||
|
||||
/** Set up the service worker and monitor changes */
|
||||
export async function offliner(showSnack: SnackBarElement['showSnackbar']) {
|
||||
// This needs to be a typeof because Webpack.
|
@ -12,5 +12,18 @@
|
||||
"type": "image/png",
|
||||
"sizes": "1024x1024"
|
||||
}
|
||||
]
|
||||
],
|
||||
"share_target": {
|
||||
"action": "/?share-target",
|
||||
"method": "POST",
|
||||
"enctype": "multipart/form-data",
|
||||
"params": {
|
||||
"files": [
|
||||
{
|
||||
"name": "file",
|
||||
"accept": ["image/*"]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,5 +1,6 @@
|
||||
import {
|
||||
cacheOrNetworkAndCache, cleanupCache, cacheOrNetwork, cacheBasics, cacheAdditionalProcessors,
|
||||
serveShareTarget,
|
||||
} from './util';
|
||||
import { get } from 'idb-keyval';
|
||||
|
||||
@ -40,14 +41,23 @@ self.addEventListener('activate', (event) => {
|
||||
});
|
||||
|
||||
self.addEventListener('fetch', (event) => {
|
||||
// We only care about GET.
|
||||
if (event.request.method !== 'GET') return;
|
||||
|
||||
const url = new URL(event.request.url);
|
||||
|
||||
// Don't care about other-origin URLs
|
||||
if (url.origin !== location.origin) return;
|
||||
|
||||
if (
|
||||
url.pathname === '/' &&
|
||||
url.searchParams.has('share-target') &&
|
||||
event.request.method === 'POST'
|
||||
) {
|
||||
serveShareTarget(event);
|
||||
return;
|
||||
}
|
||||
|
||||
// We only care about GET from here on in.
|
||||
if (event.request.method !== 'GET') return;
|
||||
|
||||
if (url.pathname.startsWith('/demo-') || url.pathname.startsWith('/wc-polyfill')) {
|
||||
cacheOrNetworkAndCache(event, dynamicCache);
|
||||
cleanupCache(event, dynamicCache, BUILD_ASSETS);
|
||||
|
@ -1,8 +1,11 @@
|
||||
import webpDataUrl from 'url-loader!../codecs/tiny.webp';
|
||||
|
||||
// Give TypeScript the correct global.
|
||||
declare var self: ServiceWorkerGlobalScope;
|
||||
|
||||
export function cacheOrNetwork(event: FetchEvent): void {
|
||||
event.respondWith(async function () {
|
||||
const cachedResponse = await caches.match(event.request);
|
||||
const cachedResponse = await caches.match(event.request, { ignoreSearch: true });
|
||||
return cachedResponse || fetch(event.request);
|
||||
}());
|
||||
}
|
||||
@ -29,6 +32,23 @@ export function cacheOrNetworkAndCache(event: FetchEvent, cacheName: string): vo
|
||||
}());
|
||||
}
|
||||
|
||||
export function serveShareTarget(event: FetchEvent): void {
|
||||
const dataPromise = event.request.formData();
|
||||
|
||||
// Redirect so the user can refresh the page without resending data.
|
||||
// @ts-ignore It doesn't like me giving a response to respondWith, although it's allowed.
|
||||
event.respondWith(Response.redirect('/?share-target'));
|
||||
|
||||
event.waitUntil(async function () {
|
||||
// The page sends this message to tell the service worker it's ready to receive the file.
|
||||
await nextMessage('share-ready');
|
||||
const client = await self.clients.get(event.resultingClientId);
|
||||
const data = await dataPromise;
|
||||
const file = data.get('file');
|
||||
client.postMessage({ file, action: 'load-image' });
|
||||
}());
|
||||
}
|
||||
|
||||
export function cleanupCache(event: FetchEvent, cacheName: string, keepAssets: string[]) {
|
||||
event.waitUntil(async function () {
|
||||
const cache = await caches.open(cacheName);
|
||||
@ -104,3 +124,26 @@ export async function cacheAdditionalProcessors(cacheName: string, buildAssets:
|
||||
const cache = await caches.open(cacheName);
|
||||
await cache.addAll(toCache);
|
||||
}
|
||||
|
||||
const nextMessageResolveMap = new Map<string, (() => void)[]>();
|
||||
|
||||
/**
|
||||
* Wait on a message with a particular event.data value.
|
||||
*
|
||||
* @param dataVal The event.data value.
|
||||
*/
|
||||
function nextMessage(dataVal: string): Promise<void> {
|
||||
return new Promise((resolve) => {
|
||||
if (!nextMessageResolveMap.has(dataVal)) {
|
||||
nextMessageResolveMap.set(dataVal, []);
|
||||
}
|
||||
nextMessageResolveMap.get(dataVal)!.push(resolve);
|
||||
});
|
||||
}
|
||||
|
||||
self.addEventListener('message', (event) => {
|
||||
const resolvers = nextMessageResolveMap.get(event.data);
|
||||
if (!resolvers) return;
|
||||
nextMessageResolveMap.delete(event.data);
|
||||
for (const resolve of resolvers) resolve();
|
||||
});
|
||||
|
@ -12,7 +12,8 @@
|
||||
"variable-name": [true, "check-format", "allow-leading-underscore"],
|
||||
"no-duplicate-imports": false,
|
||||
"prefer-template": [true, "allow-single-concat"],
|
||||
"import-name": false
|
||||
"import-name": false,
|
||||
"jsx-key": false
|
||||
},
|
||||
"linterOptions": {
|
||||
"exclude": [
|
||||
|
Reference in New Issue
Block a user