mirror of
https://github.com/GoogleChromeLabs/squoosh.git
synced 2025-11-12 16:57:26 +00:00
Compare commits
4 Commits
api
...
oxipng-old
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
b6f69c57cf | ||
|
|
9e19c36b42 | ||
|
|
cf45520be3 | ||
|
|
8faf8a5b48 |
@@ -1,4 +1,7 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- node
|
||||
- 10
|
||||
- 8
|
||||
cache: npm
|
||||
script: npm run build
|
||||
after_success: npm run sizereport
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
# Long-term cache by default.
|
||||
/*
|
||||
Cache-Control: max-age=31536000
|
||||
Access-Control-Allow-Origin: *
|
||||
|
||||
# And here are the exceptions:
|
||||
/
|
||||
@@ -10,9 +9,6 @@
|
||||
/serviceworker.js
|
||||
Cache-Control: no-cache
|
||||
|
||||
/sdk.mjs
|
||||
Cache-Control: no-cache
|
||||
|
||||
/manifest.json
|
||||
Cache-Control: must-revalidate, max-age=3600
|
||||
|
||||
|
||||
0
codecs/oxipng/.cargo-ok
Normal file
0
codecs/oxipng/.cargo-ok
Normal file
5
codecs/oxipng/.gitignore
vendored
Normal file
5
codecs/oxipng/.gitignore
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
/target
|
||||
**/*.rs.bk
|
||||
Cargo.lock
|
||||
bin/
|
||||
wasm-pack.log
|
||||
@@ -1,19 +1,19 @@
|
||||
[package]
|
||||
name = "squooshresize"
|
||||
name = "test"
|
||||
version = "0.1.0"
|
||||
authors = ["Surma <surma@surma.link>"]
|
||||
|
||||
[lib]
|
||||
#crate-type = ["cdylib", "rlib"]
|
||||
crate-type = ["cdylib"]
|
||||
path = "lib.rs"
|
||||
crate-type = ["cdylib", "rlib"]
|
||||
|
||||
[features]
|
||||
default = ["console_error_panic_hook", "wee_alloc"]
|
||||
default = ["console_error_panic_hook"]
|
||||
|
||||
[dependencies]
|
||||
cfg-if = "0.1.2"
|
||||
wasm-bindgen = "0.2.38"
|
||||
resize = "0.3.0"
|
||||
wasm-bindgen = "0.2"
|
||||
oxipng = "2.2.0"
|
||||
|
||||
# The `console_error_panic_hook` crate provides better debugging of panics by
|
||||
# logging them with `console.error`. This is great for development, but requires
|
||||
@@ -34,4 +34,3 @@ wasm-bindgen-test = "0.2"
|
||||
[profile.release]
|
||||
# Tell `rustc` to optimize for small code size.
|
||||
opt-level = "s"
|
||||
lto = true
|
||||
52
codecs/oxipng/README.md
Normal file
52
codecs/oxipng/README.md
Normal file
@@ -0,0 +1,52 @@
|
||||
# 🦀🕸️ `wasm-pack-template`
|
||||
|
||||
A template for kick starting a Rust and WebAssembly project using
|
||||
[`wasm-pack`](https://github.com/rustwasm/wasm-pack).
|
||||
|
||||
This template is designed for compiling Rust libraries into WebAssembly and
|
||||
publishing the resulting package to NPM.
|
||||
|
||||
* Want to use the published NPM package in a Website? [Check out
|
||||
`create-wasm-app`.](https://github.com/rustwasm/create-wasm-app)
|
||||
* Want to make a monorepo-style Website without publishing to NPM? Check out
|
||||
[`rust-webpack-template`](https://github.com/rustwasm/rust-webpack-template)
|
||||
and/or
|
||||
[`rust-parcel-template`](https://github.com/rustwasm/rust-parcel-template).
|
||||
|
||||
## 🔋 Batteries Included
|
||||
|
||||
* [`wasm-bindgen`](https://github.com/rustwasm/wasm-bindgen) for communicating
|
||||
between WebAssembly and JavaScript.
|
||||
* [`console_error_panic_hook`](https://github.com/rustwasm/console_error_panic_hook)
|
||||
for logging panic messages to the developer console.
|
||||
* [`wee_alloc`](https://github.com/rustwasm/wee_alloc), an allocator optimized
|
||||
for small code size.
|
||||
|
||||
## 🚴 Usage
|
||||
|
||||
### 🐑 Use `cargo generate` to Clone this Template
|
||||
|
||||
[Learn more about `cargo generate` here.](https://github.com/ashleygwilliams/cargo-generate)
|
||||
|
||||
```
|
||||
cargo generate --git https://github.com/rustwasm/wasm-pack-template.git --name my-project
|
||||
cd my-project
|
||||
```
|
||||
|
||||
### 🛠️ Build with `wasm-pack build`
|
||||
|
||||
```
|
||||
wasm-pack build
|
||||
```
|
||||
|
||||
### 🔬 Test in Headless Browsers with `wasm-pack test`
|
||||
|
||||
```
|
||||
wasm-pack test --headless --firefox
|
||||
```
|
||||
|
||||
### 🎁 Publish to NPM with `wasm-pack publish`
|
||||
|
||||
```
|
||||
wasm-pack publish
|
||||
```
|
||||
5
codecs/oxipng/Xargo.toml
Normal file
5
codecs/oxipng/Xargo.toml
Normal file
@@ -0,0 +1,5 @@
|
||||
[target.wasm32-unknown-unknown.dependencies]
|
||||
time = {}
|
||||
|
||||
[target.wasm32-unknown-unknown.dependencies.std]
|
||||
features = ["wasm_syscall"]
|
||||
52
codecs/oxipng/pkg/README.md
Normal file
52
codecs/oxipng/pkg/README.md
Normal file
@@ -0,0 +1,52 @@
|
||||
# 🦀🕸️ `wasm-pack-template`
|
||||
|
||||
A template for kick starting a Rust and WebAssembly project using
|
||||
[`wasm-pack`](https://github.com/rustwasm/wasm-pack).
|
||||
|
||||
This template is designed for compiling Rust libraries into WebAssembly and
|
||||
publishing the resulting package to NPM.
|
||||
|
||||
* Want to use the published NPM package in a Website? [Check out
|
||||
`create-wasm-app`.](https://github.com/rustwasm/create-wasm-app)
|
||||
* Want to make a monorepo-style Website without publishing to NPM? Check out
|
||||
[`rust-webpack-template`](https://github.com/rustwasm/rust-webpack-template)
|
||||
and/or
|
||||
[`rust-parcel-template`](https://github.com/rustwasm/rust-parcel-template).
|
||||
|
||||
## 🔋 Batteries Included
|
||||
|
||||
* [`wasm-bindgen`](https://github.com/rustwasm/wasm-bindgen) for communicating
|
||||
between WebAssembly and JavaScript.
|
||||
* [`console_error_panic_hook`](https://github.com/rustwasm/console_error_panic_hook)
|
||||
for logging panic messages to the developer console.
|
||||
* [`wee_alloc`](https://github.com/rustwasm/wee_alloc), an allocator optimized
|
||||
for small code size.
|
||||
|
||||
## 🚴 Usage
|
||||
|
||||
### 🐑 Use `cargo generate` to Clone this Template
|
||||
|
||||
[Learn more about `cargo generate` here.](https://github.com/ashleygwilliams/cargo-generate)
|
||||
|
||||
```
|
||||
cargo generate --git https://github.com/rustwasm/wasm-pack-template.git --name my-project
|
||||
cd my-project
|
||||
```
|
||||
|
||||
### 🛠️ Build with `wasm-pack build`
|
||||
|
||||
```
|
||||
wasm-pack build
|
||||
```
|
||||
|
||||
### 🔬 Test in Headless Browsers with `wasm-pack test`
|
||||
|
||||
```
|
||||
wasm-pack test --headless --firefox
|
||||
```
|
||||
|
||||
### 🎁 Publish to NPM with `wasm-pack publish`
|
||||
|
||||
```
|
||||
wasm-pack publish
|
||||
```
|
||||
BIN
codecs/oxipng/pkg/img.png
Normal file
BIN
codecs/oxipng/pkg/img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
14
codecs/oxipng/pkg/lol.js
Normal file
14
codecs/oxipng/pkg/lol.js
Normal file
@@ -0,0 +1,14 @@
|
||||
const oxipng = require("./oxipng_wasm");
|
||||
const repl = require("repl");
|
||||
const fs = require("fs");
|
||||
|
||||
async function init() {
|
||||
// const img = fs.readFileSync("img.png")
|
||||
// const output = oxipng.compress(img, 0);
|
||||
// fs.writeFileSync("output.png", output);
|
||||
console.log(">>>", oxipng.doit());
|
||||
const r = repl.start("node> ");
|
||||
r.context.i = oxipng;
|
||||
}
|
||||
|
||||
init();
|
||||
3
codecs/oxipng/pkg/oxipng.d.ts
vendored
Normal file
3
codecs/oxipng/pkg/oxipng.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
/* tslint:disable */
|
||||
export function compress(arg0: Uint8Array, arg1: number): Uint8Array;
|
||||
|
||||
73
codecs/oxipng/pkg/oxipng.js
Normal file
73
codecs/oxipng/pkg/oxipng.js
Normal file
@@ -0,0 +1,73 @@
|
||||
/* tslint:disable */
|
||||
var wasm;
|
||||
|
||||
const TextDecoder = require('util').TextDecoder;
|
||||
|
||||
let cachedTextDecoder = new TextDecoder('utf-8');
|
||||
|
||||
let cachegetUint8Memory = null;
|
||||
function getUint8Memory() {
|
||||
if (cachegetUint8Memory === null || cachegetUint8Memory.buffer !== wasm.memory.buffer) {
|
||||
cachegetUint8Memory = new Uint8Array(wasm.memory.buffer);
|
||||
}
|
||||
return cachegetUint8Memory;
|
||||
}
|
||||
|
||||
function getStringFromWasm(ptr, len) {
|
||||
return cachedTextDecoder.decode(getUint8Memory().subarray(ptr, ptr + len));
|
||||
}
|
||||
|
||||
module.exports.__wbg_log_64e6f53d8e6d5db5 = function(arg0, arg1) {
|
||||
let varg0 = getStringFromWasm(arg0, arg1);
|
||||
console.log(varg0);
|
||||
};
|
||||
|
||||
let WASM_VECTOR_LEN = 0;
|
||||
|
||||
function passArray8ToWasm(arg) {
|
||||
const ptr = wasm.__wbindgen_malloc(arg.length * 1);
|
||||
getUint8Memory().set(arg, ptr / 1);
|
||||
WASM_VECTOR_LEN = arg.length;
|
||||
return ptr;
|
||||
}
|
||||
|
||||
function getArrayU8FromWasm(ptr, len) {
|
||||
return getUint8Memory().subarray(ptr / 1, ptr / 1 + len);
|
||||
}
|
||||
|
||||
let cachedGlobalArgumentPtr = null;
|
||||
function globalArgumentPtr() {
|
||||
if (cachedGlobalArgumentPtr === null) {
|
||||
cachedGlobalArgumentPtr = wasm.__wbindgen_global_argument_ptr();
|
||||
}
|
||||
return cachedGlobalArgumentPtr;
|
||||
}
|
||||
|
||||
let cachegetUint32Memory = null;
|
||||
function getUint32Memory() {
|
||||
if (cachegetUint32Memory === null || cachegetUint32Memory.buffer !== wasm.memory.buffer) {
|
||||
cachegetUint32Memory = new Uint32Array(wasm.memory.buffer);
|
||||
}
|
||||
return cachegetUint32Memory;
|
||||
}
|
||||
/**
|
||||
* @param {Uint8Array} arg0
|
||||
* @param {number} arg1
|
||||
* @returns {Uint8Array}
|
||||
*/
|
||||
module.exports.compress = function(arg0, arg1) {
|
||||
const ptr0 = passArray8ToWasm(arg0);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const retptr = globalArgumentPtr();
|
||||
wasm.compress(retptr, ptr0, len0, arg1);
|
||||
const mem = getUint32Memory();
|
||||
const rustptr = mem[retptr / 4];
|
||||
const rustlen = mem[retptr / 4 + 1];
|
||||
|
||||
const realRet = getArrayU8FromWasm(rustptr, rustlen).slice();
|
||||
wasm.__wbindgen_free(rustptr, rustlen * 1);
|
||||
return realRet;
|
||||
|
||||
};
|
||||
|
||||
wasm = require('./oxipng_bg');
|
||||
@@ -1,6 +1,6 @@
|
||||
/* tslint:disable */
|
||||
export const memory: WebAssembly.Memory;
|
||||
export function __wbindgen_global_argument_ptr(): number;
|
||||
export function compress(a: number, b: number, c: number, d: number): void;
|
||||
export function __wbindgen_malloc(a: number): number;
|
||||
export function __wbindgen_free(a: number, b: number): void;
|
||||
export function resize(a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number): void;
|
||||
9
codecs/oxipng/pkg/oxipng_bg.js
Normal file
9
codecs/oxipng/pkg/oxipng_bg.js
Normal file
@@ -0,0 +1,9 @@
|
||||
|
||||
const path = require('path').join(__dirname, 'oxipng_bg.wasm');
|
||||
const bytes = require('fs').readFileSync(path);
|
||||
let imports = {};
|
||||
imports['./oxipng'] = require('./oxipng');
|
||||
|
||||
const wasmModule = new WebAssembly.Module(bytes);
|
||||
const wasmInstance = new WebAssembly.Instance(wasmModule, imports);
|
||||
module.exports = wasmInstance.exports;
|
||||
BIN
codecs/oxipng/pkg/oxipng_bg.wasm
Normal file
BIN
codecs/oxipng/pkg/oxipng_bg.wasm
Normal file
Binary file not shown.
3
codecs/oxipng/pkg/oxipng_manual.d.ts
vendored
Normal file
3
codecs/oxipng/pkg/oxipng_manual.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
/* tslint:disable */
|
||||
export function compress(arg0: Uint8Array, arg1: number): Promise<Uint8Array>;
|
||||
|
||||
77
codecs/oxipng/pkg/oxipng_manual.js
Normal file
77
codecs/oxipng/pkg/oxipng_manual.js
Normal file
@@ -0,0 +1,77 @@
|
||||
/* tslint:disable */
|
||||
import wasmUrl from './oxipng_bg.wasm';
|
||||
|
||||
let wasm;
|
||||
const instancePromise = WebAssembly.instantiateStreaming(fetch(wasmUrl), {
|
||||
"./oxipng": {__wbg_log_64e6f53d8e6d5db5}
|
||||
});
|
||||
|
||||
let cachedTextDecoder = new TextDecoder('utf-8');
|
||||
|
||||
let cachegetUint8Memory = null;
|
||||
function getUint8Memory() {
|
||||
if (cachegetUint8Memory === null || cachegetUint8Memory.buffer !== wasm.memory.buffer) {
|
||||
cachegetUint8Memory = new Uint8Array(wasm.memory.buffer);
|
||||
}
|
||||
return cachegetUint8Memory;
|
||||
}
|
||||
|
||||
function getStringFromWasm(ptr, len) {
|
||||
return cachedTextDecoder.decode(getUint8Memory().subarray(ptr, ptr + len));
|
||||
}
|
||||
|
||||
export function __wbg_log_64e6f53d8e6d5db5(arg0, arg1) {
|
||||
let varg0 = getStringFromWasm(arg0, arg1);
|
||||
console.log(varg0);
|
||||
}
|
||||
|
||||
let WASM_VECTOR_LEN = 0;
|
||||
|
||||
function passArray8ToWasm(arg) {
|
||||
const ptr = wasm.__wbindgen_malloc(arg.length * 1);
|
||||
getUint8Memory().set(arg, ptr / 1);
|
||||
WASM_VECTOR_LEN = arg.length;
|
||||
return ptr;
|
||||
}
|
||||
|
||||
function getArrayU8FromWasm(ptr, len) {
|
||||
return getUint8Memory().subarray(ptr / 1, ptr / 1 + len);
|
||||
}
|
||||
|
||||
let cachedGlobalArgumentPtr = null;
|
||||
function globalArgumentPtr() {
|
||||
if (cachedGlobalArgumentPtr === null) {
|
||||
cachedGlobalArgumentPtr = wasm.__wbindgen_global_argument_ptr();
|
||||
}
|
||||
return cachedGlobalArgumentPtr;
|
||||
}
|
||||
|
||||
let cachegetUint32Memory = null;
|
||||
function getUint32Memory() {
|
||||
if (cachegetUint32Memory === null || cachegetUint32Memory.buffer !== wasm.memory.buffer) {
|
||||
cachegetUint32Memory = new Uint32Array(wasm.memory.buffer);
|
||||
}
|
||||
return cachegetUint32Memory;
|
||||
}
|
||||
/**
|
||||
* @param {Uint8Array} arg0
|
||||
* @param {number} arg1
|
||||
* @returns {Uint8Array}
|
||||
*/
|
||||
export async function compress(arg0, arg1) {
|
||||
wasm = (await instancePromise).instance.exports;
|
||||
debugger;
|
||||
const ptr0 = passArray8ToWasm(arg0);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const retptr = globalArgumentPtr();
|
||||
wasm.compress(retptr, ptr0, len0, arg1);
|
||||
const mem = getUint32Memory();
|
||||
const rustptr = mem[retptr / 4];
|
||||
const rustlen = mem[retptr / 4 + 1];
|
||||
|
||||
const realRet = getArrayU8FromWasm(rustptr, rustlen).slice();
|
||||
wasm.__wbindgen_free(rustptr, rustlen * 1);
|
||||
return realRet;
|
||||
|
||||
}
|
||||
|
||||
3
codecs/oxipng/pkg/oxipng_wasm.d.ts
vendored
Normal file
3
codecs/oxipng/pkg/oxipng_wasm.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
/* tslint:disable */
|
||||
export function doit(): number;
|
||||
|
||||
11
codecs/oxipng/pkg/oxipng_wasm.js
Normal file
11
codecs/oxipng/pkg/oxipng_wasm.js
Normal file
@@ -0,0 +1,11 @@
|
||||
/* tslint:disable */
|
||||
var wasm;
|
||||
|
||||
/**
|
||||
* @returns {number}
|
||||
*/
|
||||
module.exports.doit = function() {
|
||||
return wasm.doit();
|
||||
};
|
||||
|
||||
wasm = require('./oxipng_wasm_bg');
|
||||
3
codecs/oxipng/pkg/oxipng_wasm_bg.d.ts
vendored
Normal file
3
codecs/oxipng/pkg/oxipng_wasm_bg.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
/* tslint:disable */
|
||||
export const memory: WebAssembly.Memory;
|
||||
export function doit(): number;
|
||||
8
codecs/oxipng/pkg/oxipng_wasm_bg.js
Normal file
8
codecs/oxipng/pkg/oxipng_wasm_bg.js
Normal file
@@ -0,0 +1,8 @@
|
||||
|
||||
const path = require('path').join(__dirname, 'oxipng_wasm_bg.wasm');
|
||||
const bytes = require('fs').readFileSync(path);
|
||||
let imports = {};
|
||||
|
||||
const wasmModule = new WebAssembly.Module(bytes);
|
||||
const wasmInstance = new WebAssembly.Instance(wasmModule, imports);
|
||||
module.exports = wasmInstance.exports;
|
||||
BIN
codecs/oxipng/pkg/oxipng_wasm_bg.wasm
Normal file
BIN
codecs/oxipng/pkg/oxipng_wasm_bg.wasm
Normal file
Binary file not shown.
15
codecs/oxipng/pkg/package.json
Normal file
15
codecs/oxipng/pkg/package.json
Normal file
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"name": "oxipng-wasm",
|
||||
"collaborators": [
|
||||
"Surma <surma@surma.link>"
|
||||
],
|
||||
"version": "0.1.0",
|
||||
"files": [
|
||||
"oxipng_wasm_bg.wasm",
|
||||
"oxipng_wasm.js",
|
||||
"oxipng_wasm_bg.js",
|
||||
"oxipng_wasm.d.ts"
|
||||
],
|
||||
"main": "oxipng_wasm.js",
|
||||
"types": "oxipng_wasm.d.ts"
|
||||
}
|
||||
0
codecs/oxipng/pkg/test/lol.rs
Normal file
0
codecs/oxipng/pkg/test/lol.rs
Normal file
42
codecs/oxipng/src/lib.rs
Normal file
42
codecs/oxipng/src/lib.rs
Normal file
@@ -0,0 +1,42 @@
|
||||
extern crate cfg_if;
|
||||
extern crate wasm_bindgen;
|
||||
// extern crate oxipng;
|
||||
|
||||
mod utils;
|
||||
|
||||
use cfg_if::cfg_if;
|
||||
use wasm_bindgen::prelude::*;
|
||||
use std::time::{Instant};
|
||||
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]
|
||||
// extern {
|
||||
// #[wasm_bindgen(js_namespace = console)]
|
||||
// fn log(s: &str);
|
||||
// }
|
||||
|
||||
// #[wasm_bindgen]
|
||||
// pub fn compress(img: Vec<u8>, level: u8) -> Vec<u8> {
|
||||
// log(&format!("len: {}, level: {}", img.len(), level));
|
||||
// let mut options = oxipng::Options::from_preset(level);
|
||||
// options.threads = 0;
|
||||
// let result = oxipng::optimize_from_memory(img.as_slice(), &options);
|
||||
// match result {
|
||||
// Ok(v) => v,
|
||||
// Err(e) => e.to_string().as_bytes().to_vec()
|
||||
// }
|
||||
// }
|
||||
|
||||
#[wasm_bindgen]
|
||||
pub fn doit() -> u32 {
|
||||
let start = Instant::now();
|
||||
start.elapsed().as_secs() as u32
|
||||
}
|
||||
1
codecs/oxipng/tmp/.gitignore
vendored
Normal file
1
codecs/oxipng/tmp/.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
target
|
||||
27
codecs/oxipng/tmp/Cargo.toml
Normal file
27
codecs/oxipng/tmp/Cargo.toml
Normal file
@@ -0,0 +1,27 @@
|
||||
[package]
|
||||
name = "loltest"
|
||||
version = "0.1.0"
|
||||
authors = ["Surma <surma@surma.link>"]
|
||||
|
||||
[lib]
|
||||
path = "lib.rs"
|
||||
crate-type = ["cdylib", "rlib"]
|
||||
|
||||
[features]
|
||||
default = ["console_error_panic_hook"]
|
||||
|
||||
[dependencies]
|
||||
wasm-bindgen = "0.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 }
|
||||
|
||||
[dev-dependencies]
|
||||
wasm-bindgen-test = "0.2"
|
||||
|
||||
[profile.release]
|
||||
# Tell `rustc` to optimize for small code size.
|
||||
opt-level = "s"
|
||||
2
codecs/oxipng/tmp/Xargo.toml
Normal file
2
codecs/oxipng/tmp/Xargo.toml
Normal file
@@ -0,0 +1,2 @@
|
||||
[dependencies.std]
|
||||
features = ["wasm_syscall"]
|
||||
20
codecs/oxipng/tmp/_README.md
Normal file
20
codecs/oxipng/tmp/_README.md
Normal file
@@ -0,0 +1,20 @@
|
||||
I’m trying to activate [the `wasm_syscall` feature][1] in Rust’s stdlib for WebAssembly.
|
||||
|
||||
Here is my `Cargo.toml` and my `Xargo.toml`. But even with this setup the generated wasm file is still hard-coded to panic.
|
||||
|
||||
**HELP?**
|
||||
|
||||
My current command to compile is:
|
||||
|
||||
```
|
||||
xargo build --target wasm32-unknown-unknown --release
|
||||
```
|
||||
|
||||
If you have [`wasm2wat`][2] installed, you can verify the generate code via
|
||||
|
||||
```
|
||||
wasm2wat target/wasm32-unknown-unknown/release/loltest.wasm | grep -A5 perform::
|
||||
```
|
||||
|
||||
[1]: https://github.com/rust-lang/rust/blob/b139669f374eb5024a50eb13f116ff763b1c5935/src/libstd/sys/wasm/mod.rs#L309
|
||||
[2]: https://github.com/WebAssembly/wabt
|
||||
14
codecs/oxipng/tmp/lib.rs
Normal file
14
codecs/oxipng/tmp/lib.rs
Normal file
@@ -0,0 +1,14 @@
|
||||
extern crate wasm_bindgen;
|
||||
|
||||
use wasm_bindgen::prelude::*;
|
||||
use std::thread::spawn;
|
||||
|
||||
#[wasm_bindgen]
|
||||
pub fn doit() {
|
||||
// let child = spawn(move || -> u32 {
|
||||
// 5
|
||||
// });
|
||||
// let result = child.join().unwrap();
|
||||
let result = spawn();
|
||||
println!("Result: {}", result);
|
||||
}
|
||||
47
codecs/oxipng/tmp/lol.js
Normal file
47
codecs/oxipng/tmp/lol.js
Normal file
@@ -0,0 +1,47 @@
|
||||
// const oxipng = require("./oxipng_wasm");
|
||||
const repl = require("repl");
|
||||
const fs = require("fs");
|
||||
|
||||
const dec = new TextDecoder();
|
||||
let buffer = '';
|
||||
async function init() {
|
||||
const { instance } = await WebAssembly.instantiate(
|
||||
fs.readFileSync("./target/wasm32-unknown-unknown/release/loltest.wasm"),
|
||||
{
|
||||
__wbindgen_placeholder__: {
|
||||
__wbindgen_describe(v) {
|
||||
console.log(`__wbindgen_desribe(${v})`);
|
||||
}
|
||||
},
|
||||
env: {
|
||||
// See https://github.com/rust-lang/rust/blob/master/src/libstd/sys/wasm/mod.rs
|
||||
rust_wasm_syscall(syscall, ptr) {
|
||||
switch(syscall) {
|
||||
case 1: // Write
|
||||
const [fd, dataPtr, len] = new Uint32Array(instance.exports.memory.buffer, ptr, 3 * 4);
|
||||
const fragment = new Uint8Array(instance.exports.memory.buffer, dataPtr, len);
|
||||
buffer += dec.decode(fragment);
|
||||
const idx = buffer.indexOf('\n');
|
||||
if(idx !== -1) {
|
||||
console.log(buffer.slice(0, idx));
|
||||
buffer = buffer.slice(idx);
|
||||
}
|
||||
return 1;
|
||||
case 6: // Time
|
||||
return 1;
|
||||
default:
|
||||
return 0; // False, unimplemented
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
try {
|
||||
instance.exports.doit();
|
||||
} catch{}
|
||||
const r = repl.start("node> ");
|
||||
r.context.i = instance;
|
||||
}
|
||||
|
||||
init();
|
||||
1737
codecs/oxipng/tmp/thread_mod.rs
Normal file
1737
codecs/oxipng/tmp/thread_mod.rs
Normal file
File diff suppressed because it is too large
Load Diff
6
codecs/resize/.gitignore
vendored
6
codecs/resize/.gitignore
vendored
@@ -1,6 +0,0 @@
|
||||
**/*.rs.bk
|
||||
target
|
||||
Cargo.lock
|
||||
bin/
|
||||
pkg/README.md
|
||||
lut.inc
|
||||
@@ -1,18 +0,0 @@
|
||||
FROM ubuntu
|
||||
RUN apt-get update && \
|
||||
apt-get install -qqy git build-essential cmake python2.7
|
||||
RUN git clone --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
|
||||
ENV PATH="/opt/wabt/bin:${PATH}"
|
||||
WORKDIR /src
|
||||
@@ -1,53 +0,0 @@
|
||||
// THIS IS NOT A NODE SCRIPT
|
||||
// This is a d8 script. Please install jsvu[1] and install v8.
|
||||
// Then run `npm run --silent benchmark`.
|
||||
// [1]: https://github.com/GoogleChromeLabs/jsvu
|
||||
|
||||
self = global = this;
|
||||
load("./pkg/resize.js");
|
||||
|
||||
async function init() {
|
||||
// Adjustable constants.
|
||||
const inputDimensions = 2000;
|
||||
const outputDimensions = 1500;
|
||||
const algorithm = 3; // Lanczos
|
||||
const iterations = new Array(100);
|
||||
|
||||
// Constants. Don’t change.
|
||||
const imageByteSize = inputDimensions * inputDimensions * 4;
|
||||
const imageBuffer = new Uint8ClampedArray(imageByteSize);
|
||||
|
||||
const module = await WebAssembly.compile(readbuffer("./pkg/resize_bg.wasm"));
|
||||
await wasm_bindgen(module);
|
||||
[[false, false], [true, false], [false, true], [true, true]].forEach(
|
||||
opts => {
|
||||
print(`\npremultiplication: ${opts[0]}`);
|
||||
print(`color space conversion: ${opts[1]}`);
|
||||
print(`==============================`);
|
||||
for (let i = 0; i < 100; i++) {
|
||||
const start = Date.now();
|
||||
wasm_bindgen.resize(
|
||||
imageBuffer,
|
||||
inputDimensions,
|
||||
inputDimensions,
|
||||
outputDimensions,
|
||||
outputDimensions,
|
||||
algorithm,
|
||||
...opts
|
||||
);
|
||||
iterations[i] = Date.now() - start;
|
||||
}
|
||||
const average =
|
||||
iterations.reduce((sum, c) => sum + c) / iterations.length;
|
||||
const stddev = Math.sqrt(
|
||||
iterations
|
||||
.map(i => Math.pow(i - average, 2))
|
||||
.reduce((sum, c) => sum + c) / iterations.length
|
||||
);
|
||||
print(`n = ${iterations.length}`);
|
||||
print(`Average: ${average}`);
|
||||
print(`StdDev: ${stddev}`);
|
||||
}
|
||||
);
|
||||
}
|
||||
init().catch(e => console.error(e, e.stack));
|
||||
@@ -1,23 +0,0 @@
|
||||
include!("./src/srgb.rs");
|
||||
|
||||
use std::io::Write;
|
||||
|
||||
fn main() -> std::io::Result<()> {
|
||||
let mut srgb_to_linear_lut = String::from("static SRGB_TO_LINEAR_LUT: [f32; 256] = [");
|
||||
let mut linear_to_srgb_lut = String::from("static LINEAR_TO_SRGB_LUT: [f32; 256] = [");
|
||||
for i in 0..256 {
|
||||
srgb_to_linear_lut.push_str(&format!("{0:.7}", srgb_to_linear((i as f32) / 255.0)));
|
||||
srgb_to_linear_lut.push_str(",");
|
||||
linear_to_srgb_lut.push_str(&format!("{0:.7}", linear_to_srgb((i as f32) / 255.0)));
|
||||
linear_to_srgb_lut.push_str(",");
|
||||
}
|
||||
srgb_to_linear_lut.pop().unwrap();
|
||||
linear_to_srgb_lut.pop().unwrap();
|
||||
srgb_to_linear_lut.push_str("];");
|
||||
linear_to_srgb_lut.push_str("];");
|
||||
|
||||
let mut file = std::fs::File::create("src/lut.inc")?;
|
||||
file.write_all(srgb_to_linear_lut.as_bytes())?;
|
||||
file.write_all(linear_to_srgb_lut.as_bytes())?;
|
||||
Ok(())
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
#!/bin/bash
|
||||
|
||||
set -e
|
||||
|
||||
echo "============================================="
|
||||
echo "Compiling wasm"
|
||||
echo "============================================="
|
||||
(
|
||||
rustup run nightly \
|
||||
wasm-pack build --target no-modules
|
||||
wasm-strip pkg/resize_bg.wasm
|
||||
)
|
||||
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-resize .\`"
|
||||
echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
|
||||
4
codecs/resize/package-lock.json
generated
4
codecs/resize/package-lock.json
generated
@@ -1,4 +0,0 @@
|
||||
{
|
||||
"name": "resize",
|
||||
"lockfileVersion": 1
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
{
|
||||
"name": "resize",
|
||||
"scripts": {
|
||||
"build:image": "docker build -t squoosh-resize .",
|
||||
"build": "docker run --rm -v $(pwd):/src squoosh-resize ./build.sh",
|
||||
"benchmark": "v8 --no-liftoff --no-wasm-tier-up ./benchmark.js"
|
||||
}
|
||||
}
|
||||
13
codecs/resize/pkg/resize.d.ts
vendored
13
codecs/resize/pkg/resize.d.ts
vendored
@@ -1,13 +0,0 @@
|
||||
/* tslint:disable */
|
||||
/**
|
||||
* @param {Uint8Array} arg0
|
||||
* @param {number} arg1
|
||||
* @param {number} arg2
|
||||
* @param {number} arg3
|
||||
* @param {number} arg4
|
||||
* @param {number} arg5
|
||||
* @param {boolean} arg6
|
||||
* @param {boolean} arg7
|
||||
* @returns {Uint8Array}
|
||||
*/
|
||||
export function resize(arg0: Uint8Array, arg1: number, arg2: number, arg3: number, arg4: number, arg5: number, arg6: boolean, arg7: boolean): Uint8Array;
|
||||
@@ -1,114 +0,0 @@
|
||||
(function() {
|
||||
var wasm;
|
||||
const __exports = {};
|
||||
|
||||
|
||||
let cachegetUint8Memory = null;
|
||||
function getUint8Memory() {
|
||||
if (cachegetUint8Memory === null || cachegetUint8Memory.buffer !== wasm.memory.buffer) {
|
||||
cachegetUint8Memory = new Uint8Array(wasm.memory.buffer);
|
||||
}
|
||||
return cachegetUint8Memory;
|
||||
}
|
||||
|
||||
let WASM_VECTOR_LEN = 0;
|
||||
|
||||
function passArray8ToWasm(arg) {
|
||||
const ptr = wasm.__wbindgen_malloc(arg.length * 1);
|
||||
getUint8Memory().set(arg, ptr / 1);
|
||||
WASM_VECTOR_LEN = arg.length;
|
||||
return ptr;
|
||||
}
|
||||
|
||||
function getArrayU8FromWasm(ptr, len) {
|
||||
return getUint8Memory().subarray(ptr / 1, ptr / 1 + len);
|
||||
}
|
||||
|
||||
let cachedGlobalArgumentPtr = null;
|
||||
function globalArgumentPtr() {
|
||||
if (cachedGlobalArgumentPtr === null) {
|
||||
cachedGlobalArgumentPtr = wasm.__wbindgen_global_argument_ptr();
|
||||
}
|
||||
return cachedGlobalArgumentPtr;
|
||||
}
|
||||
|
||||
let cachegetUint32Memory = null;
|
||||
function getUint32Memory() {
|
||||
if (cachegetUint32Memory === null || cachegetUint32Memory.buffer !== wasm.memory.buffer) {
|
||||
cachegetUint32Memory = new Uint32Array(wasm.memory.buffer);
|
||||
}
|
||||
return cachegetUint32Memory;
|
||||
}
|
||||
/**
|
||||
* @param {Uint8Array} arg0
|
||||
* @param {number} arg1
|
||||
* @param {number} arg2
|
||||
* @param {number} arg3
|
||||
* @param {number} arg4
|
||||
* @param {number} arg5
|
||||
* @param {boolean} arg6
|
||||
* @param {boolean} arg7
|
||||
* @returns {Uint8Array}
|
||||
*/
|
||||
__exports.resize = function(arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7) {
|
||||
const ptr0 = passArray8ToWasm(arg0);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const retptr = globalArgumentPtr();
|
||||
wasm.resize(retptr, ptr0, len0, arg1, arg2, arg3, arg4, arg5, arg6, arg7);
|
||||
const mem = getUint32Memory();
|
||||
const rustptr = mem[retptr / 4];
|
||||
const rustlen = mem[retptr / 4 + 1];
|
||||
|
||||
const realRet = getArrayU8FromWasm(rustptr, rustlen).slice();
|
||||
wasm.__wbindgen_free(rustptr, rustlen * 1);
|
||||
return realRet;
|
||||
|
||||
};
|
||||
|
||||
const heap = new Array(32);
|
||||
|
||||
heap.fill(undefined);
|
||||
|
||||
heap.push(undefined, null, true, false);
|
||||
|
||||
let heap_next = heap.length;
|
||||
|
||||
function dropObject(idx) {
|
||||
if (idx < 36) return;
|
||||
heap[idx] = heap_next;
|
||||
heap_next = idx;
|
||||
}
|
||||
|
||||
__exports.__wbindgen_object_drop_ref = function(i) { dropObject(i); };
|
||||
|
||||
function init(path_or_module) {
|
||||
let instantiation;
|
||||
const imports = { './resize': __exports };
|
||||
if (path_or_module instanceof WebAssembly.Module) {
|
||||
instantiation = WebAssembly.instantiate(path_or_module, imports)
|
||||
.then(instance => {
|
||||
return { instance, module: path_or_module }
|
||||
});
|
||||
} else {
|
||||
const data = fetch(path_or_module);
|
||||
if (typeof WebAssembly.instantiateStreaming === 'function') {
|
||||
instantiation = WebAssembly.instantiateStreaming(data, 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 data
|
||||
.then(r => r.arrayBuffer())
|
||||
.then(bytes => WebAssembly.instantiate(bytes, imports));
|
||||
});
|
||||
} else {
|
||||
instantiation = data
|
||||
.then(response => response.arrayBuffer())
|
||||
.then(buffer => WebAssembly.instantiate(buffer, imports));
|
||||
}
|
||||
}
|
||||
return instantiation.then(({instance}) => {
|
||||
wasm = init.wasm = instance.exports;
|
||||
|
||||
});
|
||||
};
|
||||
self.wasm_bindgen = Object.assign(init, __exports);
|
||||
})();
|
||||
Binary file not shown.
@@ -1,121 +0,0 @@
|
||||
extern crate cfg_if;
|
||||
extern crate resize;
|
||||
extern crate wasm_bindgen;
|
||||
|
||||
mod utils;
|
||||
|
||||
use cfg_if::cfg_if;
|
||||
use resize::Pixel::RGBA;
|
||||
use resize::Type;
|
||||
use wasm_bindgen::prelude::*;
|
||||
|
||||
mod srgb;
|
||||
use srgb::Clamp;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
include!("./lut.inc");
|
||||
|
||||
// If `with_space_conversion` is true, this function returns 2 functions that
|
||||
// convert from sRGB to linear RGB and vice versa. If `with_space_conversion` is
|
||||
// false, the 2 functions returned do nothing.
|
||||
fn converter_funcs(with_space_conversion: bool) -> ((fn(u8) -> f32), (fn(f32) -> u8)) {
|
||||
if with_space_conversion {
|
||||
(
|
||||
|v| SRGB_TO_LINEAR_LUT[v as usize] * 255.0,
|
||||
|v| (LINEAR_TO_SRGB_LUT[v as usize] * 255.0) as u8,
|
||||
)
|
||||
} else {
|
||||
(|v| v as f32, |v| v as u8)
|
||||
}
|
||||
}
|
||||
|
||||
// If `with_alpha_premultiplication` is true, this function returns a function
|
||||
// that premultiply the alpha channel with the given channel value and another
|
||||
// function that reverses that process. If `with_alpha_premultiplication` is
|
||||
// false, the functions just return the channel value.
|
||||
fn alpha_multiplier_funcs(
|
||||
with_alpha_premultiplication: bool,
|
||||
) -> ((fn(f32, u8) -> u8), (fn(u8, u8) -> f32)) {
|
||||
if with_alpha_premultiplication {
|
||||
(
|
||||
|v, a| (v * (a as f32) / 255.0) as u8,
|
||||
|v, a| (v as f32) * 255.0 / (a as f32).clamp(0.0, 255.0),
|
||||
)
|
||||
} else {
|
||||
(|v, _a| v as u8, |v, _a| v as f32)
|
||||
}
|
||||
}
|
||||
|
||||
#[wasm_bindgen]
|
||||
#[no_mangle]
|
||||
pub fn resize(
|
||||
mut input_image: Vec<u8>,
|
||||
input_width: usize,
|
||||
input_height: usize,
|
||||
output_width: usize,
|
||||
output_height: usize,
|
||||
typ_idx: usize,
|
||||
premultiply: bool,
|
||||
color_space_conversion: bool,
|
||||
) -> Vec<u8> {
|
||||
let typ = match typ_idx {
|
||||
0 => Type::Triangle,
|
||||
1 => Type::Catrom,
|
||||
2 => Type::Mitchell,
|
||||
3 => Type::Lanczos3,
|
||||
_ => panic!("Nope"),
|
||||
};
|
||||
let num_input_pixels = input_width * input_height;
|
||||
let num_output_pixels = output_width * output_height;
|
||||
|
||||
let (to_linear, to_color_space) = converter_funcs(color_space_conversion);
|
||||
let (premultiplier, demultiplier) = alpha_multiplier_funcs(premultiply);
|
||||
|
||||
// If both options are false, there is no preprocessing on the pixel valus
|
||||
// and we can skip the loop.
|
||||
if premultiply || color_space_conversion {
|
||||
for i in 0..num_input_pixels {
|
||||
for j in 0..3 {
|
||||
input_image[4 * i + j] =
|
||||
premultiplier(to_linear(input_image[4 * i + j]), input_image[4 * i + 3]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let mut resizer = resize::new(
|
||||
input_width,
|
||||
input_height,
|
||||
output_width,
|
||||
output_height,
|
||||
RGBA,
|
||||
typ,
|
||||
);
|
||||
let mut output_image = Vec::<u8>::with_capacity(num_output_pixels * 4);
|
||||
output_image.resize(num_output_pixels * 4, 0);
|
||||
resizer.resize(input_image.as_slice(), output_image.as_mut_slice());
|
||||
|
||||
if premultiply || color_space_conversion {
|
||||
for i in 0..num_output_pixels {
|
||||
for j in 0..3 {
|
||||
// We don’t need to worry about division by zero, as division by zero
|
||||
// is well-defined on floats to return ±Inf. ±Inf is converted to 0
|
||||
// when casting to integers.
|
||||
output_image[4 * i + j] = to_color_space(demultiplier(
|
||||
output_image[4 * i + j],
|
||||
output_image[4 * i + 3],
|
||||
));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return output_image;
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
pub trait Clamp: std::cmp::PartialOrd + Sized {
|
||||
fn clamp(self, min: Self, max: Self) -> Self {
|
||||
if self.lt(&min) {
|
||||
min
|
||||
} else if self.gt(&max) {
|
||||
max
|
||||
} else {
|
||||
self
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
impl Clamp for f32 {}
|
||||
|
||||
pub fn srgb_to_linear(v: f32) -> f32 {
|
||||
if v < 0.04045 {
|
||||
v / 12.92
|
||||
} else {
|
||||
((v + 0.055) / 1.055).powf(2.4).clamp(0.0, 1.0)
|
||||
}
|
||||
}
|
||||
|
||||
pub fn linear_to_srgb(v: f32) -> f32 {
|
||||
if v < 0.0031308 {
|
||||
v * 12.92
|
||||
} else {
|
||||
(1.055 * v.powf(1.0 / 2.4) - 0.055).clamp(0.0, 1.0)
|
||||
}
|
||||
}
|
||||
2
codecs/rotate/.gitignore
vendored
2
codecs/rotate/.gitignore
vendored
@@ -1,2 +0,0 @@
|
||||
target
|
||||
Cargo.lock
|
||||
@@ -1,14 +0,0 @@
|
||||
[package]
|
||||
name = "rotate"
|
||||
version = "0.1.0"
|
||||
authors = ["Surma <surma@google.com>"]
|
||||
edition = "2018"
|
||||
|
||||
[lib]
|
||||
name = "rotate"
|
||||
path = "rotate.rs"
|
||||
crate-type = ["cdylib", "rlib"]
|
||||
|
||||
[profile.release]
|
||||
lto = true
|
||||
opt-level = "s"
|
||||
@@ -1,17 +0,0 @@
|
||||
FROM ubuntu
|
||||
RUN apt-get update && \
|
||||
apt-get install -qqy git build-essential cmake python2.7
|
||||
RUN git clone --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
|
||||
|
||||
COPY --from=0 /opt/wabt /opt/wabt
|
||||
ENV PATH="/opt/wabt/bin:${PATH}"
|
||||
WORKDIR /src
|
||||
@@ -1,45 +0,0 @@
|
||||
// THIS IS NOT A NODE SCRIPT
|
||||
// This is a d8 script. Please install jsvu[1] and install v8.
|
||||
// Then run `npm run --silent benchmark`.
|
||||
// [1]: https://github.com/GoogleChromeLabs/jsvu
|
||||
async function init() {
|
||||
// Adjustable constants.
|
||||
const imageDimensions = 4096;
|
||||
const iterations = new Array(100);
|
||||
|
||||
// Constants. Don’t change.
|
||||
const imageByteSize = imageDimensions * imageDimensions * 4;
|
||||
const wasmPageSize = 64 * 1024;
|
||||
|
||||
const buffer = readbuffer("rotate.wasm");
|
||||
const { instance } = await WebAssembly.instantiate(buffer);
|
||||
|
||||
const pagesAvailable = Math.floor(
|
||||
instance.exports.memory.buffer.byteLength / wasmPageSize
|
||||
);
|
||||
const pagesNeeded = Math.floor((imageByteSize * 2 + 4) / wasmPageSize) + 1;
|
||||
const additionalPagesNeeded = pagesNeeded - pagesAvailable;
|
||||
if (additionalPagesNeeded > 0) {
|
||||
instance.exports.memory.grow(additionalPagesNeeded);
|
||||
}
|
||||
|
||||
[0, 90, 180, 270].forEach(rotation => {
|
||||
print(`\n${rotation} degrees`);
|
||||
print(`==============================`);
|
||||
for (let i = 0; i < 100; i++) {
|
||||
const start = Date.now();
|
||||
instance.exports.rotate(imageDimensions, imageDimensions, rotation);
|
||||
iterations[i] = Date.now() - start;
|
||||
}
|
||||
const average = iterations.reduce((sum, c) => sum + c) / iterations.length;
|
||||
const stddev = Math.sqrt(
|
||||
iterations
|
||||
.map(i => Math.pow(i - average, 2))
|
||||
.reduce((sum, c) => sum + c) / iterations.length
|
||||
);
|
||||
print(`n = ${iterations.length}`);
|
||||
print(`Average: ${average}`);
|
||||
print(`StdDev: ${stddev}`);
|
||||
});
|
||||
}
|
||||
init().catch(e => console.error(e.stack));
|
||||
@@ -1,25 +0,0 @@
|
||||
#!/bin/bash
|
||||
|
||||
set -e
|
||||
|
||||
echo "============================================="
|
||||
echo "Compiling wasm"
|
||||
echo "============================================="
|
||||
(
|
||||
rustup run nightly \
|
||||
cargo build \
|
||||
--target wasm32-unknown-unknown \
|
||||
--release
|
||||
cp target/wasm32-unknown-unknown/release/rotate.wasm .
|
||||
wasm-strip rotate.wasm
|
||||
)
|
||||
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-rotate .\`"
|
||||
echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
|
||||
@@ -1,11 +0,0 @@
|
||||
{
|
||||
"name": "rotate",
|
||||
"scripts": {
|
||||
"build:image": "docker build -t squoosh-rotate .",
|
||||
"build": "docker run --rm -v $(pwd):/src squoosh-rotate ./build.sh",
|
||||
"benchmark": "echo File size after gzip && npm run benchmark:filesize && echo Optimizing && npm run -s benchmark:optimizing",
|
||||
"benchmark:baseline": "v8 --liftoff --no-wasm-tier-up --no-opt ./benchmark.js",
|
||||
"benchmark:optimizing": "v8 --no-liftoff --no-wasm-tier-up ./benchmark.js",
|
||||
"benchmark:filesize": "cat rotate.wasm | gzip -c9n | wc -c"
|
||||
}
|
||||
}
|
||||
@@ -1,113 +0,0 @@
|
||||
use std::slice::{from_raw_parts, from_raw_parts_mut};
|
||||
|
||||
// This function is taken from Zachary Dremann
|
||||
// https://github.com/GoogleChromeLabs/squoosh/pull/462
|
||||
trait HardUnwrap<T> {
|
||||
fn unwrap_hard(self) -> T;
|
||||
}
|
||||
|
||||
impl<T> HardUnwrap<T> for Option<T> {
|
||||
#[cfg(not(debug_assertions))]
|
||||
#[inline]
|
||||
fn unwrap_hard(self) -> T {
|
||||
match self {
|
||||
Some(t) => t,
|
||||
None => std::process::abort(),
|
||||
}
|
||||
}
|
||||
|
||||
#[cfg(debug_assertions)]
|
||||
fn unwrap_hard(self) -> T {
|
||||
self.unwrap()
|
||||
}
|
||||
}
|
||||
|
||||
const TILE_SIZE: usize = 16;
|
||||
|
||||
fn get_buffers<'a>(width: usize, height: usize) -> (&'a [u32], &'a mut [u32]) {
|
||||
let num_pixels = width * height;
|
||||
let in_b: &[u32];
|
||||
let out_b: &mut [u32];
|
||||
unsafe {
|
||||
in_b = from_raw_parts::<u32>(8 as *const u32, num_pixels);
|
||||
out_b = from_raw_parts_mut::<u32>((num_pixels * 4 + 8) as *mut u32, num_pixels);
|
||||
}
|
||||
return (in_b, out_b);
|
||||
}
|
||||
|
||||
#[inline(never)]
|
||||
fn rotate_0(width: usize, height: usize) {
|
||||
let (in_b, out_b) = get_buffers(width, height);
|
||||
for (in_p, out_p) in in_b.iter().zip(out_b.iter_mut()) {
|
||||
*out_p = *in_p;
|
||||
}
|
||||
}
|
||||
|
||||
#[inline(never)]
|
||||
fn rotate_90(width: usize, height: usize) {
|
||||
let (in_b, out_b) = get_buffers(width, height);
|
||||
let new_width = height;
|
||||
let _new_height = width;
|
||||
for y_start in (0..height).step_by(TILE_SIZE) {
|
||||
for x_start in (0..width).step_by(TILE_SIZE) {
|
||||
for y in y_start..(y_start + TILE_SIZE).min(height) {
|
||||
let in_offset = y * width;
|
||||
let in_bounds = if x_start + TILE_SIZE < width {
|
||||
(in_offset + x_start)..(in_offset + x_start + TILE_SIZE)
|
||||
} else {
|
||||
(in_offset + x_start)..(in_offset + width)
|
||||
};
|
||||
let in_chunk = in_b.get(in_bounds).unwrap_hard();
|
||||
for (x, in_p) in in_chunk.iter().enumerate() {
|
||||
let new_x = (new_width - 1) - y;
|
||||
let new_y = x + x_start;
|
||||
*out_b.get_mut(new_y * new_width + new_x).unwrap_hard() = *in_p;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[inline(never)]
|
||||
fn rotate_180(width: usize, height: usize) {
|
||||
let (in_b, out_b) = get_buffers(width, height);
|
||||
for (in_p, out_p) in in_b.iter().zip(out_b.iter_mut().rev()) {
|
||||
*out_p = *in_p;
|
||||
}
|
||||
}
|
||||
|
||||
#[inline(never)]
|
||||
fn rotate_270(width: usize, height: usize) {
|
||||
let (in_b, out_b) = get_buffers(width, height);
|
||||
let new_width = height;
|
||||
let new_height = width;
|
||||
for y_start in (0..height).step_by(TILE_SIZE) {
|
||||
for x_start in (0..width).step_by(TILE_SIZE) {
|
||||
for y in y_start..(y_start + TILE_SIZE).min(height) {
|
||||
let in_offset = y * width;
|
||||
let in_bounds = if x_start + TILE_SIZE < width {
|
||||
(in_offset + x_start)..(in_offset + x_start + TILE_SIZE)
|
||||
} else {
|
||||
(in_offset + x_start)..(in_offset + width)
|
||||
};
|
||||
let in_chunk = in_b.get(in_bounds).unwrap_hard();
|
||||
for (x, in_p) in in_chunk.iter().enumerate() {
|
||||
let new_x = y;
|
||||
let new_y = new_height - 1 - (x_start + x);
|
||||
*out_b.get_mut(new_y * new_width + new_x).unwrap_hard() = *in_p;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[no_mangle]
|
||||
fn rotate(width: usize, height: usize, rotate: usize) {
|
||||
match rotate {
|
||||
0 => rotate_0(width, height),
|
||||
90 => rotate_90(width, height),
|
||||
180 => rotate_180(width, height),
|
||||
270 => rotate_270(width, height),
|
||||
_ => std::process::abort(),
|
||||
}
|
||||
}
|
||||
Binary file not shown.
@@ -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();
|
||||
5638
package-lock.json
generated
5638
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
52
package.json
52
package.json
@@ -1,15 +1,13 @@
|
||||
{
|
||||
"private": true,
|
||||
"name": "squoosh",
|
||||
"version": "1.6.0",
|
||||
"version": "1.3.1",
|
||||
"license": "apache-2.0",
|
||||
"scripts": {
|
||||
"build:sdk": "microbundle --compress -f es -o build/sdk.mjs -i src/sdk.ts",
|
||||
"start": "webpack-dev-server --host 0.0.0.0 --hot",
|
||||
"build": "webpack -p && npm run build:sdk",
|
||||
"lint": "tslint -c tslint.json -p tsconfig.json -t verbose 'src/**/*.{ts,tsx,js,jsx}'",
|
||||
"lintfix": "tslint -c tslint.json -p tsconfig.json -t verbose --fix 'src/**/*.{ts,tsx,js,jsx}'",
|
||||
"sizereport": "node config/size-report.js"
|
||||
"build": "webpack -p",
|
||||
"lint": "tslint -c tslint.json -p tsconfig.json -t verbose 'src/**/*.{ts,tsx,js,jsx}'",
|
||||
"lintfix": "tslint -c tslint.json -p tsconfig.json -t verbose --fix 'src/**/*.{ts,tsx,js,jsx}'"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
@@ -17,61 +15,55 @@
|
||||
}
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "10.14.1",
|
||||
"@types/node": "10.12.21",
|
||||
"@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",
|
||||
"assets-webpack-plugin": "3.9.10",
|
||||
"chalk": "2.4.2",
|
||||
"chokidar": "2.1.2",
|
||||
"assets-webpack-plugin": "3.9.7",
|
||||
"chokidar": "2.0.4",
|
||||
"classnames": "2.2.6",
|
||||
"clean-webpack-plugin": "1.0.1",
|
||||
"copy-webpack-plugin": "5.0.1",
|
||||
"comlink": "^3.2.0",
|
||||
"critters-webpack-plugin": "2.3.0",
|
||||
"comlink": "3.1.1",
|
||||
"copy-webpack-plugin": "4.6.0",
|
||||
"critters-webpack-plugin": "2.2.0",
|
||||
"css-loader": "1.0.1",
|
||||
"ejs": "2.6.1",
|
||||
"escape-string-regexp": "1.0.5",
|
||||
"exports-loader": "0.7.0",
|
||||
"file-drop-element": "0.2.0",
|
||||
"file-drop-element": "0.0.9",
|
||||
"file-loader": "3.0.1",
|
||||
"gzip-size": "5.0.0",
|
||||
"html-webpack-plugin": "3.2.0",
|
||||
"husky": "1.3.1",
|
||||
"idb-keyval": "3.1.0",
|
||||
"linkstate": "1.1.1",
|
||||
"loader-utils": "1.2.3",
|
||||
"microbundle": "^0.10.1",
|
||||
"loader-utils": "1.2.0",
|
||||
"mini-css-extract-plugin": "0.5.0",
|
||||
"minimatch": "3.0.4",
|
||||
"node-fetch": "2.3.0",
|
||||
"node-sass": "4.11.0",
|
||||
"optimize-css-assets-webpack-plugin": "5.0.1",
|
||||
"pointer-tracker": "2.0.3",
|
||||
"preact": "8.4.2",
|
||||
"prerender-loader": "1.3.0",
|
||||
"prerender-loader": "1.2.0",
|
||||
"pretty-bytes": "5.1.0",
|
||||
"progress-bar-webpack-plugin": "1.12.1",
|
||||
"raw-loader": "2.0.0",
|
||||
"readdirp": "2.2.1",
|
||||
"raw-loader": "1.0.0",
|
||||
"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",
|
||||
"terser-webpack-plugin": "1.2.2",
|
||||
"ts-loader": "5.3.3",
|
||||
"tslint": "5.14.0",
|
||||
"tslint": "5.12.1",
|
||||
"tslint-config-airbnb": "5.11.1",
|
||||
"tslint-config-semistandard": "7.0.0",
|
||||
"tslint-react": "3.6.0",
|
||||
"typed-css-modules": "0.4.2",
|
||||
"typescript": "3.3.3333",
|
||||
"typed-css-modules": "0.3.7",
|
||||
"typescript": "3.2.4",
|
||||
"url-loader": "1.1.2",
|
||||
"webpack": "4.28.0",
|
||||
"webpack-bundle-analyzer": "3.1.0",
|
||||
"webpack-cli": "3.3.0",
|
||||
"webpack-dev-server": "3.2.1",
|
||||
"worker-plugin": "3.1.0"
|
||||
"webpack-bundle-analyzer": "3.0.3",
|
||||
"webpack-cli": "3.2.3",
|
||||
"webpack-dev-server": "3.1.14",
|
||||
"worker-plugin": "3.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import * as identity from './identity/encoder-meta';
|
||||
import * as optiPNG from './optipng/encoder-meta';
|
||||
import * as oxiPNG from './oxipng/encoder-meta';
|
||||
import * as mozJPEG from './mozjpeg/encoder-meta';
|
||||
import * as webP from './webp/encoder-meta';
|
||||
import * as browserPNG from './browser-png/encoder-meta';
|
||||
@@ -18,6 +19,7 @@ export interface EncoderSupportMap {
|
||||
export type EncoderState =
|
||||
identity.EncoderState |
|
||||
optiPNG.EncoderState |
|
||||
oxiPNG.EncoderState |
|
||||
mozJPEG.EncoderState |
|
||||
webP.EncoderState |
|
||||
browserPNG.EncoderState |
|
||||
@@ -32,6 +34,7 @@ export type EncoderState =
|
||||
export type EncoderOptions =
|
||||
identity.EncodeOptions |
|
||||
optiPNG.EncodeOptions |
|
||||
oxiPNG.EncodeOptions |
|
||||
mozJPEG.EncodeOptions |
|
||||
webP.EncodeOptions |
|
||||
browserPNG.EncodeOptions |
|
||||
@@ -48,6 +51,7 @@ export type EncoderType = keyof typeof encoderMap;
|
||||
export const encoderMap = {
|
||||
[identity.type]: identity,
|
||||
[optiPNG.type]: optiPNG,
|
||||
[oxiPNG.type]: oxiPNG,
|
||||
[mozJPEG.type]: mozJPEG,
|
||||
[webP.type]: webP,
|
||||
[browserPNG.type]: browserPNG,
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import imagequant, { QuantizerModule } from '../../../codecs/imagequant/imagequant';
|
||||
import wasmUrl from '../../../codecs/imagequant/imagequant.wasm';
|
||||
import { QuantizeOptions } from './processor-meta';
|
||||
import { initEmscriptenModule } from '../util';
|
||||
import { initWasmModule } from '../util';
|
||||
|
||||
let emscriptenModule: Promise<QuantizerModule>;
|
||||
|
||||
export async function process(data: ImageData, opts: QuantizeOptions): Promise<ImageData> {
|
||||
if (!emscriptenModule) emscriptenModule = initEmscriptenModule(imagequant, wasmUrl);
|
||||
if (!emscriptenModule) emscriptenModule = initWasmModule(imagequant, wasmUrl);
|
||||
|
||||
const module = await emscriptenModule;
|
||||
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
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 { initEmscriptenModule } from '../util';
|
||||
import { initWasmModule } from '../util';
|
||||
|
||||
let emscriptenModule: Promise<MozJPEGModule>;
|
||||
|
||||
export async function encode(data: ImageData, options: EncodeOptions): Promise<ArrayBuffer> {
|
||||
if (!emscriptenModule) emscriptenModule = initEmscriptenModule(mozjpeg_enc, wasmUrl);
|
||||
if (!emscriptenModule) emscriptenModule = initWasmModule(mozjpeg_enc, wasmUrl);
|
||||
|
||||
const module = await emscriptenModule;
|
||||
const resultView = module.encode(data.data, data.width, data.height, options);
|
||||
|
||||
@@ -3,7 +3,7 @@ export interface EncodeOptions {
|
||||
}
|
||||
export interface EncoderState { type: typeof type; options: EncodeOptions; }
|
||||
|
||||
export const type = 'png';
|
||||
export const type = 'optipng';
|
||||
export const label = 'OptiPNG';
|
||||
export const mimeType = 'image/png';
|
||||
export const extension = 'png';
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import optipng, { OptiPngModule } from '../../../codecs/optipng/optipng';
|
||||
import wasmUrl from '../../../codecs/optipng/optipng.wasm';
|
||||
import { EncodeOptions } from './encoder-meta';
|
||||
import { initEmscriptenModule } from '../util';
|
||||
import { initWasmModule } from '../util';
|
||||
|
||||
let emscriptenModule: Promise<OptiPngModule>;
|
||||
|
||||
export async function compress(data: BufferSource, options: EncodeOptions): Promise<ArrayBuffer> {
|
||||
if (!emscriptenModule) emscriptenModule = initEmscriptenModule(optipng, wasmUrl);
|
||||
if (!emscriptenModule) emscriptenModule = initWasmModule(optipng, wasmUrl);
|
||||
|
||||
const module = await emscriptenModule;
|
||||
const resultView = module.compress(data, options);
|
||||
|
||||
13
src/codecs/oxipng/encoder-meta.ts
Normal file
13
src/codecs/oxipng/encoder-meta.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
export interface EncodeOptions {
|
||||
level: number;
|
||||
}
|
||||
export interface EncoderState { type: typeof type; options: EncodeOptions; }
|
||||
|
||||
export const type = 'oxipng';
|
||||
export const label = 'OxiPNG';
|
||||
export const mimeType = 'image/png';
|
||||
export const extension = 'png';
|
||||
|
||||
export const defaultOptions: EncodeOptions = {
|
||||
level: 6,
|
||||
};
|
||||
18
src/codecs/oxipng/encoder.ts
Normal file
18
src/codecs/oxipng/encoder.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
import * as oxipng from '../../../codecs/oxipng/pkg/oxipng_manual';
|
||||
import { EncodeOptions } from './encoder-meta';
|
||||
|
||||
export async function compress(data: BufferSource, { level }: EncodeOptions): Promise<ArrayBuffer> {
|
||||
let buffer: ArrayBuffer;
|
||||
|
||||
if (ArrayBuffer.isView(data)) {
|
||||
buffer = data.buffer;
|
||||
} else {
|
||||
buffer = data;
|
||||
}
|
||||
debugger;
|
||||
const resultView = await oxipng.compress(new Uint8Array(buffer), level);
|
||||
const result = new Uint8Array(resultView);
|
||||
|
||||
// wasm can’t run on SharedArrayBuffers, so we hard-cast to ArrayBuffer.
|
||||
return result.buffer as ArrayBuffer;
|
||||
}
|
||||
42
src/codecs/oxipng/options.tsx
Normal file
42
src/codecs/oxipng/options.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import { h, Component } from 'preact';
|
||||
import { bind } from '../../lib/initial-util';
|
||||
import { inputFieldValueAsNumber, preventDefault } 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 OxiPNGEncoderOptions 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} onSubmit={preventDefault}>
|
||||
<div class={style.optionOneCell}>
|
||||
<Range
|
||||
name="level"
|
||||
min="0"
|
||||
max="9"
|
||||
step="1"
|
||||
value={options.level}
|
||||
onInput={this.onChange}
|
||||
>
|
||||
Effort:
|
||||
</Range>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -5,7 +5,8 @@ async function mozjpegEncode(
|
||||
): Promise<ArrayBuffer> {
|
||||
const { encode } = await import(
|
||||
/* webpackChunkName: "process-mozjpeg-enc" */
|
||||
'../mozjpeg/encoder');
|
||||
'../mozjpeg/encoder',
|
||||
);
|
||||
return encode(data, options);
|
||||
}
|
||||
|
||||
@@ -14,7 +15,8 @@ async function quantize(
|
||||
): Promise<ImageData> {
|
||||
const { process } = await import(
|
||||
/* webpackChunkName: "process-imagequant" */
|
||||
'../imagequant/processor');
|
||||
'../imagequant/processor',
|
||||
);
|
||||
return process(data, opts);
|
||||
}
|
||||
|
||||
@@ -23,27 +25,29 @@ async function rotate(
|
||||
): Promise<ImageData> {
|
||||
const { rotate } = await import(
|
||||
/* webpackChunkName: "process-rotate" */
|
||||
'../rotate/processor');
|
||||
'../rotate/processor',
|
||||
);
|
||||
|
||||
return rotate(data, opts);
|
||||
}
|
||||
|
||||
async function resize(
|
||||
data: ImageData, opts: import('../resize/processor-meta').WorkerResizeOptions,
|
||||
): Promise<ImageData> {
|
||||
const { resize } = await import(
|
||||
/* webpackChunkName: "process-resize" */
|
||||
'../resize/processor');
|
||||
|
||||
return resize(data, opts);
|
||||
}
|
||||
|
||||
async function optiPngEncode(
|
||||
data: BufferSource, options: import('../optipng/encoder-meta').EncodeOptions,
|
||||
): Promise<ArrayBuffer> {
|
||||
const { compress } = await import(
|
||||
/* webpackChunkName: "process-optipng" */
|
||||
'../optipng/encoder');
|
||||
'../optipng/encoder',
|
||||
);
|
||||
return compress(data, options);
|
||||
}
|
||||
|
||||
async function oxiPngEncode(
|
||||
data: BufferSource, options: import('../oxipng/encoder-meta').EncodeOptions,
|
||||
): Promise<ArrayBuffer> {
|
||||
const { compress } = await import(
|
||||
/* webpackChunkName: "process-optipng" */
|
||||
'../oxipng/encoder',
|
||||
);
|
||||
return compress(data, options);
|
||||
}
|
||||
|
||||
@@ -52,18 +56,28 @@ async function webpEncode(
|
||||
): Promise<ArrayBuffer> {
|
||||
const { encode } = await import(
|
||||
/* webpackChunkName: "process-webp-enc" */
|
||||
'../webp/encoder');
|
||||
'../webp/encoder',
|
||||
);
|
||||
return encode(data, options);
|
||||
}
|
||||
|
||||
async function webpDecode(data: ArrayBuffer): Promise<ImageData> {
|
||||
const { decode } = await import(
|
||||
/* webpackChunkName: "process-webp-dec" */
|
||||
'../webp/decoder');
|
||||
'../webp/decoder',
|
||||
);
|
||||
return decode(data);
|
||||
}
|
||||
|
||||
const exports = { mozjpegEncode, quantize, rotate, resize, optiPngEncode, webpEncode, webpDecode };
|
||||
const exports = {
|
||||
mozjpegEncode,
|
||||
quantize,
|
||||
rotate,
|
||||
optiPngEncode,
|
||||
oxiPngEncode,
|
||||
webpEncode,
|
||||
webpDecode,
|
||||
};
|
||||
export type ProcessorWorkerApi = typeof exports;
|
||||
|
||||
expose(exports, self);
|
||||
|
||||
@@ -3,11 +3,12 @@ import { QuantizeOptions } from './imagequant/processor-meta';
|
||||
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 OxiPNGEncoderOptions } from './oxipng/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 { BrowserResizeOptions, VectorResizeOptions } from './resize/processor-meta';
|
||||
import { browserResize, vectorResize } from './resize/processor-sync';
|
||||
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';
|
||||
@@ -130,13 +131,6 @@ export default class Processor {
|
||||
return this._workerApi!.rotate(data, opts);
|
||||
}
|
||||
|
||||
@Processor._processingJob({ needsWorker: true })
|
||||
workerResize(
|
||||
data: ImageData, opts: import('./resize/processor-meta').WorkerResizeOptions,
|
||||
): Promise<ImageData> {
|
||||
return this._workerApi!.resize(data, opts);
|
||||
}
|
||||
|
||||
@Processor._processingJob({ needsWorker: true })
|
||||
mozjpegEncode(
|
||||
data: ImageData, opts: MozJPEGEncoderOptions,
|
||||
@@ -154,6 +148,16 @@ export default class Processor {
|
||||
return this._workerApi!.optiPngEncode(pngBuffer, opts);
|
||||
}
|
||||
|
||||
@Processor._processingJob({ needsWorker: true })
|
||||
async oxiPngEncode(
|
||||
data: ImageData, opts: OxiPNGEncoderOptions,
|
||||
): Promise<ArrayBuffer> {
|
||||
// OptiPNG expects PNG input.
|
||||
const pngBlob = await canvasEncode(data, 'image/png');
|
||||
const pngBuffer = await blobToArrayBuffer(pngBlob);
|
||||
return this._workerApi!.oxiPngEncode(pngBuffer, opts);
|
||||
}
|
||||
|
||||
@Processor._processingJob({ needsWorker: true })
|
||||
webpEncode(data: ImageData, opts: WebPEncoderOptions): Promise<ArrayBuffer> {
|
||||
return this._workerApi!.webpEncode(data, opts);
|
||||
@@ -209,9 +213,9 @@ export default class Processor {
|
||||
|
||||
// Synchronous jobs
|
||||
|
||||
resize(data: ImageData, opts: BrowserResizeOptions) {
|
||||
resize(data: ImageData, opts: BitmapResizeOptions) {
|
||||
this.abortCurrent();
|
||||
return browserResize(data, opts);
|
||||
return resize(data, opts);
|
||||
}
|
||||
|
||||
vectorResize(data: HTMLImageElement, opts: VectorResizeOptions) {
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
import { h, Component } from 'preact';
|
||||
import linkState from 'linkstate';
|
||||
import { bind, linkRef } from '../../lib/initial-util';
|
||||
import {
|
||||
inputFieldValueAsNumber, inputFieldValue, preventDefault, inputFieldChecked,
|
||||
} from '../../lib/util';
|
||||
import { ResizeOptions, isWorkerOptions } from './processor-meta';
|
||||
import { inputFieldValueAsNumber, inputFieldValue, preventDefault } 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';
|
||||
@@ -40,8 +38,6 @@ export default class ResizerOptions extends Component<Props, State> {
|
||||
width: inputFieldValueAsNumber(width),
|
||||
height: inputFieldValueAsNumber(height),
|
||||
method: form.resizeMethod.value,
|
||||
premultiply: inputFieldChecked(form.premultiply, true),
|
||||
linearRGB: inputFieldChecked(form.linearRGB, true),
|
||||
// Casting, as the formfield only returns the correct values.
|
||||
fitMethod: inputFieldValue(form.fitMethod, options.fitMethod) as ResizeOptions['fitMethod'],
|
||||
};
|
||||
@@ -91,10 +87,6 @@ export default class ResizerOptions extends Component<Props, State> {
|
||||
onChange={this.onChange}
|
||||
>
|
||||
{isVector && <option value="vector">Vector</option>}
|
||||
<option value="lanczos3">Lanczos3</option>
|
||||
<option value="mitchell">Mitchell</option>
|
||||
<option value="catrom">Catmull-Rom</option>
|
||||
<option value="triangle">Triangle (bilinear)</option>
|
||||
<option value="browser-pixelated">Browser pixelated</option>
|
||||
<option value="browser-low">Browser low quality</option>
|
||||
<option value="browser-medium">Browser medium quality</option>
|
||||
@@ -125,30 +117,6 @@ export default class ResizerOptions extends Component<Props, State> {
|
||||
onInput={this.onHeightInput}
|
||||
/>
|
||||
</label>
|
||||
<Expander>
|
||||
{isWorkerOptions(options) ?
|
||||
<label class={style.optionInputFirst}>
|
||||
<Checkbox
|
||||
name="premultiply"
|
||||
checked={options.premultiply}
|
||||
onChange={this.onChange}
|
||||
/>
|
||||
Premultiply alpha channel
|
||||
</label>
|
||||
: null
|
||||
}
|
||||
{isWorkerOptions(options) ?
|
||||
<label class={style.optionInputFirst}>
|
||||
<Checkbox
|
||||
name="linearRGB"
|
||||
checked={options.linearRGB}
|
||||
onChange={this.onChange}
|
||||
/>
|
||||
Linear RGB
|
||||
</label>
|
||||
: null
|
||||
}
|
||||
</Expander>
|
||||
<label class={style.optionInputFirst}>
|
||||
<Checkbox
|
||||
name="maintainAspect"
|
||||
|
||||
@@ -1,46 +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 BitmapResizeMethods = 'browser-pixelated' | 'browser-low' | 'browser-medium' | 'browser-high';
|
||||
|
||||
export type ResizeOptions = BrowserResizeOptions | WorkerResizeOptions | VectorResizeOptions;
|
||||
|
||||
export interface ResizeOptionsCommon {
|
||||
export interface ResizeOptions {
|
||||
width: number;
|
||||
height: number;
|
||||
method: 'vector' | BitmapResizeMethods;
|
||||
fitMethod: 'stretch' | 'contain';
|
||||
}
|
||||
|
||||
export interface BrowserResizeOptions extends ResizeOptionsCommon {
|
||||
method: BrowserResizeMethods;
|
||||
export interface BitmapResizeOptions extends ResizeOptions {
|
||||
method: BitmapResizeMethods;
|
||||
}
|
||||
|
||||
export interface WorkerResizeOptions extends ResizeOptionsCommon {
|
||||
method: WorkerResizeMethods;
|
||||
premultiply: boolean;
|
||||
linearRGB: boolean;
|
||||
}
|
||||
|
||||
export interface VectorResizeOptions extends ResizeOptionsCommon {
|
||||
export interface VectorResizeOptions extends ResizeOptions {
|
||||
method: 'vector';
|
||||
}
|
||||
|
||||
/**
|
||||
* Return whether a set of options are worker resize options.
|
||||
*
|
||||
* @param opts
|
||||
*/
|
||||
export function isWorkerOptions(opts: ResizeOptions): opts is WorkerResizeOptions {
|
||||
return (workerResizeMethods as string[]).includes(opts.method);
|
||||
}
|
||||
|
||||
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: 'lanczos3',
|
||||
method: 'browser-high',
|
||||
fitMethod: 'stretch',
|
||||
premultiply: true,
|
||||
linearRGB: true,
|
||||
};
|
||||
|
||||
@@ -1,35 +0,0 @@
|
||||
import { nativeResize, NativeResizeMethod, drawableToImageData } from '../../lib/util';
|
||||
import { BrowserResizeOptions, VectorResizeOptions } from './processor-meta';
|
||||
import { getContainOffsets } from './util';
|
||||
|
||||
export function browserResize(data: ImageData, opts: BrowserResizeOptions): ImageData {
|
||||
let sx = 0;
|
||||
let sy = 0;
|
||||
let sw = data.width;
|
||||
let sh = data.height;
|
||||
|
||||
if (opts.fitMethod === 'contain') {
|
||||
({ sx, sy, sw, sh } = getContainOffsets(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 === 'contain') {
|
||||
({ sx, sy, sw, sh } = getContainOffsets(sw, sh, opts.width, opts.height));
|
||||
}
|
||||
|
||||
return drawableToImageData(data, {
|
||||
sx, sy, sw, sh,
|
||||
width: opts.width, height: opts.height,
|
||||
});
|
||||
}
|
||||
@@ -1,52 +1,49 @@
|
||||
import wasmUrl from '../../../codecs/resize/pkg/resize_bg.wasm';
|
||||
import '../../../codecs/resize/pkg/resize';
|
||||
import { WorkerResizeOptions } from './processor-meta';
|
||||
import { getContainOffsets } from './util';
|
||||
import { nativeResize, NativeResizeMethod, drawableToImageData } from '../../lib/util';
|
||||
import { BitmapResizeOptions, VectorResizeOptions } from './processor-meta';
|
||||
|
||||
interface WasmBindgenExports {
|
||||
resize: typeof import('../../../codecs/resize/pkg/resize').resize;
|
||||
}
|
||||
function getContainOffsets(sw: number, sh: number, dw: number, dh: number) {
|
||||
const currentAspect = sw / sh;
|
||||
const endAspect = dw / dh;
|
||||
|
||||
type WasmBindgen = ((url: string) => Promise<void>) & WasmBindgenExports;
|
||||
|
||||
declare var wasm_bindgen: WasmBindgen;
|
||||
|
||||
const ready = wasm_bindgen(wasmUrl);
|
||||
|
||||
function crop(data: ImageData, sx: number, sy: number, sw: number, sh: number): ImageData {
|
||||
const inputPixels = new Uint32Array(data.data.buffer);
|
||||
|
||||
// Copy within the same buffer for speed and memory efficiency.
|
||||
for (let y = 0; y < sh; y += 1) {
|
||||
const start = ((y + sy) * data.width) + sx;
|
||||
inputPixels.copyWithin(y * sw, start, start + sw);
|
||||
if (endAspect > currentAspect) {
|
||||
const newSh = sw / endAspect;
|
||||
const newSy = (sh - newSh) / 2;
|
||||
return { sw, sh: newSh, sx: 0, sy: newSy };
|
||||
}
|
||||
|
||||
return new ImageData(
|
||||
new Uint8ClampedArray(inputPixels.buffer.slice(0, sw * sh * 4)),
|
||||
sw, sh,
|
||||
);
|
||||
const newSw = sh * endAspect;
|
||||
const newSx = (sw - newSw) / 2;
|
||||
return { sh, sw: newSw, sx: newSx, sy: 0 };
|
||||
}
|
||||
|
||||
/** Resize methods by index */
|
||||
const resizeMethods: WorkerResizeOptions['method'][] = [
|
||||
'triangle', 'catrom', 'mitchell', 'lanczos3',
|
||||
];
|
||||
|
||||
export async function resize(data: ImageData, opts: WorkerResizeOptions): Promise<ImageData> {
|
||||
let input = data;
|
||||
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 === 'contain') {
|
||||
const { sx, sy, sw, sh } = getContainOffsets(data.width, data.height, opts.width, opts.height);
|
||||
input = crop(input, Math.round(sx), Math.round(sy), Math.round(sw), Math.round(sh));
|
||||
({ sx, sy, sw, sh } = getContainOffsets(sw, sh, opts.width, opts.height));
|
||||
}
|
||||
|
||||
await ready;
|
||||
|
||||
const result = wasm_bindgen.resize(
|
||||
new Uint8Array(input.data.buffer), input.width, input.height, opts.width, opts.height,
|
||||
resizeMethods.indexOf(opts.method), opts.premultiply, opts.linearRGB,
|
||||
return nativeResize(
|
||||
data, sx, sy, sw, sh, opts.width, opts.height,
|
||||
opts.method.slice('browser-'.length) as NativeResizeMethod,
|
||||
);
|
||||
|
||||
return new ImageData(new Uint8ClampedArray(result.buffer), opts.width, opts.height);
|
||||
}
|
||||
|
||||
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 === 'contain') {
|
||||
({ sx, sy, sw, sh } = getContainOffsets(sw, sh, opts.width, opts.height));
|
||||
}
|
||||
|
||||
return drawableToImageData(data, {
|
||||
sx, sy, sw, sh,
|
||||
width: opts.width, height: opts.height,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
export function getContainOffsets(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 };
|
||||
}
|
||||
@@ -3,10 +3,3 @@ export interface RotateOptions {
|
||||
}
|
||||
|
||||
export const defaultOptions: RotateOptions = { rotate: 0 };
|
||||
|
||||
export interface RotateModuleInstance {
|
||||
exports: {
|
||||
memory: WebAssembly.Memory;
|
||||
rotate(width: number, height: number, rotate: 0 | 90 | 180 | 270): void;
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,43 +1,73 @@
|
||||
import wasmUrl from '../../../codecs/rotate/rotate.wasm';
|
||||
import { RotateOptions, RotateModuleInstance } from './processor-meta';
|
||||
import { RotateOptions } from './processor-meta';
|
||||
|
||||
// We are loading a 500B module here. Loading the code to feature-detect
|
||||
// `instantiateStreaming` probably takes longer to load than the time we save by
|
||||
// using `instantiateStreaming` in the first place. So let’s just use
|
||||
// `ArrayBuffer`s here.
|
||||
const instancePromise = fetch(wasmUrl)
|
||||
.then(r => r.arrayBuffer())
|
||||
.then(buf => WebAssembly.instantiate(buf));
|
||||
export function rotate(data: ImageData, opts: RotateOptions): ImageData {
|
||||
const { rotate } = opts;
|
||||
const flipDimensions = rotate % 180 !== 0;
|
||||
const { width: inputWidth, height: inputHeight } = data;
|
||||
const outputWidth = flipDimensions ? inputHeight : inputWidth;
|
||||
const outputHeight = flipDimensions ? inputWidth : inputHeight;
|
||||
const out = new ImageData(outputWidth, outputHeight);
|
||||
let i = 0;
|
||||
|
||||
export async function rotate(
|
||||
data: ImageData,
|
||||
opts: RotateOptions,
|
||||
): Promise<ImageData> {
|
||||
const { instance } = (await instancePromise) as {
|
||||
instance: RotateModuleInstance;
|
||||
};
|
||||
// In the straight-copy case, d1 is x, d2 is y.
|
||||
// x starts at 0 and increases.
|
||||
// y starts at 0 and increases.
|
||||
let d1Start = 0;
|
||||
let d1Limit = inputWidth;
|
||||
let d1Advance = 1;
|
||||
let d1Multiplier = 1;
|
||||
let d2Start = 0;
|
||||
let d2Limit = inputHeight;
|
||||
let d2Advance = 1;
|
||||
let d2Multiplier = inputWidth;
|
||||
|
||||
// Number of wasm memory pages (á 64KiB) needed to store the image twice.
|
||||
const bytesPerImage = data.width * data.height * 4;
|
||||
const numPagesNeeded = Math.ceil((bytesPerImage * 2 + 8) / (64 * 1024));
|
||||
// Only count full pages, just to be safe.
|
||||
const numPagesAvailable = Math.floor(
|
||||
instance.exports.memory.buffer.byteLength / (64 * 1024),
|
||||
);
|
||||
const additionalPagesToAllocate = numPagesNeeded - numPagesAvailable;
|
||||
|
||||
if (additionalPagesToAllocate > 0) {
|
||||
instance.exports.memory.grow(additionalPagesToAllocate);
|
||||
if (rotate === 90) {
|
||||
// d1 is y, d2 is x.
|
||||
// y starts at its max value and decreases.
|
||||
// x starts at 0 and increases.
|
||||
d1Start = inputHeight - 1;
|
||||
d1Limit = inputHeight;
|
||||
d1Advance = -1;
|
||||
d1Multiplier = inputWidth;
|
||||
d2Start = 0;
|
||||
d2Limit = inputWidth;
|
||||
d2Advance = 1;
|
||||
d2Multiplier = 1;
|
||||
} else if (rotate === 180) {
|
||||
// d1 is x, d2 is y.
|
||||
// x starts at its max and decreases.
|
||||
// y starts at its max and decreases.
|
||||
d1Start = inputWidth - 1;
|
||||
d1Limit = inputWidth;
|
||||
d1Advance = -1;
|
||||
d1Multiplier = 1;
|
||||
d2Start = inputHeight - 1;
|
||||
d2Limit = inputHeight;
|
||||
d2Advance = -1;
|
||||
d2Multiplier = inputWidth;
|
||||
} else if (rotate === 270) {
|
||||
// d1 is y, d2 is x.
|
||||
// y starts at 0 and increases.
|
||||
// x starts at its max and decreases.
|
||||
d1Start = 0;
|
||||
d1Limit = inputHeight;
|
||||
d1Advance = 1;
|
||||
d1Multiplier = inputWidth;
|
||||
d2Start = inputWidth - 1;
|
||||
d2Limit = inputWidth;
|
||||
d2Advance = -1;
|
||||
d2Multiplier = 1;
|
||||
}
|
||||
const view = new Uint8ClampedArray(instance.exports.memory.buffer);
|
||||
view.set(data.data, 8);
|
||||
|
||||
instance.exports.rotate(data.width, data.height, opts.rotate);
|
||||
const inB = new Uint32Array(data.data.buffer);
|
||||
const outB = new Uint32Array(out.data.buffer);
|
||||
for (let d2 = d2Start; d2 >= 0 && d2 < d2Limit; d2 += d2Advance) {
|
||||
for (let d1 = d1Start; d1 >= 0 && d1 < d1Limit; d1 += d1Advance) {
|
||||
const start = ((d1 * d1Multiplier) + (d2 * d2Multiplier));
|
||||
outB[i] = inB[start];
|
||||
i += 1;
|
||||
}
|
||||
}
|
||||
|
||||
const flipDimensions = opts.rotate % 180 !== 0;
|
||||
return new ImageData(
|
||||
view.slice(bytesPerImage + 8, bytesPerImage * 2 + 8),
|
||||
flipDimensions ? data.height : data.width,
|
||||
flipDimensions ? data.width : data.height,
|
||||
);
|
||||
return out;
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@ type ModuleFactory<M extends EmscriptenWasm.Module> = (
|
||||
opts: EmscriptenWasm.ModuleOpts,
|
||||
) => M;
|
||||
|
||||
export function initEmscriptenModule<T extends EmscriptenWasm.Module>(
|
||||
export function initWasmModule<T extends EmscriptenWasm.Module>(
|
||||
moduleFactory: ModuleFactory<T>,
|
||||
wasmUrl: string,
|
||||
): Promise<T> {
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import webp_dec, { WebPModule } from '../../../codecs/webp_dec/webp_dec';
|
||||
import wasmUrl from '../../../codecs/webp_dec/webp_dec.wasm';
|
||||
import { initEmscriptenModule } from '../util';
|
||||
import { initWasmModule } from '../util';
|
||||
|
||||
let emscriptenModule: Promise<WebPModule>;
|
||||
|
||||
export async function decode(data: ArrayBuffer): Promise<ImageData> {
|
||||
if (!emscriptenModule) emscriptenModule = initEmscriptenModule(webp_dec, wasmUrl);
|
||||
if (!emscriptenModule) emscriptenModule = initWasmModule(webp_dec, wasmUrl);
|
||||
|
||||
const module = await emscriptenModule;
|
||||
const rawImage = module.decode(data);
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import webp_enc, { WebPModule } from '../../../codecs/webp_enc/webp_enc';
|
||||
import wasmUrl from '../../../codecs/webp_enc/webp_enc.wasm';
|
||||
import { EncodeOptions } from './encoder-meta';
|
||||
import { initEmscriptenModule } from '../util';
|
||||
import { initWasmModule } from '../util';
|
||||
|
||||
let emscriptenModule: Promise<WebPModule>;
|
||||
|
||||
export async function encode(data: ImageData, options: EncodeOptions): Promise<ArrayBuffer> {
|
||||
if (!emscriptenModule) emscriptenModule = initEmscriptenModule(webp_enc, wasmUrl);
|
||||
if (!emscriptenModule) emscriptenModule = initWasmModule(webp_enc, wasmUrl);
|
||||
|
||||
const module = await emscriptenModule;
|
||||
const resultView = module.encode(data.data, data.width, data.height, options);
|
||||
|
||||
@@ -1,106 +0,0 @@
|
||||
import App from './index';
|
||||
import { SquooshStartEventType, SquooshSideEventType } from '../compress/index';
|
||||
|
||||
import { expose } from 'comlink';
|
||||
|
||||
export interface ReadyMessage {
|
||||
type: 'READY';
|
||||
version: string;
|
||||
}
|
||||
|
||||
export function exposeAPI(app: App) {
|
||||
if (window === top) {
|
||||
// Someone opened Squoosh in a window rather than an iframe.
|
||||
// This can be deceiving and we won’t allow that.
|
||||
return;
|
||||
}
|
||||
self.parent.postMessage({ type: 'READY', version: MAJOR_VERSION }, '*');
|
||||
self.addEventListener('message', (event: MessageEvent) => {
|
||||
if (event.data !== 'READY?') {
|
||||
return;
|
||||
}
|
||||
event.stopImmediatePropagation();
|
||||
self.parent.postMessage({ type: 'READY', version: MAJOR_VERSION } as ReadyMessage, '*');
|
||||
});
|
||||
expose(new API(app), self.parent);
|
||||
}
|
||||
|
||||
function addRemovableGlobalListener<
|
||||
K extends keyof GlobalEventHandlersEventMap
|
||||
>(name: K, listener: (ev: GlobalEventHandlersEventMap[K]) => void): () => void {
|
||||
document.addEventListener(name, listener);
|
||||
return () => document.removeEventListener(name, listener);
|
||||
}
|
||||
|
||||
/**
|
||||
* The API class contains the methods that are exposed via Comlink to the
|
||||
* outside world.
|
||||
*/
|
||||
export class API {
|
||||
/**
|
||||
* Internal constructor. Do not call.
|
||||
*/
|
||||
constructor(private _app: App) {}
|
||||
|
||||
/**
|
||||
* Loads a given file into Squoosh.
|
||||
* @param blob The `Blob` to load
|
||||
* @param name The name of the file. The extension of this name will be used
|
||||
* to deterime which decoder to use.
|
||||
*/
|
||||
setFile(blob: Blob, name: string) {
|
||||
return new Promise((resolve) => {
|
||||
document.addEventListener(SquooshStartEventType.START, () => resolve(), {
|
||||
once: true,
|
||||
});
|
||||
this._app.openFile(new File([blob], name));
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Grabs one side from Squoosh as a `File`.
|
||||
* @param side The side which to grab. 0 = left, 1 = right.
|
||||
*/
|
||||
async getBlob(side: 0 | 1) {
|
||||
if (!this._app.state.file || !this._app.compressInstance) {
|
||||
throw new Error('No file has been loaded');
|
||||
}
|
||||
if (
|
||||
!this._app.compressInstance!.state.loading &&
|
||||
!this._app.compressInstance!.state.sides[side].loading
|
||||
) {
|
||||
return this._app.compressInstance!.state.sides[side].file;
|
||||
}
|
||||
|
||||
const listeners: ReturnType<typeof addRemovableGlobalListener>[] = [];
|
||||
|
||||
const r = new Promise((resolve, reject) => {
|
||||
listeners.push(
|
||||
addRemovableGlobalListener(SquooshSideEventType.DONE, (event) => {
|
||||
if (event.side !== side) {
|
||||
return;
|
||||
}
|
||||
resolve(this._app.compressInstance!.state.sides[side].file);
|
||||
}),
|
||||
);
|
||||
listeners.push(
|
||||
addRemovableGlobalListener(SquooshSideEventType.ABORT, (event) => {
|
||||
if (event.side !== side) {
|
||||
return;
|
||||
}
|
||||
reject(new DOMException('Aborted', 'AbortError'));
|
||||
}),
|
||||
);
|
||||
listeners.push(
|
||||
addRemovableGlobalListener(SquooshSideEventType.ERROR, (event) => {
|
||||
if (event.side !== side) {
|
||||
return;
|
||||
}
|
||||
reject(event.error);
|
||||
}),
|
||||
);
|
||||
});
|
||||
r.then(() => listeners.forEach(remove => remove()));
|
||||
return r;
|
||||
}
|
||||
}
|
||||
@@ -13,10 +13,12 @@ const ROUTE_EDITOR = '/editor';
|
||||
|
||||
const compressPromise = import(
|
||||
/* webpackChunkName: "main-app" */
|
||||
'../compress');
|
||||
'../compress',
|
||||
);
|
||||
const offlinerPromise = import(
|
||||
/* webpackChunkName: "offliner" */
|
||||
'../../lib/offliner');
|
||||
'../../lib/offliner',
|
||||
);
|
||||
|
||||
function back() {
|
||||
window.history.back();
|
||||
@@ -36,7 +38,6 @@ export default class App extends Component<Props, State> {
|
||||
file: undefined,
|
||||
Compress: undefined,
|
||||
};
|
||||
compressInstance?: import('../compress').default;
|
||||
|
||||
snackbar?: SnackBarElement;
|
||||
|
||||
@@ -70,27 +71,19 @@ export default class App extends Component<Props, State> {
|
||||
});
|
||||
|
||||
window.addEventListener('popstate', this.onPopState);
|
||||
import(
|
||||
/* webpackChunkName: "client-api" */
|
||||
'./client-api').then(m => m.exposeAPI(this));
|
||||
}
|
||||
|
||||
@bind openFile(file: File | Fileish) {
|
||||
this.openEditor();
|
||||
this.setState({ file });
|
||||
}
|
||||
|
||||
@bind
|
||||
private onFileDrop({ files }: FileDropEvent) {
|
||||
if (!files || files.length === 0) return;
|
||||
const file = files[0];
|
||||
private onFileDrop({ file }: FileDropEvent) {
|
||||
if (!file) return;
|
||||
this.openEditor();
|
||||
this.setState({ file });
|
||||
}
|
||||
|
||||
@bind
|
||||
private onIntroPickFile(file: File | Fileish) {
|
||||
return this.openFile(file);
|
||||
this.openEditor();
|
||||
this.setState({ file });
|
||||
}
|
||||
|
||||
@bind
|
||||
@@ -118,12 +111,7 @@ export default class App extends Component<Props, State> {
|
||||
{!isEditorOpen
|
||||
? <Intro onFile={this.onIntroPickFile} showSnack={this.showSnack} />
|
||||
: (Compress)
|
||||
? <Compress
|
||||
ref={i => this.compressInstance = i}
|
||||
file={file!}
|
||||
showSnack={this.showSnack}
|
||||
onBack={back}
|
||||
/>
|
||||
? <Compress file={file!} showSnack={this.showSnack} onBack={back} />
|
||||
: <loading-spinner class={style.appLoader}/>
|
||||
}
|
||||
<snack-bar ref={linkRef(this, 'snackbar')} />
|
||||
|
||||
@@ -8,6 +8,7 @@ import Options from '../Options';
|
||||
import ResultCache from './result-cache';
|
||||
import * as identity from '../../codecs/identity/encoder-meta';
|
||||
import * as optiPNG from '../../codecs/optipng/encoder-meta';
|
||||
import * as oxiPNG from '../../codecs/oxipng/encoder-meta';
|
||||
import * as mozJPEG from '../../codecs/mozjpeg/encoder-meta';
|
||||
import * as webP from '../../codecs/webp/encoder-meta';
|
||||
import * as browserPNG from '../../codecs/browser-png/encoder-meta';
|
||||
@@ -18,65 +19,26 @@ import * as browserTIFF from '../../codecs/browser-tiff/encoder-meta';
|
||||
import * as browserJP2 from '../../codecs/browser-jp2/encoder-meta';
|
||||
import * as browserBMP from '../../codecs/browser-bmp/encoder-meta';
|
||||
import * as browserPDF from '../../codecs/browser-pdf/encoder-meta';
|
||||
import { EncoderState, EncoderType, EncoderOptions, encoderMap } from '../../codecs/encoders';
|
||||
import { PreprocessorState, defaultPreprocessorState } from '../../codecs/preprocessors';
|
||||
import {
|
||||
EncoderState,
|
||||
EncoderType,
|
||||
EncoderOptions,
|
||||
encoderMap,
|
||||
} from '../../codecs/encoders';
|
||||
import {
|
||||
PreprocessorState,
|
||||
defaultPreprocessorState,
|
||||
} from '../../codecs/preprocessors';
|
||||
import { decodeImage } from '../../codecs/decoders';
|
||||
import { cleanMerge, cleanSet } from '../../lib/clean-modify';
|
||||
import Processor from '../../codecs/processor';
|
||||
import {
|
||||
BrowserResizeOptions, isWorkerOptions as isWorkerResizeOptions,
|
||||
} from '../../codecs/resize/processor-meta';
|
||||
import { VectorResizeOptions, BitmapResizeOptions } from '../../codecs/resize/processor-meta';
|
||||
import './custom-els/MultiPanel';
|
||||
import Results from '../results';
|
||||
import { ExpandIcon, CopyAcrossIconProps } from '../../lib/icons';
|
||||
import SnackBarElement from '../../lib/SnackBar';
|
||||
import { InputProcessorState, defaultInputProcessorState } from '../../codecs/input-processors';
|
||||
|
||||
// Safari and Edge don't quite support extending Event, this works around it.
|
||||
function fixExtendedEvent(instance: Event, type: Function) {
|
||||
if (!(instance instanceof type)) {
|
||||
Object.setPrototypeOf(instance, type.prototype);
|
||||
}
|
||||
}
|
||||
export enum SquooshStartEventType {
|
||||
START = 'squoosh:start',
|
||||
}
|
||||
export class SquooshStartEvent extends Event {
|
||||
constructor(init?: EventInit) {
|
||||
super(SquooshStartEventType.START, init);
|
||||
fixExtendedEvent(this, SquooshStartEvent);
|
||||
}
|
||||
}
|
||||
|
||||
export const enum SquooshSideEventType {
|
||||
DONE = 'squoosh:done',
|
||||
ABORT = 'squoosh:abort',
|
||||
ERROR = 'squoosh:error',
|
||||
}
|
||||
export interface SquooshSideEventInit extends EventInit {
|
||||
side: 0|1;
|
||||
error?: Error;
|
||||
}
|
||||
export class SquooshSideEvent extends Event {
|
||||
public side: 0|1;
|
||||
public error?: Error;
|
||||
constructor(name: SquooshSideEventType, init: SquooshSideEventInit) {
|
||||
super(name, init);
|
||||
fixExtendedEvent(this, SquooshSideEvent);
|
||||
this.side = init.side;
|
||||
this.error = init.error;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface GlobalEventHandlersEventMap {
|
||||
[SquooshStartEventType.START]: SquooshStartEvent;
|
||||
[SquooshSideEventType.DONE]: SquooshSideEvent;
|
||||
[SquooshSideEventType.ABORT]: SquooshSideEvent;
|
||||
[SquooshSideEventType.ERROR]: SquooshSideEvent;
|
||||
}
|
||||
}
|
||||
|
||||
export interface SourceImage {
|
||||
file: File | Fileish;
|
||||
decoded: ImageData;
|
||||
@@ -149,12 +111,10 @@ async function preprocessImage(
|
||||
if (preprocessData.resize.method === 'vector' && source.vectorImage) {
|
||||
result = processor.vectorResize(
|
||||
source.vectorImage,
|
||||
preprocessData.resize,
|
||||
preprocessData.resize as VectorResizeOptions,
|
||||
);
|
||||
} else if (isWorkerResizeOptions(preprocessData.resize)) {
|
||||
result = await processor.workerResize(result, preprocessData.resize);
|
||||
} else {
|
||||
result = processor.resize(result, preprocessData.resize as BrowserResizeOptions);
|
||||
result = processor.resize(result, preprocessData.resize as BitmapResizeOptions);
|
||||
}
|
||||
}
|
||||
if (preprocessData.quantizer.enabled) {
|
||||
@@ -172,6 +132,7 @@ async function compressImage(
|
||||
const compressedData = await (() => {
|
||||
switch (encodeData.type) {
|
||||
case optiPNG.type: return processor.optiPngEncode(image, encodeData.options);
|
||||
case oxiPNG.type: return processor.oxiPngEncode(image, encodeData.options);
|
||||
case mozJPEG.type: return processor.mozjpegEncode(image, encodeData.options);
|
||||
case webP.type: return processor.webpEncode(image, encodeData.options);
|
||||
case browserPNG.type: return processor.browserPngEncode(image);
|
||||
@@ -440,7 +401,8 @@ export default class Compress extends Component<Props, State> {
|
||||
// Either processor is good enough here.
|
||||
const processor = this.leftProcessor;
|
||||
|
||||
this.setState({ loadingCounter, loading: true }, this.signalLoadingStart);
|
||||
this.setState({ loadingCounter, loading: true });
|
||||
|
||||
// Abort any current encode jobs, as they're redundant now.
|
||||
this.leftProcessor.abortCurrent();
|
||||
this.rightProcessor.abortCurrent();
|
||||
@@ -481,7 +443,7 @@ export default class Compress extends Component<Props, State> {
|
||||
newState = cleanMerge(newState, `sides.${i}.latestSettings.preprocessorState.resize`, {
|
||||
width: processed.width,
|
||||
height: processed.height,
|
||||
method: vectorImage ? 'vector' : 'lanczos3',
|
||||
method: vectorImage ? 'vector' : 'browser-high',
|
||||
});
|
||||
}
|
||||
|
||||
@@ -518,35 +480,6 @@ export default class Compress extends Component<Props, State> {
|
||||
);
|
||||
}
|
||||
|
||||
@bind
|
||||
private dispatchSideEvent(type: SquooshSideEventType, init: SquooshSideEventInit) {
|
||||
document.dispatchEvent(
|
||||
new SquooshSideEvent(type, init),
|
||||
);
|
||||
}
|
||||
|
||||
@bind
|
||||
private signalLoadingStart() {
|
||||
document.dispatchEvent(
|
||||
new SquooshStartEvent(),
|
||||
);
|
||||
}
|
||||
|
||||
@bind
|
||||
private signalProcessingDone(side: 0|1) {
|
||||
this.dispatchSideEvent(SquooshSideEventType.DONE, { side });
|
||||
}
|
||||
|
||||
@bind
|
||||
private signalProcessingAbort(side: 0|1) {
|
||||
this.dispatchSideEvent(SquooshSideEventType.ABORT, { side });
|
||||
}
|
||||
|
||||
@bind
|
||||
private signalProcessingError(side: 0|1, msg: string) {
|
||||
this.dispatchSideEvent(SquooshSideEventType.ERROR, { side, error: new Error(msg) });
|
||||
}
|
||||
|
||||
private async updateImage(index: number, options: UpdateImageOptions = {}): Promise<void> {
|
||||
const {
|
||||
skipPreprocessing = false,
|
||||
@@ -608,13 +541,8 @@ export default class Compress extends Component<Props, State> {
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
if (err.name === 'AbortError') {
|
||||
this.signalProcessingAbort(index as 0|1);
|
||||
return;
|
||||
}
|
||||
const errorMsg = `Processing error (type=${settings.encoderState.type}): ${err}`;
|
||||
this.signalProcessingError(index as 0|1, errorMsg);
|
||||
this.props.showSnack(errorMsg);
|
||||
if (err.name === 'AbortError') return;
|
||||
this.props.showSnack(`Processing error (type=${settings.encoderState.type}): ${err}`);
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
@@ -637,7 +565,7 @@ export default class Compress extends Component<Props, State> {
|
||||
encodedSettings: settings,
|
||||
});
|
||||
|
||||
this.setState({ sides }, () => this.signalProcessingDone(index as 0|1));
|
||||
this.setState({ sides });
|
||||
}
|
||||
|
||||
render({ onBack }: Props, { loading, sides, source, mobileView }: State) {
|
||||
|
||||
@@ -7,7 +7,8 @@ function init() {
|
||||
if (!('customElements' in self)) {
|
||||
import(
|
||||
/* webpackChunkName: "wc-polyfill" */
|
||||
'@webcomponents/custom-elements').then(init);
|
||||
'@webcomponents/custom-elements',
|
||||
).then(init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
|
||||
1
src/missing-types.d.ts
vendored
1
src/missing-types.d.ts
vendored
@@ -34,7 +34,6 @@ declare module 'url-loader!*' {
|
||||
}
|
||||
|
||||
declare var VERSION: string;
|
||||
declare var MAJOR_VERSION: string;
|
||||
|
||||
declare var ga: {
|
||||
(...args: any[]): void;
|
||||
|
||||
41
src/sdk.ts
41
src/sdk.ts
@@ -1,41 +0,0 @@
|
||||
import { proxy, ProxyResult } from 'comlink';
|
||||
|
||||
import { API, ReadyMessage } from './components/App/client-api';
|
||||
|
||||
// @ts-ignore
|
||||
import { version } from '../package.json';
|
||||
const MAJOR_VERSION = (version.split('.')[0] as string);
|
||||
|
||||
/**
|
||||
* This function will load an iFrame
|
||||
* @param {HTMLIFrameElement} ifr iFrame that will be used to load squoosh
|
||||
* @param {string} src URL of squoosh instance to use
|
||||
*/
|
||||
export default async function loader(
|
||||
ifr: HTMLIFrameElement,
|
||||
src: string = 'https://squoosh.app',
|
||||
): Promise<ProxyResult<API>> {
|
||||
ifr.src = src;
|
||||
await new Promise(resolve => (ifr.onload = resolve));
|
||||
ifr.contentWindow!.postMessage('READY?', '*');
|
||||
await new Promise((resolve) => {
|
||||
window.addEventListener('message', function l(ev) {
|
||||
const msg = ev.data as ReadyMessage;
|
||||
if (!msg || msg.type !== 'READY') {
|
||||
return;
|
||||
}
|
||||
if (msg.version !== MAJOR_VERSION) {
|
||||
throw Error(
|
||||
`Version mismatch. SDK version ${MAJOR_VERSION}, Squoosh version ${
|
||||
msg.version
|
||||
}`,
|
||||
);
|
||||
}
|
||||
ev.stopPropagation();
|
||||
window.removeEventListener('message', l);
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
|
||||
return proxy(ifr.contentWindow!);
|
||||
}
|
||||
@@ -263,7 +263,6 @@ module.exports = async function (_, env) {
|
||||
// Inline constants during build, so they can be folded by UglifyJS.
|
||||
new webpack.DefinePlugin({
|
||||
VERSION: JSON.stringify(VERSION),
|
||||
MAJOR_VERSION: JSON.stringify(VERSION.split(".")[0]),
|
||||
// We set node.process=false later in this config.
|
||||
// Here we make sure if (process && process.foo) still works:
|
||||
process: '{}'
|
||||
|
||||
Reference in New Issue
Block a user