external-repos/squoosh
1
0
Fork 1
mirror of https://github.com/GoogleChromeLabs/squoosh.git synced 2025-11-17 11:09:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

merge master

Browse Source
This commit is contained in:
Jason Miller
2018-07-01 15:00:53 +00:00
parent 44412f6217 cc3ed168d8
commit e95ea80c4f
38 changed files with 2048 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
codecs/example.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

1
codecs/mozjpeg_enc/example.html
View File

@@ -27,6 +27,7 @@
get_result_pointer: Module.cwrap('get_result_pointer', 'number', []),
get_result_size: Module.cwrap('get_result_size', 'number', []),
};
console.log('Version:', api.version().toString(16));
const image = await loadImage('../example.png');
const p = api.create_buffer(image.width, image.height);
Module.HEAP8.set(image.data, p);

42
codecs/webp_dec/README.md Normal file
View File

@@ -0,0 +1,42 @@
# WebP decoder
- Source: <https://github.com/webmproject/libwebp>
- Version: v0.6.1
## Example
See `example.html`
## API
### `int version()`
Returns the version of libwebp as a number. va.b.c is encoded as 0x0a0b0c
### `uint8_t* create_buffer(int size)`
Allocates an buffer for the file data.
### `void destroy_buffer(uint8_t* p)`
Frees a buffer created with `create_buffer`.
### `void decode(uint8_t* img_in, int size)`
Decodes the given webp file into raw RGBA. The result is implicitly stored and can be accessed using the `get_result_*()` functions.
### `void free_result()`
Frees the result created by `decode()`.
### `int get_result_pointer()`
Returns the pointer to the start of the buffer holding the encoded data. Length is width x height x 4 bytes.
### `int get_result_width()`
Returns the width of the image.
### `int get_result_height()`
Returns the height of the image.

45
codecs/webp_dec/example.html Normal file
View File

@@ -0,0 +1,45 @@
<!doctype html>
<script src='webp_dec.js'></script>
<script>
const Module = webp_dec();
async function loadFile(src) {
const resp = await fetch(src);
return await resp.arrayBuffer();
}
Module.onRuntimeInitialized = async _ => {
const api = {
version: Module.cwrap('version', 'number', []),
create_buffer: Module.cwrap('create_buffer', 'number', ['number', 'number']),
destroy_buffer: Module.cwrap('destroy_buffer', '', ['number']),
decode: Module.cwrap('decode', '', ['number', 'number']),
free_result: Module.cwrap('free_result', '', ['number']),
get_result_pointer: Module.cwrap('get_result_pointer', 'number', []),
get_result_width: Module.cwrap('get_result_width', 'number', []),
get_result_height: Module.cwrap('get_result_height', 'number', []),
};
console.log('Version:', api.version().toString(16));
const image = await loadFile('../example.webp');
const p = api.create_buffer(image.byteLength);
Module.HEAP8.set(new Uint8Array(image), p);
api.decode(p, image.byteLength);
const resultPointer = api.get_result_pointer();
if(resultPointer === 0) {
throw new Error("Could not decode image");
}
const resultWidth = api.get_result_width();
const resultHeight = api.get_result_height();
const resultView = new Uint8Array(Module.HEAP8.buffer, resultPointer, resultWidth * resultHeight * 4);
const result = new Uint8ClampedArray(resultView);
const imageData = new ImageData(result, resultWidth, resultHeight);
api.free_result(resultPointer);
api.destroy_buffer(p);
const canvas = document.createElement('canvas');
canvas.width = resultWidth;
canvas.height = resultHeight;
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
ctx.putImageData(imageData, 0, 0);
};
</script>

1147
codecs/webp_dec/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

13
codecs/webp_dec/package.json Normal file
View File

@@ -0,0 +1,13 @@
{
"name": "webp_dec",
"scripts": {
"install": "napa",
"build": "docker run --rm -v $(pwd):/src trzeci/emscripten emcc -O3 -s WASM=1 -s EXTRA_EXPORTED_RUNTIME_METHODS='[\"cwrap\"]' -s ALLOW_MEMORY_GROWTH=1 -s MODULARIZE=1 -s 'EXPORT_NAME=\"webp_dec\"' -I node_modules/libwebp -o ./webp_dec.js webp_dec.c node_modules/libwebp/src/{dec,dsp,demux,enc,mux,utils}/*.c"
},
"napa": {
"libwebp": "webmproject/libwebp#v1.0.0"
},
"devDependencies": {
"napa": "^3.0.0"
}
}

51
codecs/webp_dec/webp_dec.c Normal file
View File

@@ -0,0 +1,51 @@
#include "emscripten.h"
#include "src/webp/decode.h"
#include "src/webp/demux.h"
#include <stdlib.h>
EMSCRIPTEN_KEEPALIVE
int version() {
return WebPGetDecoderVersion();
}
EMSCRIPTEN_KEEPALIVE
uint8_t* create_buffer(int size) {
return malloc(size);
}
EMSCRIPTEN_KEEPALIVE
void destroy_buffer(uint8_t* p) {
free(p);
}
int result[3];
EMSCRIPTEN_KEEPALIVE
void decode(uint8_t* img_in, int size) {
int width, height;
uint8_t* img_out = WebPDecodeRGBA(img_in, size, &width, &height);
result[0] = (int)img_out;
result[1] = width;
result[2] = height;
}
EMSCRIPTEN_KEEPALIVE
void free_result() {
WebPFree(result[0]);
}
EMSCRIPTEN_KEEPALIVE
int get_result_pointer() {
return result[0];
}
EMSCRIPTEN_KEEPALIVE
int get_result_width() {
return result[1];
}
EMSCRIPTEN_KEEPALIVE
int get_result_height() {
return result[2];
}

17
codecs/webp_dec/webp_dec.js Normal file
View File

File diff suppressed because one or more lines are too long

BIN
codecs/webp_dec/webp_dec.wasm Normal file
View File

Binary file not shown.

3
codecs/webp_enc/example.html
View File

@@ -27,6 +27,7 @@
get_result_pointer: Module.cwrap('get_result_pointer', 'number', []),
get_result_size: Module.cwrap('get_result_size', 'number', []),
};
console.log('Version:', api.version().toString(16));
const image = await loadImage('../example.png');
const p = api.create_buffer(image.width, image.height);
Module.HEAP8.set(image.data, p);
@@ -38,7 +39,7 @@
api.free_result(resultPointer);
api.destroy_buffer(p);
const blob = new Blob([result], {type: 'image/jpeg'});
const blob = new Blob([result], {type: 'image/webp'});
const blobURL = URL.createObjectURL(blob);
const img = document.createElement('img');
img.src = blobURL;

2
codecs/webp_enc/package.json
View File

@@ -5,7 +5,7 @@
"build": "docker run --rm -v $(pwd):/src trzeci/emscripten emcc -O3 -s WASM=1 -s EXTRA_EXPORTED_RUNTIME_METHODS='[\"cwrap\"]' -s ALLOW_MEMORY_GROWTH=1 -s MODULARIZE=1 -s 'EXPORT_NAME=\"webp_enc\"' -I node_modules/libwebp -o ./webp_enc.js webp_enc.c node_modules/libwebp/src/{dec,dsp,demux,enc,mux,utils}/*.c"
},
"napa": {
"libwebp": "webmproject/libwebp#v0.6.1"
"libwebp": "webmproject/libwebp#v1.0.0"
},
"devDependencies": {
"napa": "^3.0.0"

2
codecs/webp_enc/webp_enc.js
View File

File diff suppressed because one or more lines are too long

BIN
codecs/webp_enc/webp_enc.wasm
View File

Binary file not shown.

47
package.json
View File

@@ -8,36 +8,17 @@
"build:codecs": "npm run build:mozjpeg_enc",
"start": "webpack serve --host 0.0.0.0 --hot",
"build": "webpack -p",
"lint": "eslint src",
"test": "npm run build && npm run test:e2e && npm run test:unit",
"lint": "tslint -c tslint.json -t verbose 'src/**/*.{ts,js}'",
"lintfix": "tslint -c tslint.json -t verbose --fix 'src/**/*.{ts,js}'",
"test": "npm run lint && npm run build && npm run test:e2e && npm run test:unit",
"test:e2e": "mocha -R spec test/e2e",
"test:unit": "karmatic"
},
"eslintConfig": {
"extends": [
"standard",
"standard-jsx"
],
"rules": {
"indent": [
2,
2
],
"semi": [
2,
"always"
],
"prefer-const": 1
},
"settings": {
"react": {
"pragma": "h"
}
"husky": {
"hooks": {
"pre-commit": "npm run lint"
}
},
"eslintIgnore": [
"build/*"
],
"devDependencies": {
"@types/chai": "^4.1.3",
"@types/karma": "^1.7.3",
@@ -58,18 +39,11 @@
"clean-webpack-plugin": "^0.1.19",
"copy-webpack-plugin": "^4.5.1",
"css-loader": "^0.28.11",
"eslint": "^4.18.2",
"eslint-config-standard": "^11.0.0",
"eslint-config-standard-jsx": "^5.0.0",
"eslint-plugin-import": "^2.10.0",
"eslint-plugin-node": "^6.0.1",
"eslint-plugin-promise": "^3.7.0",
"eslint-plugin-react": "^7.7.0",
"eslint-plugin-standard": "^3.0.1",
"exports-loader": "^0.7.0",
"express": "^4.16.3",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.0.6",
"husky": "^1.0.0-rc.9",
"if-env": "^1.0.4",
"karmatic": "^1.1.7",
"loader-utils": "^1.1.0",
@@ -85,7 +59,8 @@
"source-map-loader": "^0.2.3",
"style-loader": "^0.20.3",
"ts-loader": "^4.0.1",
"tslint": "^5.9.1",
"tslint": "^5.10.0",
"tslint-config-airbnb": "^5.9.2",
"tslint-config-semistandard": "^7.0.0",
"tslint-react": "^3.5.1",
"typescript": "^2.7.2",
@@ -98,12 +73,12 @@
},
"dependencies": {
"classnames": "^2.2.5",
"comlink": "^3.0.3",
"comlink-loader": "^1.0.0",
"material-components-web": "^0.32.0",
"material-radial-progress": "git+https://gist.github.com/02134901c77c5309924bfcf8b4435ebe.git",
"preact": "^8.2.7",
"preact-i18n": "^1.2.0",
"preact-material-components": "^1.3.7",
"preact-material-components-drawer": "git+https://gist.github.com/a78fceed440b98e62582e4440b86bfab.git",
"preact-router": "^2.6.0"
}
}

13
src/codecs/encoders.ts Normal file
View File

@@ -0,0 +1,13 @@
import * as mozJPEG from './mozjpeg/encoder';
import * as identity from './identity/encoder';
export type EncoderState = identity.EncoderState | mozJPEG.EncoderState;
export type EncoderOptions = identity.EncodeOptions | mozJPEG.EncodeOptions;
export type EncoderType = keyof typeof encoderMap;
export const encoderMap = {
[identity.type]: identity,
[mozJPEG.type]: mozJPEG,
};
export const encoders = Array.from(Object.values(encoderMap));

6
src/codecs/identity/encoder.ts Normal file
View File

@@ -0,0 +1,6 @@
export interface EncodeOptions {}
export interface EncoderState { type: typeof type; options: EncodeOptions; }
export const type = 'identity';
export const label = 'Original image';
export const defaultOptions: EncodeOptions = {};

20
src/lib/codec-wrappers/mozjpeg-enc.ts → src/codecs/mozjpeg/EncoderWorker.ts
View File

@@ -1,7 +1,6 @@
import {Encoder} from './codec';
import mozjpeg_enc from '../../../codecs/mozjpeg_enc/mozjpeg_enc';
// Using require() so TypeScript doesn’t complain about this not being a module.
import { EncodeOptions } from './encoder';
const wasmBinaryUrl = require('../../../codecs/mozjpeg_enc/mozjpeg_enc.wasm');
// API exposed by wasm module. Details in the codec’s README.
@@ -15,17 +14,18 @@ interface ModuleAPI {
get_result_size(): number;
}
export class MozJpegEncoder implements Encoder {
export default class MozJpegEncoder {
private emscriptenModule: Promise<EmscriptenWasm.Module>;
private api: Promise<ModuleAPI>;
constructor() {
this.emscriptenModule = new Promise(resolve => {
this.emscriptenModule = new Promise((resolve) => {
const m = mozjpeg_enc({
// Just to be safe, don’t automatically invoke any wasm functions
noInitialRun: false,
locateFile(url: string): string {
// Redirect the request for the wasm binary to whatever webpack gave us.
if(url.endsWith('.wasm')) {
if (url.endsWith('.wasm')) {
return wasmBinaryUrl;
}
return url;
@@ -38,12 +38,14 @@ export class MozJpegEncoder implements Encoder {
// TODO(surma@): File a bug with Emscripten on this.
delete (m as any).then;
resolve(m);
}
},
});
});
this.api = (async () => {
// Not sure why, but TypeScript complains that I am using `emscriptenModule` before it’s getting assigned, which is clearly not true :shrug: Using `any`
// Not sure why, but TypeScript complains that I am using
// `emscriptenModule` before it’s getting assigned, which is clearly not
// true :shrug: Using `any`
const m = await (this as any).emscriptenModule;
return {
version: m.cwrap('version', 'number', []),
@@ -57,13 +59,13 @@ export class MozJpegEncoder implements Encoder {
})();
}
async encode(data: ImageData): Promise<ArrayBuffer> {
async encode(data: ImageData, options: EncodeOptions): Promise<ArrayBuffer> {
const m = await this.emscriptenModule;
const api = await this.api;
const p = api.create_buffer(data.width, data.height);
m.HEAP8.set(data.data, p);
api.encode(p, data.width, data.height, 2);
api.encode(p, data.width, data.height, options.quality);
const resultPointer = api.get_result_pointer();
const resultSize = api.get_result_size();
const resultView = new Uint8Array(m.HEAP8.buffer, resultPointer, resultSize);

16
src/codecs/mozjpeg/encoder.ts Normal file
View File

@@ -0,0 +1,16 @@
import EncoderWorker from './EncoderWorker';
export interface EncodeOptions { quality: number; }
export interface EncoderState { type: typeof type; options: EncodeOptions; }
export const type = 'mozjpeg';
export const label = 'MozJPEG';
export const mimeType = 'image/jpeg';
export const extension = 'jpg';
export const defaultOptions: EncodeOptions = { quality: 7 };
export async function encode(data: ImageData, options: EncodeOptions) {
// We need to await this because it's been comlinked.
const encoder = await new EncoderWorker();
return encoder.encode(data, options);
}

35
src/codecs/mozjpeg/options.tsx Normal file
View File

@@ -0,0 +1,35 @@
import { h, Component } from 'preact';
import { EncodeOptions } from './encoder';
import { bind } from '../../lib/util';
type Props = {
options: EncodeOptions,
onChange(newOptions: EncodeOptions): void
};
export default class MozJpegCodecOptions extends Component<Props, {}> {
@bind
onChange(event: Event) {
const el = event.currentTarget as HTMLInputElement;
this.props.onChange({ quality: Number(el.value) });
}
render({ options }: Props) {
return (
<div>
<label>
Quality:
<input
name="quality"
type="range"
min="1"
max="100"
step="1"
value={'' + options.quality}
onChange={this.onChange}
/>
</label>
</div>
);
}
}

117
src/components/app/custom-els/FileDrop/index.ts Normal file
View File

@@ -0,0 +1,117 @@
import { bind } from '../../../../lib/util';
import './styles.css';
// tslint:disable-next-line:max-line-length
function firstMatchingItem(list: DataTransferItemList, acceptVal: string): DataTransferItem | undefined {
// Split accepts values by ',' then by '/'. Trim everything & lowercase.
const accepts = acceptVal.toLowerCase().split(',').map((accept) => {
return accept.trim().split('/').map(part => part.trim());
}).filter(acceptParts => acceptParts.length === 2); // Filter invalid values
return Array.from(list).find((item) => {
if (item.kind !== 'file') return false;
// 'Parse' the type.
const [typeMain, typeSub] = item.type.toLowerCase().split('/').map(s => s.trim());
for (const [acceptMain, acceptSub] of accepts) {
// Look for an exact match, or a partial match if * is accepted, eg image/*.
if (typeMain === acceptMain && (acceptSub === '*' || typeSub === acceptSub)) {
return true;
}
}
return false;
});
}
interface FileDropEventInit extends EventInit {
file: File;
}
export class FileDropEvent extends Event {
private _file: File;
constructor(typeArg: string, eventInitDict: FileDropEventInit) {
super(typeArg, eventInitDict);
this._file = eventInitDict.file;
}
get file(): File {
return this._file;
}
}
/*
Example Usage.
<file-drop
accept='image/*'
class='drop-valid|drop-invalid'
>
[everything in here is a drop target.]
</file-drop>
dropElement.addEventListner('dropfile', (event) => console.log(event.detail))
*/
export class FileDrop extends HTMLElement {
private _dragEnterCount = 0;
constructor() {
super();
this.addEventListener('dragover', event => event.preventDefault());
this.addEventListener('drop', this._onDrop);
this.addEventListener('dragenter', this._onDragEnter);
this.addEventListener('dragend', () => this._reset());
this.addEventListener('dragleave', this._onDragLeave);
}
get accept() {
return this.getAttribute('accept') || '';
}
set accept(val: string) {
this.setAttribute('accept', val);
}
@bind
private _onDragEnter(event: DragEvent) {
this._dragEnterCount += 1;
if (this._dragEnterCount > 1) return;
// We don't have data, attempt to get it and if it matches, set the correct state.
const dragDataItem = firstMatchingItem(event.dataTransfer.items, this.accept);
if (dragDataItem) {
this.classList.add('drop-valid');
} else {
this.classList.add('drop-invalid');
}
}
@bind
private _onDragLeave() {
this._dragEnterCount -= 1;
if (this._dragEnterCount === 0) {
this._reset();
}
}
@bind
private _onDrop(event: DragEvent) {
event.preventDefault();
this._reset();
const dragDataItem = firstMatchingItem(event.dataTransfer.items, this.accept);
if (!dragDataItem) return;
const file = dragDataItem.getAsFile();
if (file === null) return;
this.dispatchEvent(new FileDropEvent('filedrop', { file }));
}
private _reset() {
this._dragEnterCount = 0;
this.classList.remove('drop-valid');
this.classList.remove('drop-invalid');
}
}
customElements.define('file-drop', FileDrop);

19
src/components/app/custom-els/FileDrop/missing-types.d.ts vendored Normal file
View File

@@ -0,0 +1,19 @@
import { FileDropEvent, FileDrop } from '.';
declare global {
interface HTMLElementEventMap {
'filedrop': FileDropEvent;
}
namespace JSX {
interface IntrinsicElements {
'file-drop': FileDropAttributes;
}
interface FileDropAttributes extends HTMLAttributes {
accept?: string;
onfiledrop?: ((this: FileDrop, ev: FileDropEvent) => any) | null;
}
}
}

3
src/components/app/custom-els/FileDrop/styles.css Normal file
View File

@@ -0,0 +1,3 @@
file-drop {
display: block;
}

223
src/components/app/index.tsx
View File

@@ -2,56 +2,217 @@ import { h, Component } from 'preact';
import { bind, bitmapToImageData } from '../../lib/util';
import * as style from './style.scss';
import Output from '../output';
import Options from '../options';
import { FileDropEvent } from './custom-els/FileDrop';
import './custom-els/FileDrop';
import {MozJpegEncoder} from '../../lib/codec-wrappers/mozjpeg-enc';
import * as mozJPEG from '../../codecs/mozjpeg/encoder';
import * as identity from '../../codecs/identity/encoder';
import { EncoderState, EncoderType, EncoderOptions, encoderMap } from '../../codecs/encoders';
type Props = {};
interface SourceImage {
file: File;
bmp: ImageBitmap;
data: ImageData;
}
type State = {
img?: ImageBitmap
};
interface EncodedImage {
encoderState: EncoderState;
bmp?: ImageBitmap;
loading: boolean;
/** Counter of the latest bmp currently encoding */
loadingCounter: number;
/** Counter of the latest bmp encoded */
loadedCounter: number;
}
interface Props {}
interface State {
source?: SourceImage;
images: [EncodedImage, EncodedImage];
loading: boolean;
error?: string;
}
export default class App extends Component<Props, State> {
state: State = {};
state: State = {
loading: false,
images: [
{
encoderState: { type: identity.type, options: identity.defaultOptions },
loadingCounter: 0,
loadedCounter: 0,
loading: false
},
{
encoderState: { type: mozJPEG.type, options: mozJPEG.defaultOptions },
loadingCounter: 0,
loadedCounter: 0,
loading: false
}
]
};
constructor() {
super();
// In development, persist application state across hot reloads:
if (process.env.NODE_ENV === 'development') {
this.setState(window.STATE);
this.componentDidUpdate = () => {
const oldCDU = this.componentDidUpdate;
this.componentDidUpdate = (props, state) => {
if (oldCDU) oldCDU.call(this, props, state);
window.STATE = this.state;
};
}
}
@bind
async onFileChange(event: Event) {
const fileInput = event.target as HTMLInputElement;
if (!fileInput.files || !fileInput.files[0]) return;
// TODO: handle decode error
const bitmap = await createImageBitmap(fileInput.files[0]);
const data = await bitmapToImageData(bitmap);
const encoder = new MozJpegEncoder();
const compressedData = await encoder.encode(data);
const blob = new Blob([compressedData], {type: 'image/jpeg'});
const compressedImage = await createImageBitmap(blob);
this.setState({ img: compressedImage });
onEncoderChange(index: 0 | 1, type: EncoderType, options?: EncoderOptions): void {
const images = this.state.images.slice() as [EncodedImage, EncodedImage];
const image = images[index];
// Some type cheating here.
// encoderMap[type].defaultOptions is always safe.
// options should always be correct for the type, but TypeScript isn't smart enough.
const encoderState: EncoderState = {
type,
options: options ? options : encoderMap[type].defaultOptions
} as EncoderState;
images[index] = {
...image,
encoderState,
};
this.setState({ images });
}
render({ }: Props, { img }: State) {
return (
<div id="app" class={style.app}>
{img ?
<Output img={img} />
:
<div>
<h1>Select an image</h1>
<input type="file" onChange={this.onFileChange} />
</div>
onOptionsChange(index: 0 | 1, options: EncoderOptions): void {
this.onEncoderChange(index, this.state.images[index].encoderState.type, options);
}
componentDidUpdate(prevProps: Props, prevState: State): void {
const { source, images } = this.state;
for (const [i, image] of images.entries()) {
if (source !== prevState.source || image !== prevState.images[i]) {
this.updateImage(i);
}
}
}
@bind
async onFileChange(event: Event): Promise<void> {
const fileInput = event.target as HTMLInputElement;
const file = fileInput.files && fileInput.files[0];
if (!file) return;
await this.updateFile(file);
}
@bind
async onFileDrop(event: FileDropEvent) {
const { file } = event;
if (!file) return;
await this.updateFile(file);
}
async updateFile(file: File) {
this.setState({ loading: true });
try {
const bmp = await createImageBitmap(file);
// compute the corresponding ImageData once since it only changes when the file changes:
const data = await bitmapToImageData(bmp);
this.setState({
source: { data, bmp, file },
error: undefined,
loading: false,
});
} catch (err) {
this.setState({ error: 'IMAGE_INVALID', loading: false });
}
}
async updateImage(index: number): Promise<void> {
const { source, images } = this.state;
if (!source) return;
let image = images[index];
// Each time we trigger an async encode, the ID changes.
image.loadingCounter = image.loadingCounter + 1;
const loadingCounter = image.loadingCounter;
image.loading = true;
this.setState({ });
const result = await this.updateCompressedImage(source, image.encoderState);
image = this.state.images[index];
// If a later encode has landed before this one, return.
if (loadingCounter < image.loadedCounter) return;
image.bmp = result;
image.loading = image.loadingCounter !== loadingCounter;
image.loadedCounter = loadingCounter;
this.setState({ });
}
async updateCompressedImage(source: SourceImage, encodeData: EncoderState): Promise<ImageBitmap> {
// Special case for identity
if (encodeData.type === identity.type) return source.bmp;
try {
const compressedData = await (() => {
switch (encodeData.type) {
case mozJPEG.type: return mozJPEG.encode(source.data, encodeData.options);
default: throw Error(`Unexpected encoder name`);
}
</div>
})();
const blob = new Blob([compressedData], {
type: encoderMap[encodeData.type].mimeType
});
const bitmap = await createImageBitmap(blob);
this.setState({ error: '' });
return bitmap;
} catch (err) {
this.setState({ error: `Encoding error (type=${encodeData.type}): ${err}` });
throw err;
}
}
render({ }: Props, { loading, error, images, source }: State) {
const [leftImageBmp, rightImageBmp] = images.map(i => i.bmp);
loading = loading || images.some(image => image.loading);
return (
<file-drop accept="image/*" onfiledrop={this.onFileDrop}>
<div id="app" class={style.app}>
{(leftImageBmp && rightImageBmp) ? (
<Output leftImg={leftImageBmp} rightImg={rightImageBmp} />
) : (
<div class={style.welcome}>
<h1>Select an image</h1>
<input type="file" onChange={this.onFileChange} />
</div>
)}
{images.map((image, index) => (
<span class={index ? style.rightLabel : style.leftLabel}>
{encoderMap[image.encoderState.type].label}
</span>
))}
{images.map((image, index) => (
<Options
class={index ? style.rightOptions : style.leftOptions}
encoderState={image.encoderState}
onTypeChange={this.onEncoderChange.bind(this, index)}
onOptionsChange={this.onOptionsChange.bind(this, index)}
/>
))}
{loading && <span style={{ position: 'fixed', top: 0, left: 0 }}>Loading...</span>}
{error && <span style={{ position: 'fixed', top: 0, left: 0 }}>Error: {error}</span>}
</div>
</file-drop>
);
}
}

84
src/components/app/style.scss
View File

@@ -1,3 +1,83 @@
.app h1 {
color: green;
/*
Note: These styles are temporary. They will be replaced before going live.
*/
.app {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
contain: strict;
.leftLabel,
.rightLabel {
position: fixed;
bottom: 0;
padding: 5px 10px;
background: rgba(0,0,0,0.5);
color: #fff;
}
.leftLabel { left: 0; }
.rightLabel { right: 0; }
.leftOptions,
.rightOptions {
position: fixed;
bottom: 40px;
}
.leftOptions { left: 10px; }
.rightOptions { right: 10px; }
}
.welcome {
position: absolute;
display: inline-block;
left: 50%;
top: 50%;
padding: 20px;
transform: translate(-50%, -50%);
h1 {
font-weight: inherit;
font-size: 150%;
text-align: center;
}
input {
display: inline-block;
width: 16em;
padding: 5px;
margin: 0 auto;
-webkit-appearance: none;
border: 1px solid #b68c86;
background: #f0d3cf;
box-shadow: inset 0 0 1px #fff;
border-radius: 3px;
cursor: pointer;
}
}
:global {
file-drop {
overflow: hidden;
touch-action: none;
height:100%;
width:100%;
&.drop-valid {
transition: opacity 200ms ease-in-out, background-color 200ms;
opacity: 0.5;
background-color:green;
}
&.drop-invalid {
transition: opacity 200ms ease-in-out, background-color 200ms;
opacity: 0.5;
background-color:red;
}
}
}

63
src/components/options/index.tsx Normal file
View File

@@ -0,0 +1,63 @@
import { h, Component } from 'preact';
import * as style from './style.scss';
import { bind } from '../../lib/util';
import MozJpegEncoderOptions from '../../codecs/mozjpeg/options';
import { type as mozJPEGType } from '../../codecs/mozjpeg/encoder';
import { type as identityType } from '../../codecs/identity/encoder';
import { EncoderState, EncoderType, EncoderOptions, encoders } from '../../codecs/encoders';
const encoderOptionsComponentMap = {
[mozJPEGType]: MozJpegEncoderOptions,
[identityType]: undefined
};
interface Props {
class?: string;
encoderState: EncoderState;
onTypeChange(newType: EncoderType): void;
onOptionsChange(newOptions: EncoderOptions): void;
}
interface State {}
export default class Options extends Component<Props, State> {
typeSelect?: HTMLSelectElement;
@bind
onTypeChange(event: Event) {
const el = event.currentTarget as HTMLSelectElement;
// The select element only has values matching encoder types,
// so 'as' is safe here.
const type = el.value as EncoderType;
this.props.onTypeChange(type);
}
render({ class: className, encoderState, onOptionsChange }: Props) {
const EncoderOptionComponent = encoderOptionsComponentMap[encoderState.type];
return (
<div class={`${style.options}${className ? (' ' + className) : ''}`}>
<label>
Mode:
<select value={encoderState.type} onChange={this.onTypeChange}>
{encoders.map(encoder => (
<option value={encoder.type}>{encoder.label}</option>
))}
</select>
</label>
{EncoderOptionComponent &&
<EncoderOptionComponent
options={
// Casting options, as encoderOptionsComponentMap[encodeData.type] ensures the correct type,
// but typescript isn't smart enough.
encoderState.options as typeof EncoderOptionComponent['prototype']['props']['options']
}
onChange={onOptionsChange}
/>
}
</div>
);
}
}

38
src/components/options/style.scss Normal file
View File

@@ -0,0 +1,38 @@
/*
Note: These styles are temporary. They will be replaced before going live.
*/
.options {
width: 180px;
padding: 10px;
background: rgba(50,50,50,0.8);
border: 1px solid #222;
box-shadow: inset 0 0 1px #fff, 0 0 1px #fff;
border-radius: 3px;
color: #eee;
overflow: auto;
z-index: 1;
transition: opacity 300ms ease;
&:not(:hover) {
opacity: .6;
}
label {
display: block;
padding: 5px;
font-weight: bold;
select {
margin-left: 5px;
}
input {
vertical-align: middle;
}
}
pre {
font-size: 10px;
}
}

52
src/components/output/custom-els/PinchZoom/index.ts
View File

@@ -24,17 +24,17 @@ interface SetTransformOpts {
allowChangeEvent?: boolean;
}
function getDistance (a: Point, b?: Point): number {
function getDistance(a: Point, b?: Point): number {
if (!b) return 0;
return Math.sqrt((b.clientX - a.clientX) ** 2 + (b.clientY - a.clientY) ** 2);
}
function getMidpoint (a: Point, b?: Point): Point {
function getMidpoint(a: Point, b?: Point): Point {
if (!b) return a;
return {
clientX: (a.clientX + b.clientX) / 2,
clientY: (a.clientY + b.clientY) / 2
clientY: (a.clientY + b.clientY) / 2,
};
}
@@ -42,15 +42,15 @@ function getMidpoint (a: Point, b?: Point): Point {
// Given that, better to use something everything supports.
let cachedSvg: SVGSVGElement;
function getSVG (): SVGSVGElement {
function getSVG(): SVGSVGElement {
return cachedSvg || (cachedSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'));
}
function createMatrix (): SVGMatrix {
function createMatrix(): SVGMatrix {
return getSVG().createSVGMatrix();
}
function createPoint (): SVGPoint {
function createPoint(): SVGPoint {
return getSVG().createSVGPoint();
}
@@ -62,7 +62,7 @@ export default class PinchZoom extends HTMLElement {
// Current transform.
private _transform: SVGMatrix = createMatrix();
constructor () {
constructor() {
super();
// Watch for children changes.
@@ -79,42 +79,42 @@ export default class PinchZoom extends HTMLElement {
event.preventDefault();
return true;
},
move: previousPointers => {
move: (previousPointers) => {
this._onPointerMove(previousPointers, pointerTracker.currentPointers);
}
},
});
this.addEventListener('wheel', event => this._onWheel(event));
}
connectedCallback () {
connectedCallback() {
this._stageElChange();
}
get x () {
get x() {
return this._transform.e;
}
get y () {
get y() {
return this._transform.f;
}
get scale () {
get scale() {
return this._transform.a;
}
/**
* Update the stage with a given scale/x/y.
*/
setTransform (opts: SetTransformOpts = {}) {
setTransform(opts: SetTransformOpts = {}) {
const {
scale = this.scale,
allowChangeEvent = false
allowChangeEvent = false,
} = opts;
let {
x = this.x,
y = this.y
y = this.y,
} = opts;
// If we don't have an element to position, just set the value as given.
@@ -144,7 +144,7 @@ export default class PinchZoom extends HTMLElement {
bottomRight.y = positioningElBounds.height + topLeft.y;
// Calculate the intended position of _positioningEl.
let matrix = createMatrix()
const matrix = createMatrix()
.translate(x, y)
.scale(scale)
// Undo current transform
@@ -174,7 +174,7 @@ export default class PinchZoom extends HTMLElement {
/**
* Update transform values without checking bounds. This is only called in setTransform.
*/
_updateTransform (scale: number, x: number, y: number, allowChangeEvent: boolean) {
_updateTransform(scale: number, x: number, y: number, allowChangeEvent: boolean) {
// Return if there's no change
if (
scale === this.scale &&
@@ -202,7 +202,7 @@ export default class PinchZoom extends HTMLElement {
* require a single element to be the child of <pinch-zoom>, and
* that's the element we pan/scale.
*/
private _stageElChange () {
private _stageElChange() {
this._positioningEl = undefined;
if (this.children.length === 0) {
@@ -220,7 +220,7 @@ export default class PinchZoom extends HTMLElement {
this.setTransform();
}
private _onWheel (event: WheelEvent) {
private _onWheel(event: WheelEvent) {
event.preventDefault();
const thisRect = this.getBoundingClientRect();
@@ -239,11 +239,11 @@ export default class PinchZoom extends HTMLElement {
this._applyChange({
scaleDiff,
originX: event.clientX - thisRect.left,
originY: event.clientY - thisRect.top
originY: event.clientY - thisRect.top,
});
}
private _onPointerMove (previousPointers: Pointer[], currentPointers: Pointer[]) {
private _onPointerMove(previousPointers: Pointer[], currentPointers: Pointer[]) {
// Combine next points with previous points
const thisRect = this.getBoundingClientRect();
@@ -263,16 +263,16 @@ export default class PinchZoom extends HTMLElement {
this._applyChange({
originX, originY, scaleDiff,
panX: newMidpoint.clientX - prevMidpoint.clientX,
panY: newMidpoint.clientY - prevMidpoint.clientY
panY: newMidpoint.clientY - prevMidpoint.clientY,
});
}
/** Transform the view & fire a change event */
private _applyChange (opts: ApplyChangeOpts = {}) {
private _applyChange(opts: ApplyChangeOpts = {}) {
const {
panX = 0, panY = 0,
originX = 0, originY = 0,
scaleDiff = 1
scaleDiff = 1,
} = opts;
const matrix = createMatrix()
@@ -290,7 +290,7 @@ export default class PinchZoom extends HTMLElement {
scale: matrix.a,
x: matrix.e,
y: matrix.f,
allowChangeEvent: true
allowChangeEvent: true,
});
}
}

4
src/components/output/custom-els/TwoUp/index.ts
View File

@@ -46,9 +46,9 @@ export default class TwoUp extends HTMLElement {
move: () => {
this._pointerChange(
pointerTracker.startPointers[0],
pointerTracker.currentPointers[0]
pointerTracker.currentPointers[0],
);
}
},
});
}

2
src/components/output/custom-els/TwoUp/missing-types.d.ts vendored
View File

@@ -11,6 +11,6 @@ interface Window {
declare namespace JSX {
interface IntrinsicElements {
"two-up": HTMLAttributes
'two-up': HTMLAttributes;
}
}

46
src/components/output/index.tsx
View File

@@ -3,16 +3,17 @@ import PinchZoom from './custom-els/PinchZoom';
import './custom-els/PinchZoom';
import './custom-els/TwoUp';
import * as style from './style.scss';
import { bind } from '../../lib/util';
import { bind, drawBitmapToCanvas } from '../../lib/util';
import { twoUpHandle } from './custom-els/TwoUp/styles.css';
type Props = {
img: ImageBitmap
leftImg: ImageBitmap,
rightImg: ImageBitmap
};
type State = {};
export default class App extends Component<Props, State> {
export default class Output extends Component<Props, State> {
state: State = {};
canvasLeft?: HTMLCanvasElement;
canvasRight?: HTMLCanvasElement;
@@ -20,26 +21,22 @@ export default class App extends Component<Props, State> {
pinchZoomRight?: PinchZoom;
retargetedEvents = new WeakSet<Event>();
updateCanvases(img: ImageBitmap) {
for (const [i, canvas] of [this.canvasLeft, this.canvasRight].entries()) {
if (!canvas) throw Error('Missing canvas');
const ctx = canvas.getContext('2d');
if (!ctx) throw Error('Expected 2d canvas context');
if (i === 1) {
// This is temporary, to show the images are different
ctx.filter = 'hue-rotate(180deg)';
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0);
componentDidMount() {
if (this.canvasLeft) {
drawBitmapToCanvas(this.canvasLeft, this.props.leftImg);
}
if (this.canvasRight) {
drawBitmapToCanvas(this.canvasRight, this.props.rightImg);
}
}
componentDidMount() {
this.updateCanvases(this.props.img);
}
componentDidUpdate({ img }: Props) {
if (img !== this.props.img) this.updateCanvases(this.props.img);
componentDidUpdate(prevProps: Props) {
if (prevProps.leftImg !== this.props.leftImg && this.canvasLeft) {
drawBitmapToCanvas(this.canvasLeft, this.props.leftImg);
}
if (prevProps.rightImg !== this.props.rightImg && this.canvasRight) {
drawBitmapToCanvas(this.canvasRight, this.props.rightImg);
}
}
@bind
@@ -78,9 +75,9 @@ export default class App extends Component<Props, State> {
this.pinchZoomLeft.dispatchEvent(clonedEvent);
}
render({ img }: Props, { }: State) {
render({ leftImg, rightImg }: Props, { }: State) {
return (
<div>
<div class={style.output}>
<two-up
// Event redirecting. See onRetargetableEvent.
onTouchStartCapture={this.onRetargetableEvent}
@@ -91,13 +88,12 @@ export default class App extends Component<Props, State> {
onWheelCapture={this.onRetargetableEvent}
>
<pinch-zoom onChange={this.onPinchZoomLeftChange} ref={p => this.pinchZoomLeft = p as PinchZoom}>
<canvas class={style.outputCanvas} ref={c => this.canvasLeft = c as HTMLCanvasElement} width={img.width} height={img.height} />
<canvas class={style.outputCanvas} ref={c => this.canvasLeft = c as HTMLCanvasElement} width={leftImg.width} height={leftImg.height} />
</pinch-zoom>
<pinch-zoom ref={p => this.pinchZoomRight = p as PinchZoom}>
<canvas class={style.outputCanvas} ref={c => this.canvasRight = c as HTMLCanvasElement} width={img.width} height={img.height} />
<canvas class={style.outputCanvas} ref={c => this.canvasRight = c as HTMLCanvasElement} width={rightImg.width} height={rightImg.height} />
</pinch-zoom>
</two-up>
<p>And that's all the app does so far!</p>
</div>
);
}

26
src/components/output/style.scss
View File

@@ -1,3 +1,29 @@
/*
Note: These styles are temporary. They will be replaced before going live.
*/
%fill {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
contain: strict;
}
.output {
@extend %fill;
> two-up {
@extend %fill;
> pinch-zoom {
@extend %fill;
}
}
}
.outputCanvas {
image-rendering: pixelated;
}

13
src/lib/PointerTracker/index.ts
View File

@@ -32,9 +32,10 @@ const isPointerEvent = (event: any): event is PointerEvent =>
const noop = () => {};
type StartCallback = ((pointer: Pointer, event: TouchEvent | PointerEvent | MouseEvent) => boolean);
type MoveCallback = ((previousPointers: Pointer[], event: TouchEvent | PointerEvent | MouseEvent) => void);
type EndCallback = ((pointer: Pointer, event: TouchEvent | PointerEvent | MouseEvent) => void);
export type InputEvent = TouchEvent | PointerEvent | MouseEvent;
type StartCallback = ((pointer: Pointer, event: InputEvent) => boolean);
type MoveCallback = ((previousPointers: Pointer[], event: InputEvent) => void);
type EndCallback = ((pointer: Pointer, event: InputEvent) => void);
interface PointerTrackerCallbacks {
/**
@@ -95,7 +96,7 @@ export class PointerTracker {
const {
start = () => true,
move = noop,
end = noop
end = noop,
} = callbacks;
this._startCallback = start;
@@ -120,7 +121,7 @@ export class PointerTracker {
* @param event Related event
* @returns Whether the pointer is being tracked.
*/
private _triggerPointerStart (pointer: Pointer, event: PointerEvent | MouseEvent | TouchEvent): boolean {
private _triggerPointerStart (pointer: Pointer, event: InputEvent): boolean {
if (!this._startCallback(pointer, event)) return false;
this.currentPointers.push(pointer);
this.startPointers.push(pointer);
@@ -193,7 +194,7 @@ export class PointerTracker {
* @param event Related event
*/
@bind
private _triggerPointerEnd (pointer: Pointer, event: PointerEvent | MouseEvent | TouchEvent): boolean {
private _triggerPointerEnd (pointer: Pointer, event: InputEvent): boolean {
const index = this.currentPointers.findIndex(p => p.id === pointer.id);
// Not a pointer we're interested in?
if (index === -1) return false;

7
src/lib/codec-wrappers/codec.ts
View File

@@ -1,7 +0,0 @@
export interface Encoder {
encode(data: ImageData): Promise<ArrayBuffer>;
}
export interface Decoder {
decode(data: ArrayBuffer): Promise<ImageBitmap>;
}

15
src/lib/util.ts
View File

@@ -16,12 +16,12 @@ export function bind(target: any, propertyKey: string, descriptor: PropertyDescr
// define an instance property pointing to the bound function.
// This effectively "caches" the bound prototype method as an instance property.
get() {
let bound = descriptor.value.bind(this);
const bound = descriptor.value.bind(this);
Object.defineProperty(this, propertyKey, {
value: bound
value: bound,
});
return bound;
}
},
};
}
@@ -37,9 +37,16 @@ export async function bitmapToImageData(bitmap: ImageBitmap): Promise<ImageData>
// Draw image onto canvas
const ctx = canvas.getContext('2d');
if (!ctx) {
throw new Error("Could not create canvas context");
throw new Error('Could not create canvas context');
}
ctx.drawImage(bitmap, 0, 0);
return ctx.getImageData(0, 0, bitmap.width, bitmap.height);
}
/** Replace the contents of a canvas with the given bitmap */
export function drawBitmapToCanvas(canvas: HTMLCanvasElement, img: ImageBitmap) {
const ctx = canvas.getContext('2d');
if (!ctx) throw Error('Canvas not initialized');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0);
}

6
src/style/index.scss
View File

@@ -1,3 +1,7 @@
/*
Note: These styles are temporary. They will be replaced before going live.
*/
@import './reset.scss';
html, body {
@@ -5,6 +9,8 @@ html, body {
width: 100%;
padding: 0;
margin: 0;
font: 14px/1.3 Roboto,'Helvetica Neue',arial,helvetica,sans-serif;
overflow: hidden;
overscroll-behavior: none;
contain: strict;
}

4
src/style/reset.scss
View File

@@ -1,3 +1,7 @@
/*
Note: These styles are temporary. They will be replaced before going live.
*/
button, a, img, input, select, textarea {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

15
tslint.json
View File

@@ -1,16 +1,19 @@
{
"extends": [
"tslint-config-semistandard",
"tslint-config-airbnb",
"tslint-react"
],
"rules": {
"quotemark": [true, "single", "jsx-double", "avoid-escape"],
"no-use-before-declare": false,
"no-floating-promises": false,
"space-before-function-paren": [true, false],
"jsx-boolean-value": [true, "never"],
"jsx-no-multiline-js": false,
"jsx-no-bind": true,
"jsx-no-lambda": true
"jsx-no-lambda": true,
"function-name": false,
"variable-name": [true, "check-format", "allow-leading-underscore"]
},
"linterOptions": {
"exclude": [
"build"
]
}
}

13
webpack.config.js
View File

@@ -33,7 +33,8 @@ module.exports = function (_, env) {
filename: isProd ? '[name].[chunkhash:5].js' : '[name].js',
chunkFilename: '[name].chunk.[chunkhash:5].js',
path: path.join(__dirname, 'build'),
publicPath: '/'
publicPath: '/',
globalObject: 'self'
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx', '.scss', '.css'],
@@ -97,6 +98,10 @@ module.exports = function (_, env) {
}
]
},
{
test: /\.worker.[tj]sx?$/,
loader: 'comlink-loader'
},
{
test: /\.tsx?$/,
exclude: nodeModules,
@@ -111,16 +116,16 @@ module.exports = function (_, env) {
{
// All the codec files define a global with the same name as their file name. `exports-loader` attaches those to `module.exports`.
test: /\/codecs\/.*\.js$/,
loader: 'exports-loader',
loader: 'exports-loader'
},
{
test: /\/codecs\/.*\.wasm$/,
// This is needed to make webpack NOT process wasm files.
// See https://github.com/webpack/webpack/issues/6725
type: 'javascript/auto',
loader: 'file-loader',
loader: 'file-loader'
}
],
]
},
plugins: [
new webpack.IgnorePlugin(/(fs)/, /\/codecs\//),