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

<range-input> (#171)

Browse Source
This commit is contained in:
Jake Archibald
2018-10-02 11:41:07 +01:00
committed by GitHub
parent 248676aa31
commit b25d1eaf86
7 changed files with 249 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/codecs/generic/quality-option.tsx
View File

@@ -1,5 +1,6 @@
import { h, Component } from 'preact';
import { bind } from '../../lib/util';
import '../../components/output/custom-els/RangeInput';
interface EncodeOptions {
quality: number;
@@ -35,9 +36,8 @@ export default function qualityOption(opts: QualityOptionArg = {}) {
<div>
<label>
Quality:
<input
<range-input
name="quality"
type="range"
min={min}
max={max}
step={step || 'any'}

6
src/codecs/imagequant/options.tsx
View File

@@ -50,9 +50,8 @@ export default class QuantizerOptions extends Component<Props, State> {
</label>
<label style={{ display: options.zx ? 'none' : '' }}>
Palette Colors:
<input
<range-input
name="maxNumColors"
type="range"
min="2"
max="256"
value={'' + options.maxNumColors}
@@ -61,9 +60,8 @@ export default class QuantizerOptions extends Component<Props, State> {
</label>
<label>
Dithering:
<input
<range-input
name="dither"
type="range"
min="0"
max="1"
step="0.01"

46
src/codecs/webp/options.tsx
View File

@@ -55,12 +55,12 @@ export default class WebPEncoderOptions extends Component<Props, {}> {
filter_type: inputFieldCheckedAsNumber(form.filter_type),
use_sharp_yuv: inputFieldCheckedAsNumber(form.use_sharp_yuv),
// .value
near_lossless: inputFieldValueAsNumber(form.near_lossless),
near_lossless: 100 - inputFieldValueAsNumber(form.near_lossless),
alpha_quality: inputFieldValueAsNumber(form.alpha_quality),
alpha_filtering: inputFieldValueAsNumber(form.alpha_filtering),
sns_strength: inputFieldValueAsNumber(form.sns_strength),
filter_strength: inputFieldValueAsNumber(form.filter_strength),
filter_sharpness: inputFieldValueAsNumber(form.filter_sharpness),
filter_sharpness: 7 - inputFieldValueAsNumber(form.filter_sharpness),
pass: inputFieldValueAsNumber(form.pass),
preprocessing: inputFieldValueAsNumber(form.preprocessing),
segments: inputFieldValueAsNumber(form.segments),
@@ -74,9 +74,8 @@ export default class WebPEncoderOptions extends Component<Props, {}> {
<div>
<label>
Effort:
<input
<range-input
name="lossless_preset"
type="range"
min="0"
max="9"
value={'' + determineLosslessQuality(options.quality)}
@@ -85,13 +84,11 @@ export default class WebPEncoderOptions extends Component<Props, {}> {
</label>
<label>
Slight loss:
<input
class={styles.flipRange}
<range-input
name="near_lossless"
type="range"
min="0"
max="100"
value={'' + options.near_lossless}
value={'' + (100 - options.near_lossless)}
onChange={this.onChange}
/>
</label>
@@ -119,9 +116,8 @@ export default class WebPEncoderOptions extends Component<Props, {}> {
<div>
<label>
Effort:
<input
<range-input
name="method_input"
type="range"
min="0"
max="6"
value={'' + options.method}
@@ -130,9 +126,8 @@ export default class WebPEncoderOptions extends Component<Props, {}> {
</label>
<label>
Quality:
<input
<range-input
name="quality"
type="range"
min="0"
max="100"
step="0.01"
@@ -151,9 +146,8 @@ export default class WebPEncoderOptions extends Component<Props, {}> {
</label>
<label>
Alpha quality:
<input
<range-input
name="alpha_quality"
type="range"
min="0"
max="100"
value={'' + options.alpha_quality}
@@ -162,9 +156,8 @@ export default class WebPEncoderOptions extends Component<Props, {}> {
</label>
<label>
Alpha filter quality:
<input
<range-input
name="alpha_filtering"
type="range"
min="0"
max="2"
value={'' + options.alpha_filtering}
@@ -173,9 +166,8 @@ export default class WebPEncoderOptions extends Component<Props, {}> {
</label>
<label>
Spacial noise shaping:
<input
<range-input
name="sns_strength"
type="range"
min="0"
max="100"
value={'' + options.sns_strength}
@@ -193,9 +185,8 @@ export default class WebPEncoderOptions extends Component<Props, {}> {
</label>
<label>
Filter strength:
<input
<range-input
name="filter_strength"
type="range"
min="0"
max="100"
disabled={!!options.autofilter}
@@ -214,13 +205,11 @@ export default class WebPEncoderOptions extends Component<Props, {}> {
</label>
<label>
Filter sharpness:
<input
class={styles.flipRange}
<range-input
name="filter_sharpness"
type="range"
min="0"
max="7"
value={'' + options.filter_sharpness}
value={'' + (7 - options.filter_sharpness)}
onChange={this.onChange}
/>
</label>
@@ -235,9 +224,8 @@ export default class WebPEncoderOptions extends Component<Props, {}> {
</label>
<label>
Passes:
<input
<range-input
name="pass"
type="range"
min="1"
max="10"
value={'' + options.pass}
@@ -258,9 +246,8 @@ export default class WebPEncoderOptions extends Component<Props, {}> {
</label>
<label>
Segments:
<input
<range-input
name="segments"
type="range"
min="1"
max="4"
value={'' + options.segments}
@@ -269,9 +256,8 @@ export default class WebPEncoderOptions extends Component<Props, {}> {
</label>
<label>
Partitions:
<input
<range-input
name="partitions"
type="range"
min="0"
max="3"
value={'' + options.partitions}

3
src/codecs/webp/styles.scss
View File

@@ -1,6 +1,3 @@
.flip-range {
transform: scaleX(-1);
}
.hide {
display: none;
}