fabric 5.3.0 → 6.0.0-beta3

package/src/filters/BlendColor.ts

@@ -0,0 +1,217 @@
+import { Color } from '../color/Color';
+import { TClassProperties } from '../typedefs';
+import { BaseFilter } from './BaseFilter';
+import { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import { classRegistry } from '../ClassRegistry';
+import { blendColorFragmentSource } from './shaders/blendColor';
+
+type TBlendMode =
+  | 'multiply'
+  | 'add'
+  | 'difference'
+  | 'screen'
+  | 'subtract'
+  | 'darken'
+  | 'lighten'
+  | 'overlay'
+  | 'exclusion'
+  | 'tint';
+
+export const blendColorDefaultValues: Partial<TClassProperties<BlendColor>> = {
+  color: '#F95C63',
+  mode: 'multiply',
+  alpha: 1,
+};
+
+/**
+ * Color Blend filter class
+ * @example
+ * const filter = new BlendColor({
+ *  color: '#000',
+ *  mode: 'multiply'
+ * });
+ *
+ * const filter = new BlendImage({
+ *  image: fabricImageObject,
+ *  mode: 'multiply',
+ *  alpha: 0.5
+ * });
+ * object.filters.push(filter);
+ * object.applyFilters();
+ * canvas.renderAll();
+ */
+export class BlendColor extends BaseFilter {
+  /**
+   * Color to make the blend operation with. default to a reddish color since black or white
+   * gives always strong result.
+   * @type String
+   * @default
+   **/
+  declare color: string;
+
+  /**
+   * Blend mode for the filter: one of multiply, add, difference, screen, subtract,
+   * darken, lighten, overlay, exclusion, tint.
+   * @type String
+   * @default
+   **/
+  declare mode: TBlendMode;
+
+  /**
+   * alpha value. represent the strength of the blend color operation.
+   * @type Number
+   * @default
+   **/
+  declare alpha: number;
+
+  static defaults = blendColorDefaultValues;
+
+  getCacheKey() {
+    return `${this.type}_${this.mode}`;
+  }
+
+  protected getFragmentSource(): string {
+    return `
+      precision highp float;
+      uniform sampler2D uTexture;
+      uniform vec4 uColor;
+      varying vec2 vTexCoord;
+      void main() {
+        vec4 color = texture2D(uTexture, vTexCoord);
+        gl_FragColor = color;
+        if (color.a > 0.0) {
+          ${blendColorFragmentSource[this.mode]}
+        }
+      }
+      `;
+  }
+
+  /**
+   * Apply the Blend 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) {
+    const source = new Color(this.color).getSource();
+    const tr = source[0] * this.alpha;
+    const tg = source[1] * this.alpha;
+    const tb = source[2] * this.alpha;
+    const alpha1 = 1 - this.alpha;
+
+    for (let i = 0; i < data.length; i += 4) {
+      const r = data[i];
+      const g = data[i + 1];
+      const b = data[i + 2];
+
+      switch (this.mode) {
+        case 'multiply':
+          data[i] = (r * tr) / 255;
+          data[i + 1] = (g * tg) / 255;
+          data[i + 2] = (b * tb) / 255;
+          break;
+        case 'screen':
+          data[i] = 255 - ((255 - r) * (255 - tr)) / 255;
+          data[i + 1] = 255 - ((255 - g) * (255 - tg)) / 255;
+          data[i + 2] = 255 - ((255 - b) * (255 - tb)) / 255;
+          break;
+        case 'add':
+          data[i] = r + tr;
+          data[i + 1] = g + tg;
+          data[i + 2] = b + tb;
+          break;
+        case 'difference':
+          data[i] = Math.abs(r - tr);
+          data[i + 1] = Math.abs(g - tg);
+          data[i + 2] = Math.abs(b - tb);
+          break;
+        case 'subtract':
+          data[i] = r - tr;
+          data[i + 1] = g - tg;
+          data[i + 2] = b - tb;
+          break;
+        case 'darken':
+          data[i] = Math.min(r, tr);
+          data[i + 1] = Math.min(g, tg);
+          data[i + 2] = Math.min(b, tb);
+          break;
+        case 'lighten':
+          data[i] = Math.max(r, tr);
+          data[i + 1] = Math.max(g, tg);
+          data[i + 2] = Math.max(b, tb);
+          break;
+        case 'overlay':
+          data[i] =
+            tr < 128
+              ? (2 * r * tr) / 255
+              : 255 - (2 * (255 - r) * (255 - tr)) / 255;
+          data[i + 1] =
+            tg < 128
+              ? (2 * g * tg) / 255
+              : 255 - (2 * (255 - g) * (255 - tg)) / 255;
+          data[i + 2] =
+            tb < 128
+              ? (2 * b * tb) / 255
+              : 255 - (2 * (255 - b) * (255 - tb)) / 255;
+          break;
+        case 'exclusion':
+          data[i] = tr + r - (2 * tr * r) / 255;
+          data[i + 1] = tg + g - (2 * tg * g) / 255;
+          data[i + 2] = tb + b - (2 * tb * b) / 255;
+          break;
+        case 'tint':
+          data[i] = tr + r * alpha1;
+          data[i + 1] = tg + g * alpha1;
+          data[i + 2] = tb + b * alpha1;
+      }
+    }
+  }
+
+  /**
+   * 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 {
+      uColor: gl.getUniformLocation(program, 'uColor'),
+    };
+  }
+
+  /**
+   * 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();
+    source[0] = (this.alpha * source[0]) / 255;
+    source[1] = (this.alpha * source[1]) / 255;
+    source[2] = (this.alpha * source[2]) / 255;
+    source[3] = this.alpha;
+    gl.uniform4fv(uniformLocations.uColor, source);
+  }
+
+  /**
+   * Returns object representation of an instance
+   * @return {Object} Object representation of an instance
+   */
+  toObject() {
+    return {
+      type: this.type,
+      color: this.color,
+      mode: this.mode,
+      alpha: this.alpha,
+    };
+  }
+}
+
+classRegistry.setClass(BlendColor);

package/src/filters/BlendImage.ts

@@ -0,0 +1,228 @@
+import { Image } from '../shapes/Image';
+import type { TClassProperties } from '../typedefs';
+import { createCanvasElement } from '../util/misc/dom';
+import { BaseFilter } from './BaseFilter';
+import type {
+  T2DPipelineState,
+  TWebGLPipelineState,
+  TWebGLUniformLocationMap,
+} from './typedefs';
+import { WebGLFilterBackend } from './WebGLFilterBackend';
+import { classRegistry } from '../ClassRegistry';
+import { fragmentSource } from './shaders/blendImage';
+
+export type TBlendImageMode = 'multiply' | 'mask';
+
+export const blendImageDefaultValues: Partial<TClassProperties<BlendImage>> = {
+  mode: 'multiply',
+  alpha: 1,
+  vertexSource: `
+    attribute vec2 aPosition;
+    varying vec2 vTexCoord;
+    varying vec2 vTexCoord2;
+    uniform mat3 uTransformMatrix;
+    void main() {
+      vTexCoord = aPosition;
+      vTexCoord2 = (uTransformMatrix * vec3(aPosition, 1.0)).xy;
+      gl_Position = vec4(aPosition * 2.0 - 1.0, 0.0, 1.0);
+    }
+    `,
+};
+
+/**
+ * Image Blend filter class
+ * @example
+ * const filter = new filters.BlendColor({
+ *  color: '#000',
+ *  mode: 'multiply'
+ * });
+ *
+ * const filter = new BlendImage({
+ *  image: fabricImageObject,
+ *  mode: 'multiply',
+ *  alpha: 0.5
+ * });
+ * object.filters.push(filter);
+ * object.applyFilters();
+ * canvas.renderAll();
+ */
+export class BlendImage extends BaseFilter {
+  /**
+   * Color to make the blend operation with. default to a reddish color since black or white
+   * gives always strong result.
+   **/
+  declare image: Image;
+
+  declare mode: TBlendImageMode;
+
+  /**
+   * alpha value. represent the strength of the blend image operation.
+   * not implemented.
+   **/
+  declare alpha: number;
+
+  static defaults = blendImageDefaultValues;
+
+  getCacheKey() {
+    return `${this.type}_${this.mode}`;
+  }
+
+  getFragmentSource(): string {
+    return fragmentSource[this.mode];
+  }
+
+  applyToWebGL(options: TWebGLPipelineState) {
+    const gl = options.context,
+      texture = this.createTexture(options.filterBackend, this.image);
+    this.bindAdditionalTexture(gl, texture, gl.TEXTURE1);
+    super.applyToWebGL(options);
+    this.unbindAdditionalTexture(gl, gl.TEXTURE1);
+  }
+
+  createTexture(backend: WebGLFilterBackend, image: Image) {
+    return backend.getCachedTexture(image.cacheKey, image.getElement());
+  }
+
+  /**
+   * Calculate a transformMatrix to adapt the image to blend over
+   * @param {Object} options
+   * @param {WebGLRenderingContext} options.context The GL context used for rendering.
+   * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type.
+   */
+  calculateMatrix() {
+    const image = this.image,
+      { width, height } = image.getElement();
+    return [
+      1 / image.scaleX,
+      0,
+      0,
+      0,
+      1 / image.scaleY,
+      0,
+      -image.left / width,
+      -image.top / height,
+      1,
+    ];
+  }
+
+  /**
+   * Apply the Blend 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 },
+    filterBackend: { resources },
+  }: T2DPipelineState) {
+    const image = this.image;
+    if (!resources.blendImage) {
+      resources.blendImage = createCanvasElement();
+    }
+    const canvas1 = resources.blendImage;
+    const context = canvas1.getContext('2d')!;
+    if (canvas1.width !== width || canvas1.height !== height) {
+      canvas1.width = width;
+      canvas1.height = height;
+    } else {
+      context.clearRect(0, 0, width, height);
+    }
+    context.setTransform(
+      image.scaleX,
+      0,
+      0,
+      image.scaleY,
+      image.left,
+      image.top
+    );
+    context.drawImage(image.getElement(), 0, 0, width, height);
+    const blendData = context.getImageData(0, 0, width, height).data;
+    for (let i = 0; i < data.length; i += 4) {
+      const r = data[i];
+      const g = data[i + 1];
+      const b = data[i + 2];
+      const a = data[i + 3];
+
+      const tr = blendData[i];
+      const tg = blendData[i + 1];
+      const tb = blendData[i + 2];
+      const ta = blendData[i + 3];
+
+      switch (this.mode) {
+        case 'multiply':
+          data[i] = (r * tr) / 255;
+          data[i + 1] = (g * tg) / 255;
+          data[i + 2] = (b * tb) / 255;
+          data[i + 3] = (a * ta) / 255;
+          break;
+        case 'mask':
+          data[i + 3] = ta;
+          break;
+      }
+    }
+  }
+
+  /**
+   * 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 {
+      uTransformMatrix: gl.getUniformLocation(program, 'uTransformMatrix'),
+      uImage: gl.getUniformLocation(program, 'uImage'),
+    };
+  }
+
+  /**
+   * 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 matrix = this.calculateMatrix();
+    gl.uniform1i(uniformLocations.uImage, 1); // texture unit 1.
+    gl.uniformMatrix3fv(uniformLocations.uTransformMatrix, false, matrix);
+  }
+
+  /**
+   * Returns object representation of an instance
+   * @return {Object} Object representation of an instance
+   */
+  toObject() {
+    return {
+      type: this.type,
+      image: this.image && this.image.toObject(),
+      mode: this.mode,
+      alpha: this.alpha,
+    };
+  }
+
+  /**
+   * Create filter instance from an object representation
+   * @static
+   * @param {object} object Object to create an instance from
+   * @param {object} [options]
+   * @param {AbortSignal} [options.signal] handle aborting image loading, see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
+   * @returns {Promise<BlendImage>}
+   */
+  static fromObject(
+    { type, image, ...filterOptions }: Record<string, any>,
+    options: { signal: AbortSignal }
+  ) {
+    return Image.fromObject(image, options).then(
+      (enlivedImage) =>
+        new this({ ...filterOptions, image: enlivedImage }) as BaseFilter
+    );
+  }
+}
+
+classRegistry.setClass(BlendImage);

package/src/filters/Blur.ts

@@ -0,0 +1,179 @@
+import type { TClassProperties } from '../typedefs';
+import { createCanvasElement } from '../util/misc/dom';
+import { BaseFilter } from './BaseFilter';
+import type {
+  TWebGLPipelineState,
+  T2DPipelineState,
+  TWebGLUniformLocationMap,
+} from './typedefs';
+import { isWebGLPipelineState } from './typedefs';
+import { classRegistry } from '../ClassRegistry';
+import { fragmentSource } from './shaders/blur';
+
+export const blurDefaultValues: Partial<TClassProperties<Blur>> = {
+  blur: 0,
+  mainParameter: 'blur',
+};
+
+/**
+ * Blur filter class
+ * @example
+ * const filter = new Blur({
+ *   blur: 0.5
+ * });
+ * object.filters.push(filter);
+ * object.applyFilters();
+ * canvas.renderAll();
+ */
+export class Blur extends BaseFilter {
+  /**
+   * blur value, in percentage of image dimensions.
+   * specific to keep the image blur constant at different resolutions
+   * range between 0 and 1.
+   * @type Number
+   * @default
+   */
+  declare blur: number;
+
+  declare horizontal: boolean;
+  declare aspectRatio: number;
+
+  static defaults = blurDefaultValues;
+
+  getFragmentSource(): string {
+    return fragmentSource;
+  }
+
+  applyTo(options: TWebGLPipelineState | T2DPipelineState) {
+    if (isWebGLPipelineState(options)) {
+      // this aspectRatio is used to give the same blur to vertical and horizontal
+      this.aspectRatio = options.sourceWidth / options.sourceHeight;
+      options.passes++;
+      this._setupFrameBuffer(options);
+      this.horizontal = true;
+      this.applyToWebGL(options);
+      this._swapTextures(options);
+      this._setupFrameBuffer(options);
+      this.horizontal = false;
+      this.applyToWebGL(options);
+      this._swapTextures(options);
+    } else {
+      this.applyTo2d(options);
+    }
+  }
+
+  applyTo2d(options: T2DPipelineState) {
+    options.imageData = this.simpleBlur(options);
+  }
+
+  simpleBlur({
+    ctx,
+    imageData,
+    filterBackend: { resources },
+  }: T2DPipelineState) {
+    const { width, height } = imageData;
+    if (!resources.blurLayer1) {
+      resources.blurLayer1 = createCanvasElement();
+      resources.blurLayer2 = createCanvasElement();
+    }
+    const canvas1 = resources.blurLayer1!;
+    const canvas2 = resources.blurLayer2!;
+    if (canvas1.width !== width || canvas1.height !== height) {
+      canvas2.width = canvas1.width = width;
+      canvas2.height = canvas1.height = height;
+    }
+    const ctx1 = canvas1.getContext('2d')!,
+      ctx2 = canvas2.getContext('2d')!,
+      nSamples = 15,
+      blur = this.blur * 0.06 * 0.5;
+    let random, percent, j, i;
+
+    // load first canvas
+    ctx1.putImageData(imageData, 0, 0);
+    ctx2.clearRect(0, 0, width, height);
+
+    for (i = -nSamples; i <= nSamples; i++) {
+      random = (Math.random() - 0.5) / 4;
+      percent = i / nSamples;
+      j = blur * percent * width + random;
+      ctx2.globalAlpha = 1 - Math.abs(percent);
+      ctx2.drawImage(canvas1, j, random);
+      ctx1.drawImage(canvas2, 0, 0);
+      ctx2.globalAlpha = 1;
+      ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
+    }
+    for (i = -nSamples; i <= nSamples; i++) {
+      random = (Math.random() - 0.5) / 4;
+      percent = i / nSamples;
+      j = blur * percent * height + random;
+      ctx2.globalAlpha = 1 - Math.abs(percent);
+      ctx2.drawImage(canvas1, random, j);
+      ctx1.drawImage(canvas2, 0, 0);
+      ctx2.globalAlpha = 1;
+      ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
+    }
+    ctx.drawImage(canvas1, 0, 0);
+    const newImageData = ctx.getImageData(0, 0, canvas1.width, canvas1.height);
+    ctx1.globalAlpha = 1;
+    ctx1.clearRect(0, 0, canvas1.width, canvas1.height);
+    return newImageData;
+  }
+
+  /**
+   * 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 {
+      delta: gl.getUniformLocation(program, 'uDelta'),
+    };
+  }
+
+  /**
+   * 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 delta = this.chooseRightDelta();
+    gl.uniform2fv(uniformLocations.delta, delta);
+  }
+
+  /**
+   * choose right value of image percentage to blur with
+   * @returns {Array} a numeric array with delta values
+   */
+  chooseRightDelta() {
+    let blurScale = 1;
+    const delta = [0, 0];
+    if (this.horizontal) {
+      if (this.aspectRatio > 1) {
+        // image is wide, i want to shrink radius horizontal
+        blurScale = 1 / this.aspectRatio;
+      }
+    } else {
+      if (this.aspectRatio < 1) {
+        // image is tall, i want to shrink radius vertical
+        blurScale = this.aspectRatio;
+      }
+    }
+    const blur = blurScale * this.blur * 0.12;
+    if (this.horizontal) {
+      delta[0] = blur;
+    } else {
+      delta[1] = blur;
+    }
+    return delta;
+  }
+}
+
+classRegistry.setClass(Blur);

package/src/filters/Boilerplate.ts

@@ -0,0 +1,94 @@
+import { TClassProperties } from '../typedefs';
+import { BaseFilter } from './BaseFilter';
+import { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+
+export const myFilterDefaultValues: Partial<TClassProperties<MyFilter>> = {
+  myParameter: 0,
+  mainParameter: 'myParameter',
+};
+
+/**
+ * MyFilter filter class
+ * @example
+ * const filter = new MyFilter({
+ *   add here an example of how to use your filter
+ * });
+ * object.filters.push(filter);
+ * object.applyFilters();
+ */
+export class MyFilter extends BaseFilter {
+  /**
+   * MyFilter value, from -1 to 1.
+   * translated to -255 to 255 for 2d
+   * 0.0039215686 is the part of 1 that get translated to 1 in 2d
+   * @param {Number} myParameter
+   * @default
+   */
+  declare myParameter: number;
+
+  static defaults = myFilterDefaultValues;
+
+  getFragmentSource() {
+    return `
+      precision highp float;
+        uniform sampler2D uTexture;
+        uniform float uMyParameter;
+        varying vec2 vTexCoord;
+        void main() {
+          vec4 color = texture2D(uTexture, vTexCoord);
+          // add your gl code here
+          gl_FragColor = color;
+        }
+      `;
+  }
+  /**
+   * Apply the MyFilter operation to a Uint8ClampedArray representing the pixels of an image.
+   *
+   * @param {Object} options
+   * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered.
+   */
+  applyTo2d(options: T2DPipelineState) {
+    if (this.myParameter === 0) {
+      // early return if the parameter value has a neutral value
+      return;
+    }
+
+    for (let i = 0; i < options.imageData.data.length; i += 4) {
+      // insert here your code to modify data[i]
+    }
+  }
+
+  /**
+   * 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 {
+      uMyParameter: gl.getUniformLocation(program, 'uMyParameter'),
+    };
+  }
+
+  /**
+   * 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.uMyParameter, this.myParameter);
+  }
+
+  static async fromObject(object: any) {
+    // or overide with custom logic if your filter needs to
+    // deserialize something that is not a plain value
+    return new this(object) as BaseFilter;
+  }
+}