Implement sRGB color conversion (#510)

* Add sRGB -> RGB conversion before resize

* Add clamping for color space conversions

* Clip for demultiplication as well

* Fixing linear <-> srgb conversion

* Update benchmark

* Decouple srgb calculations

* Generate lookup tables

* Update src/codecs/resize/options.tsx

* Defaulting on, renaming, removing redundant state

src/codecs/resize/options.tsx

@@ -19,13 +19,11 @@ interface Props {
 
 interface State {
   maintainAspect: boolean;
-  premultiply: boolean;
 }
 
 export default class ResizerOptions extends Component<Props, State> {
   state: State = {
     maintainAspect: true,
-    premultiply: true,
   };
 
   form?: HTMLFormElement;
@@ -43,6 +41,7 @@ export default class ResizerOptions extends Component<Props, State> {
       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'],
     };
@@ -95,7 +94,7 @@ export default class ResizerOptions extends Component<Props, State> {
             <option value="lanczos3">Lanczos3</option>
             <option value="mitchell">Mitchell</option>
             <option value="catrom">Catmull-Rom</option>
-            <option value="triangle">Triangle</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>
@@ -138,6 +137,17 @@ export default class ResizerOptions extends Component<Props, State> {
             </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

src/codecs/resize/processor-meta.ts

@@ -17,6 +17,7 @@ export interface BrowserResizeOptions extends ResizeOptionsCommon {
 export interface WorkerResizeOptions extends ResizeOptionsCommon {
   method: WorkerResizeMethods;
   premultiply: boolean;
+  linearRGB: boolean;
 }
 
 export interface VectorResizeOptions extends ResizeOptionsCommon {
@@ -41,4 +42,5 @@ export const defaultOptions: ResizeOptions = {
   method: 'lanczos3',
   fitMethod: 'stretch',
   premultiply: true,
+  linearRGB: true,
 };

src/codecs/resize/processor.ts

@@ -45,7 +45,7 @@ export async function resize(data: ImageData, opts: WorkerResizeOptions): Promis
 
   const result = wasm_bindgen.resize(
     new Uint8Array(input.data.buffer), input.width, input.height, opts.width, opts.height,
-    resizeMethods.indexOf(opts.method), opts.premultiply,
+    resizeMethods.indexOf(opts.method), opts.premultiply, opts.linearRGB,
   );
 
   return new ImageData(new Uint8ClampedArray(result.buffer), opts.width, opts.height);