fabric 5.3.0 → 6.0.0-beta3

package/src/filters/Noise.ts

@@ -0,0 +1,94 @@
+import type { TClassProperties } from '../typedefs';
+import { BaseFilter } from './BaseFilter';
+import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import { classRegistry } from '../ClassRegistry';
+import { fragmentSource } from './shaders/noise';
+
+export const noiseDefaultValues: Partial<TClassProperties<Noise>> = {
+  mainParameter: 'noise',
+  noise: 0,
+};
+
+/**
+ * Noise filter class
+ * @example
+ * const filter = new Noise({
+ *   noise: 700
+ * });
+ * object.filters.push(filter);
+ * object.applyFilters();
+ * canvas.renderAll();
+ */
+export class Noise extends BaseFilter {
+  /**
+   * Noise value, from
+   * @param {Number} noise
+   * @default
+   */
+  declare noise: number;
+
+  static defaults = noiseDefaultValues;
+
+  getFragmentSource() {
+    return fragmentSource;
+  }
+
+  /**
+   * Apply the Brightness operation to a Uint8ClampedArray representing the pixels of an image.
+   *
+   * @param {Object} options
+   * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered.
+   */
+  applyTo2d({ imageData: { data } }: T2DPipelineState) {
+    if (this.noise === 0) {
+      return;
+    }
+    const noise = this.noise;
+    for (let i = 0; i < data.length; i += 4) {
+      const rand = (0.5 - Math.random()) * noise;
+      data[i] += rand;
+      data[i + 1] += rand;
+      data[i + 2] += rand;
+    }
+  }
+
+  /**
+   * Return WebGL uniform locations for this filter's shader.
+   *
+   * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
+   * @param {WebGLShaderProgram} program This filter's compiled shader program.
+   */
+  getUniformLocations(
+    gl: WebGLRenderingContext,
+    program: WebGLProgram
+  ): TWebGLUniformLocationMap {
+    return {
+      uNoise: gl.getUniformLocation(program, 'uNoise'),
+      uSeed: gl.getUniformLocation(program, 'uSeed'),
+    };
+  }
+
+  /**
+   * Send data from this filter to its shader program's uniforms.
+   *
+   * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
+   * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects
+   */
+  sendUniformData(
+    gl: WebGLRenderingContext,
+    uniformLocations: TWebGLUniformLocationMap
+  ) {
+    gl.uniform1f(uniformLocations.uNoise, this.noise / 255);
+    gl.uniform1f(uniformLocations.uSeed, Math.random());
+  }
+
+  /**
+   * Returns object representation of an instance
+   * @return {Object} Object representation of an instance
+   */
+  toObject() {
+    return { ...super.toObject(), noise: this.noise };
+  }
+}
+
+classRegistry.setClass(Noise);

package/src/filters/Pixelate.ts

@@ -0,0 +1,96 @@
+import type { TClassProperties } from '../typedefs';
+import { BaseFilter } from './BaseFilter';
+import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import { classRegistry } from '../ClassRegistry';
+import { fragmentSource } from './shaders/pixelate';
+
+export const pixelateDefaultValues: Partial<TClassProperties<Pixelate>> = {
+  blocksize: 4,
+  mainParameter: 'blocksize',
+};
+
+/**
+ * Pixelate filter class
+ * @example
+ * const filter = new Pixelate({
+ *   blocksize: 8
+ * });
+ * object.filters.push(filter);
+ * object.applyFilters();
+ */
+export class Pixelate extends BaseFilter {
+  declare blocksize: number;
+
+  static defaults = pixelateDefaultValues;
+
+  /**
+   * Apply the Pixelate operation to a Uint8ClampedArray representing the pixels of an image.
+   *
+   * @param {Object} options
+   * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered.
+   */
+  applyTo2d({ imageData: { data, width, height } }: T2DPipelineState) {
+    for (let i = 0; i < height; i += this.blocksize) {
+      for (let j = 0; j < width; j += this.blocksize) {
+        const index = i * 4 * width + j * 4;
+        const r = data[index];
+        const g = data[index + 1];
+        const b = data[index + 2];
+        const a = data[index + 3];
+
+        for (let _i = i; _i < Math.min(i + this.blocksize, height); _i++) {
+          for (let _j = j; _j < Math.min(j + this.blocksize, width); _j++) {
+            const index = _i * 4 * width + _j * 4;
+            data[index] = r;
+            data[index + 1] = g;
+            data[index + 2] = b;
+            data[index + 3] = a;
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * Indicate when the filter is not gonna apply changes to the image
+   **/
+  isNeutralState() {
+    return this.blocksize === 1;
+  }
+
+  protected getFragmentSource(): string {
+    return fragmentSource;
+  }
+
+  /**
+   * Return WebGL uniform locations for this filter's shader.
+   *
+   * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
+   * @param {WebGLShaderProgram} program This filter's compiled shader program.
+   */
+  getUniformLocations(
+    gl: WebGLRenderingContext,
+    program: WebGLProgram
+  ): TWebGLUniformLocationMap {
+    return {
+      uBlocksize: gl.getUniformLocation(program, 'uBlocksize'),
+      uStepW: gl.getUniformLocation(program, 'uStepW'),
+      uStepH: gl.getUniformLocation(program, 'uStepH'),
+    };
+  }
+
+  /**
+   * Send data from this filter to its shader program's uniforms.
+   *
+   * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
+   * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects
+   */
+  sendUniformData(
+    gl: WebGLRenderingContext,
+    uniformLocations: TWebGLUniformLocationMap
+  ) {
+    gl.uniform1f(uniformLocations.uBlocksize, this.blocksize);
+  }
+}
+
+classRegistry.setClass(Pixelate);

package/src/filters/RemoveColor.ts

@@ -0,0 +1,135 @@
+import { Color } from '../color/Color';
+import type { TClassProperties } from '../typedefs';
+import { BaseFilter } from './BaseFilter';
+import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import { classRegistry } from '../ClassRegistry';
+import { fragmentShader } from './shaders/removeColor';
+export const removeColorDefaultValues: Partial<TClassProperties<RemoveColor>> =
+  {
+    color: '#FFFFFF',
+    distance: 0.02,
+    useAlpha: false,
+  };
+
+/**
+ * Remove white filter class
+ * @example
+ * const filter = new RemoveColor({
+ *   threshold: 0.2,
+ * });
+ * object.filters.push(filter);
+ * object.applyFilters();
+ * canvas.renderAll();
+ */
+export class RemoveColor extends BaseFilter {
+  /**
+   * Color to remove, in any format understood by {@link Color}.
+   * @param {String} type
+   * @default
+   */
+  declare color: string;
+
+  /**
+   * distance to actual color, as value up or down from each r,g,b
+   * between 0 and 1
+   **/
+  declare distance: number;
+
+  /**
+   * For color to remove inside distance, use alpha channel for a smoother deletion
+   * NOT IMPLEMENTED YET
+   **/
+  declare useAlpha: boolean;
+
+  static defaults = removeColorDefaultValues;
+
+  getFragmentShader() {
+    return fragmentShader;
+  }
+
+  /**
+   * Applies filter to canvas element
+   * @param {Object} canvasEl Canvas element to apply filter to
+   */
+  applyTo2d({ imageData: { data } }: T2DPipelineState) {
+    const distance = this.distance * 255,
+      source = new Color(this.color).getSource(),
+      lowC = [source[0] - distance, source[1] - distance, source[2] - distance],
+      highC = [
+        source[0] + distance,
+        source[1] + distance,
+        source[2] + distance,
+      ];
+
+    for (let i = 0; i < data.length; i += 4) {
+      const r = data[i];
+      const g = data[i + 1];
+      const b = data[i + 2];
+
+      if (
+        r > lowC[0] &&
+        g > lowC[1] &&
+        b > lowC[2] &&
+        r < highC[0] &&
+        g < highC[1] &&
+        b < highC[2]
+      ) {
+        data[i + 3] = 0;
+      }
+    }
+  }
+
+  /**
+   * Return WebGL uniform locations for this filter's shader.
+   *
+   * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
+   * @param {WebGLShaderProgram} program This filter's compiled shader program.
+   */
+  getUniformLocations(
+    gl: WebGLRenderingContext,
+    program: WebGLProgram
+  ): TWebGLUniformLocationMap {
+    return {
+      uLow: gl.getUniformLocation(program, 'uLow'),
+      uHigh: gl.getUniformLocation(program, 'uHigh'),
+    };
+  }
+
+  /**
+   * Send data from this filter to its shader program's uniforms.
+   *
+   * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
+   * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects
+   */
+  sendUniformData(
+    gl: WebGLRenderingContext,
+    uniformLocations: TWebGLUniformLocationMap
+  ) {
+    const source = new Color(this.color).getSource(),
+      distance = this.distance,
+      lowC = [
+        0 + source[0] / 255 - distance,
+        0 + source[1] / 255 - distance,
+        0 + source[2] / 255 - distance,
+        1,
+      ],
+      highC = [
+        source[0] / 255 + distance,
+        source[1] / 255 + distance,
+        source[2] / 255 + distance,
+        1,
+      ];
+    gl.uniform4fv(uniformLocations.uLow, lowC);
+    gl.uniform4fv(uniformLocations.uHigh, highC);
+  }
+
+  /**
+   * Returns object representation of an instance
+   * @return {Object} Object representation of an instance
+   */
+  toObject() {
+    return { ...super.toObject(), color: this.color, distance: this.distance };
+  }
+}
+
+classRegistry.setClass(RemoveColor);