From a2121ec47bafaa084dd8c6911c89bbc4b4167f14 Mon Sep 17 00:00:00 2001 From: ergunsh Date: Sun, 27 Jun 2021 22:24:13 +0200 Subject: [PATCH 1/9] Typescriptify auto optimizer in libSquoosh --- .../{auto-optimizer.js => auto-optimizer.ts} | 69 +++++++++++++++---- 1 file changed, 57 insertions(+), 12 deletions(-) rename libsquoosh/src/{auto-optimizer.js => auto-optimizer.ts} (54%) diff --git a/libsquoosh/src/auto-optimizer.js b/libsquoosh/src/auto-optimizer.ts similarity index 54% rename from libsquoosh/src/auto-optimizer.js rename to libsquoosh/src/auto-optimizer.ts index 1c536a3d..bffa4dc3 100644 --- a/libsquoosh/src/auto-optimizer.js +++ b/libsquoosh/src/auto-optimizer.ts @@ -2,6 +2,39 @@ import { instantiateEmscriptenWasm } from './emscripten-utils.js'; import visdif from '../../codecs/visdif/visdif.js'; import visdifWasm from 'asset-url:../../codecs/visdif/visdif.wasm'; +import type ImageData from './image_data'; + +interface VisDiff { + distance: (data: Uint8ClampedArray) => number; + delete: () => void; +} + +interface VisdiffConstructor { + new (data: Uint8ClampedArray, width: number, height: number): VisDiff; +} + +interface VisDiffModule extends EmscriptenWasm.Module { + VisDiff: VisdiffConstructor; +} + +type VisDiffModuleFactory = EmscriptenWasm.ModuleFactory; + +interface BinarySearchParams { + min?: number; + max?: number; + epsilon?: number; + maxRounds?: number; +} + +interface AutoOptimizeParams extends BinarySearchParams { + butteraugliDistanceGoal?: number; +} + +interface AutoOptimizeResult { + bitmap: ImageData; + binary: Uint8Array; + quality: number; +} // `measure` is a (async) function that takes exactly one numeric parameter and // returns a value. The function is assumed to be monotonic (an increase in `parameter` @@ -9,9 +42,9 @@ import visdifWasm from 'asset-url:../../codecs/visdif/visdif.wasm'; // to find `parameter` such that `measure` returns `measureGoal`, within an error // of `epsilon`. It will use at most `maxRounds` attempts. export async function binarySearch( - measureGoal, - measure, - { min = 0, max = 100, epsilon = 0.1, maxRounds = 6 } = {}, + measureGoal: number, + measure: (val: number) => Promise, + { min = 0, max = 100, epsilon = 0.1, maxRounds = 6 }: BinarySearchParams = {}, ) { let parameter = (max - min) / 2 + min; let delta = (max - min) / 4; @@ -33,12 +66,21 @@ export async function binarySearch( } export async function autoOptimize( - bitmapIn, - encode, - decode, - { butteraugliDistanceGoal = 1.4, ...otherOpts } = {}, -) { - const { VisDiff } = await instantiateEmscriptenWasm(visdif, visdifWasm); + bitmapIn: ImageData, + encode: ( + bitmap: ImageData, + quality: number, + ) => Promise | Uint8Array, + decode: (binary: Uint8Array) => Promise | ImageData, + { + butteraugliDistanceGoal = 1.4, + ...binarySearchParams + }: AutoOptimizeParams = {}, +): Promise { + const { VisDiff } = await instantiateEmscriptenWasm( + visdif as VisDiffModuleFactory, + visdifWasm, + ); const comparator = new VisDiff( bitmapIn.data, @@ -46,8 +88,11 @@ export async function autoOptimize( bitmapIn.height, ); - let bitmapOut; - let binaryOut; + // We're able to do non null assertion because + // we know that binarySearch will set these values + let bitmapOut!: ImageData; + let binaryOut!: Uint8Array; + // Increasing quality means _decrease_ in Butteraugli distance. // `binarySearch` assumes that increasing `parameter` will // increase the metric value. So multipliy Butteraugli values by -1. @@ -58,7 +103,7 @@ export async function autoOptimize( bitmapOut = await decode(binaryOut); return -1 * comparator.distance(bitmapOut.data); }, - otherOpts, + binarySearchParams, ); comparator.delete(); From fb7e00067f7f00263d1c540c842d1e1c5036ef6f Mon Sep 17 00:00:00 2001 From: Hideo Matsumoto Date: Wed, 30 Jun 2021 22:08:27 +0900 Subject: [PATCH 2/9] Update libsquoosh/README.md code example Add code example to resize with aspect ratio preserved. --- libsquoosh/README.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/libsquoosh/README.md b/libsquoosh/README.md index 3c11e010..af8c9a93 100644 --- a/libsquoosh/README.md +++ b/libsquoosh/README.md @@ -42,11 +42,19 @@ When an image has been ingested, you can start preprocessing it and encoding it await image.decoded; //Wait until the image is decoded before running preprocessors. const preprocessOptions = { + //When both width and height are specified, the image resized to specified size. resize: { enabled: true, width: 100, height: 50, } + /* + //When either width or height is specified, the image resized to specified size keeping aspect ratio. + resize: { + enabled: true, + width: 100, + } + */ } await image.preprocess(preprocessOptions); From 4f6d21199cdba5d70df3f0e78d81cde680879de1 Mon Sep 17 00:00:00 2001 From: atjn Date: Thu, 1 Jul 2021 00:08:58 +0200 Subject: [PATCH 3/9] Remove unused variable --- libsquoosh/src/worker_pool.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libsquoosh/src/worker_pool.js b/libsquoosh/src/worker_pool.js index 45f85afe..646d3870 100644 --- a/libsquoosh/src/worker_pool.js +++ b/libsquoosh/src/worker_pool.js @@ -64,7 +64,7 @@ export default class WorkerPool { async _nextWorker() { const reader = this.workerQueue.readable.getReader(); - const { value, done } = await reader.read(); + const { value } = await reader.read(); reader.releaseLock(); return value; } From a11ac150085c34b20fc117c34aa17fec14efe6da Mon Sep 17 00:00:00 2001 From: Bob Fanger Date: Thu, 1 Jul 2021 12:11:00 +0200 Subject: [PATCH 4/9] fix: Don't overwrite value while typing (#1082) Fixes #316 --- .../lazy-app/Compress/Options/Range/index.tsx | 21 ++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/src/client/lazy-app/Compress/Options/Range/index.tsx b/src/client/lazy-app/Compress/Options/Range/index.tsx index da6e37e2..8b1150e3 100644 --- a/src/client/lazy-app/Compress/Options/Range/index.tsx +++ b/src/client/lazy-app/Compress/Options/Range/index.tsx @@ -6,10 +6,13 @@ import './custom-els/RangeInput'; import { linkRef } from 'shared/prerendered-app/util'; interface Props extends preact.JSX.HTMLAttributes {} -interface State {} +interface State { + textFocused: boolean; +} export default class Range extends Component { rangeWc?: RangeInputElement; + inputEl?: HTMLInputElement; private onTextInput = (event: Event) => { const input = event.target as HTMLInputElement; @@ -23,10 +26,19 @@ export default class Range extends Component { ); }; - render(props: Props) { + private onTextFocus = () => { + this.setState({ textFocused: true }); + }; + + private onTextBlur = () => { + this.setState({ textFocused: false }); + }; + + render(props: Props, state: State) { const { children, ...otherProps } = props; const { value, min, max, step } = props; + const textValue = state.textFocused ? this.inputEl!.value : value; return ( ); From 021b082884d875d7ea451e43591c8966689b132d Mon Sep 17 00:00:00 2001 From: Mike DelGaudio Date: Mon, 5 Jul 2021 22:24:20 -0400 Subject: [PATCH 5/9] [DOCS] Remove passive voice, simplify README --- README.md | 35 ++++++++++++++++------------------- 1 file changed, 16 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index 203703d3..976de058 100644 --- a/README.md +++ b/README.md @@ -1,36 +1,33 @@ # [Squoosh]! -[Squoosh] is an image compression web app that allows you to dive into the advanced options provided -by various image compressors. +[Squoosh] is an image compression web app that provides lossless image quality with a significant reduction to file size. # API & CLI -Squoosh now has [an API](https://github.com/GoogleChromeLabs/squoosh/tree/dev/libsquoosh) and [a CLI](https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli) that allows you to compress many images at once. +Squoosh has [an API](https://github.com/GoogleChromeLabs/squoosh/tree/dev/libsquoosh) and [a CLI](https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli) to compress many images at once. # Privacy -Google Analytics is used to record the following: +Squoosh does not send your image to a server. All image compression processes locally. -- [Basic visit data](https://support.google.com/analytics/answer/6004245?ref_topic=2919631). -- Before and after image size once an image is downloaded. These values are rounded to the nearest - kilobyte. -- If install is available, when Squoosh is installed, and what method was used to install Squoosh. +However, Squoosh utilizes Google Analytics to collect the following: -Image compression is handled locally; no additional data is sent to the server. +- [Basic visitor data](https://support.google.com/analytics/answer/6004245?ref_topic=2919631). +- The before and after image size value. +- If Squoosh CLI, the type of Squoosh installation. +- If Squoosh CLI, the installation time and date. -# Building locally +# Developing -Clone the repo, and: +To develop for Squoosh, use the following: -```sh -npm install -npm run build -``` +1. Clone the repository. +1. To install node packages, run `npm install`. +1. To build the app, run `npm run build`. +1. To start the development server, run `npm run dev`. -You can run the development server with: +# Contributing -```sh -npm run dev -``` +Squoosh is an open-source project that appreciates all community involvement. To contribute to the project, follow the [contribute guide](/CONTRIBUTING.md). [squoosh]: https://squoosh.app From d953822d19f6260cf1881406ae80de05f16a548f Mon Sep 17 00:00:00 2001 From: Mike DelGaudio Date: Mon, 5 Jul 2021 22:37:04 -0400 Subject: [PATCH 6/9] [DOCS] Remove passive voice, simplify README --- README.md | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 976de058..29c54b13 100644 --- a/README.md +++ b/README.md @@ -21,10 +21,19 @@ However, Squoosh utilizes Google Analytics to collect the following: To develop for Squoosh, use the following: -1. Clone the repository. -1. To install node packages, run `npm install`. -1. To build the app, run `npm run build`. -1. To start the development server, run `npm run dev`. +1. Clone the repository +1. Install node packages, by running: + ```sh + npm install + ``` +1. Build the app, by running: + ```sh + npm run build + ``` +1. Start the development server, by running: + ```sh + npm run dev + ``` # Contributing From fe21322b2bf174567e2fa491453b6ea15e6aec9a Mon Sep 17 00:00:00 2001 From: Mike DelGaudio Date: Tue, 6 Jul 2021 14:34:04 -0400 Subject: [PATCH 7/9] [DOCS] Update list of develop steps --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 29c54b13..74ad75ac 100644 --- a/README.md +++ b/README.md @@ -19,18 +19,18 @@ However, Squoosh utilizes Google Analytics to collect the following: # Developing -To develop for Squoosh, use the following: +To develop for Squoosh: 1. Clone the repository -1. Install node packages, by running: +1. To install node packages, run: ```sh npm install ``` -1. Build the app, by running: +1. Then build the app by running: ```sh npm run build ``` -1. Start the development server, by running: +1. After building, start the development server by running: ```sh npm run dev ``` From 192cfc62ee85037769a203478a7097facdb25201 Mon Sep 17 00:00:00 2001 From: Mike DelGaudio <43451174+mikedelgaudio@users.noreply.github.com> Date: Wed, 7 Jul 2021 09:57:44 -0400 Subject: [PATCH 8/9] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 74ad75ac..733526b5 100644 --- a/README.md +++ b/README.md @@ -14,8 +14,8 @@ However, Squoosh utilizes Google Analytics to collect the following: - [Basic visitor data](https://support.google.com/analytics/answer/6004245?ref_topic=2919631). - The before and after image size value. -- If Squoosh CLI, the type of Squoosh installation. -- If Squoosh CLI, the installation time and date. +- If Squoosh PWA, the type of Squoosh installation. +- If Squoosh PWA, the installation time and date. # Developing From d4d0db6c49c322bfeabe6bab5d271c3a4b4213f3 Mon Sep 17 00:00:00 2001 From: Mike DelGaudio <43451174+mikedelgaudio@users.noreply.github.com> Date: Mon, 19 Jul 2021 11:47:52 -0400 Subject: [PATCH 9/9] update header statement --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 733526b5..f60b0935 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # [Squoosh]! -[Squoosh] is an image compression web app that provides lossless image quality with a significant reduction to file size. +[Squoosh] is an image compression web app that reduces image sizes through numerous formats. # API & CLI