Implement alpha premultiplication (#507)

* Implement alpha premultiplication

* Add benchmark to resize

* Only display "Premultiply alpha" if it's one of the rust resize types.

* Add comment about division by zero

src/codecs/resize/options.tsx

@@ -1,8 +1,10 @@
 import { h, Component } from 'preact';
 import linkState from 'linkstate';
 import { bind, linkRef } from '../../lib/initial-util';
-import { inputFieldValueAsNumber, inputFieldValue, preventDefault } from '../../lib/util';
-import { ResizeOptions } from './processor-meta';
+import {
+  inputFieldValueAsNumber, inputFieldValue, preventDefault, inputFieldChecked,
+} from '../../lib/util';
+import { ResizeOptions, isWorkerOptions } from './processor-meta';
 import * as style from '../../components/Options/style.scss';
 import Checkbox from '../../components/checkbox';
 import Expander from '../../components/expander';
@@ -17,11 +19,13 @@ interface Props {
 
 interface State {
   maintainAspect: boolean;
+  premultiply: boolean;
 }
 
 export default class ResizerOptions extends Component<Props, State> {
   state: State = {
     maintainAspect: true,
+    premultiply: true,
   };
 
   form?: HTMLFormElement;
@@ -38,6 +42,7 @@ export default class ResizerOptions extends Component<Props, State> {
       width: inputFieldValueAsNumber(width),
       height: inputFieldValueAsNumber(height),
       method: form.resizeMethod.value,
+      premultiply: inputFieldChecked(form.premultiply, true),
       // Casting, as the formfield only returns the correct values.
       fitMethod: inputFieldValue(form.fitMethod, options.fitMethod) as ResizeOptions['fitMethod'],
     };
@@ -121,6 +126,19 @@ 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
+          }
+        </Expander>
         <label class={style.optionInputFirst}>
           <Checkbox
             name="maintainAspect"

src/codecs/resize/processor-meta.ts

@@ -1,25 +1,37 @@
 type BrowserResizeMethods = 'browser-pixelated' | 'browser-low' | 'browser-medium' | 'browser-high';
-type WorkerResizeMethods = 'point' | 'triangle' | 'catrom' | 'mitchell' | 'lanczos3';
+type WorkerResizeMethods = 'triangle' | 'catrom' | 'mitchell' | 'lanczos3';
+const workerResizeMethods: WorkerResizeMethods[] = ['triangle', 'catrom', 'mitchell', 'lanczos3'];
 
-export interface ResizeOptions {
+export type ResizeOptions = BrowserResizeOptions | WorkerResizeOptions | VectorResizeOptions;
+
+export interface ResizeOptionsCommon {
   width: number;
   height: number;
-  method: 'vector' | BrowserResizeMethods | WorkerResizeMethods;
   fitMethod: 'stretch' | 'contain';
 }
 
-export interface BrowserResizeOptions extends ResizeOptions {
+export interface BrowserResizeOptions extends ResizeOptionsCommon {
   method: BrowserResizeMethods;
 }
 
-export interface WorkerResizeOptions extends ResizeOptions {
+export interface WorkerResizeOptions extends ResizeOptionsCommon {
   method: WorkerResizeMethods;
+  premultiply: boolean;
 }
 
-export interface VectorResizeOptions extends ResizeOptions {
+export interface VectorResizeOptions extends ResizeOptionsCommon {
   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.
@@ -28,4 +40,5 @@ export const defaultOptions: ResizeOptions = {
   // This will be set to 'vector' if the input is SVG.
   method: 'lanczos3',
   fitMethod: 'stretch',
+  premultiply: 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),
+    resizeMethods.indexOf(opts.method), opts.premultiply,
   );
 
   return new ImageData(new Uint8ClampedArray(result.buffer), opts.width, opts.height);