fabric 5.3.0 → 6.0.0-beta1

package/src/filters/BlendColor.ts

@@ -0,0 +1,258 @@
+import { Color } from '../color/Color';
+import { TClassProperties } from '../typedefs';
+import { AbstractBaseFilter } from './BaseFilter';
+import { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import { classRegistry } from '../util/class_registry';
+
+/**
+ * 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 AbstractBaseFilter<Record<string, string>> {
+  /**
+   * 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;
+
+  declare mode:
+    | 'multiply'
+    | 'add'
+    | 'diff'
+    | 'difference'
+    | 'screen'
+    | 'subtract'
+    | 'darken'
+    | 'lighten'
+    | 'overlay'
+    | 'exclusion'
+    | 'tint';
+
+  /**
+   * alpha value. represent the strength of the blend color operation.
+   * @type Number
+   * @default
+   **/
+  declare alpha: number;
+
+  /**
+   * build the fragment source for the filters, joining the common part with
+   * the specific one.
+   * @param {String} mode the mode of the filter, a key of this.fragmentSource
+   * @return {String} the source to be compiled
+   * @private
+   */
+  buildSource(mode: 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) {
+          ${this.fragmentSource[mode]}
+        }
+      }
+      `;
+  }
+
+  getCacheKey() {
+    return `${this.type}_${this.mode}`;
+  }
+
+  getFragmentSource(): string {
+    return this.buildSource(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 'diff':
+        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,
+    };
+  }
+
+  static async fromObject(object: any) {
+    return new BlendColor(object);
+  }
+}
+
+export const blendColorDefaultValues: Partial<TClassProperties<BlendColor>> = {
+  type: 'BlendColor',
+  color: '#F95C63',
+  mode: 'multiply',
+  alpha: 1,
+  fragmentSource: {
+    multiply: 'gl_FragColor.rgb *= uColor.rgb;\n',
+    screen:
+      'gl_FragColor.rgb = 1.0 - (1.0 - gl_FragColor.rgb) * (1.0 - uColor.rgb);\n',
+    add: 'gl_FragColor.rgb += uColor.rgb;\n',
+    diff: 'gl_FragColor.rgb = abs(gl_FragColor.rgb - uColor.rgb);\n',
+    subtract: 'gl_FragColor.rgb -= uColor.rgb;\n',
+    lighten: 'gl_FragColor.rgb = max(gl_FragColor.rgb, uColor.rgb);\n',
+    darken: 'gl_FragColor.rgb = min(gl_FragColor.rgb, uColor.rgb);\n',
+    exclusion:
+      'gl_FragColor.rgb += uColor.rgb - 2.0 * (uColor.rgb * gl_FragColor.rgb);\n',
+    overlay: `
+      if (uColor.r < 0.5) {
+        gl_FragColor.r *= 2.0 * uColor.r;
+      } else {
+        gl_FragColor.r = 1.0 - 2.0 * (1.0 - gl_FragColor.r) * (1.0 - uColor.r);
+      }
+      if (uColor.g < 0.5) {
+        gl_FragColor.g *= 2.0 * uColor.g;
+      } else {
+        gl_FragColor.g = 1.0 - 2.0 * (1.0 - gl_FragColor.g) * (1.0 - uColor.g);
+      }
+      if (uColor.b < 0.5) {
+        gl_FragColor.b *= 2.0 * uColor.b;
+      } else {
+        gl_FragColor.b = 1.0 - 2.0 * (1.0 - gl_FragColor.b) * (1.0 - uColor.b);
+      }
+      `,
+    tint: `
+      gl_FragColor.rgb *= (1.0 - uColor.a);
+      gl_FragColor.rgb += uColor.rgb;
+      `,
+  },
+};
+
+Object.assign(BlendColor.prototype, blendColorDefaultValues);
+classRegistry.setClass(BlendColor);

package/src/filters/BlendImage.ts

@@ -0,0 +1,254 @@
+import { Image } from '../shapes/Image';
+import type { TClassProperties } from '../typedefs';
+import { createCanvasElement } from '../util/misc/dom';
+import { AbstractBaseFilter } from './BaseFilter';
+import type {
+  T2DPipelineState,
+  TWebGLPipelineState,
+  TWebGLUniformLocationMap,
+} from './typedefs';
+import { WebGLFilterBackend } from './WebGLFilterBackend';
+import { classRegistry } from '../util/class_registry';
+
+/**
+ * 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 AbstractBaseFilter<Record<string, string>> {
+  /**
+   * 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: 'multiply' | 'mask';
+
+  /**
+   * alpha value. represent the strength of the blend image operation.
+   * not implemented.
+   **/
+  declare alpha: number;
+
+  getCacheKey() {
+    return `${this.type}_${this.mode}`;
+  }
+
+  getFragmentSource(): string {
+    return this.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(
+    object: Record<string, any>,
+    options: { signal: AbortSignal }
+  ) {
+    return Image.fromObject(object.image, options).then(
+      (image) => new BlendImage({ ...object, image })
+    );
+  }
+}
+
+export const blendImageDefaultValues: Partial<TClassProperties<BlendImage>> = {
+  type: '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);
+    }
+    `,
+  fragmentSource: {
+    multiply: `
+      precision highp float;
+      uniform sampler2D uTexture;
+      uniform sampler2D uImage;
+      uniform vec4 uColor;
+      varying vec2 vTexCoord;
+      varying vec2 vTexCoord2;
+      void main() {
+        vec4 color = texture2D(uTexture, vTexCoord);
+        vec4 color2 = texture2D(uImage, vTexCoord2);
+        color.rgba *= color2.rgba;
+        gl_FragColor = color;
+      }
+      `,
+    mask: `
+      precision highp float;
+      uniform sampler2D uTexture;
+      uniform sampler2D uImage;
+      uniform vec4 uColor;
+      varying vec2 vTexCoord;
+      varying vec2 vTexCoord2;
+      void main() {
+        vec4 color = texture2D(uTexture, vTexCoord);
+        vec4 color2 = texture2D(uImage, vTexCoord2);
+        color.a = color2.a;
+        gl_FragColor = color;
+      }
+      `,
+  },
+};
+
+Object.assign(BlendImage.prototype, blendImageDefaultValues);
+classRegistry.setClass(BlendImage);

package/src/filters/Blur.ts

@@ -0,0 +1,202 @@
+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 '../util/class_registry';
+
+/**
+ * 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;
+
+  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;
+  }
+
+  static async fromObject(object: any) {
+    return new Blur(object);
+  }
+}
+
+export const blurDefaultValues: Partial<TClassProperties<Blur>> = {
+  type: 'Blur',
+  fragmentSource: `
+    precision highp float;
+    uniform sampler2D uTexture;
+    uniform vec2 uDelta;
+    varying vec2 vTexCoord;
+    const float nSamples = 15.0;
+    vec3 v3offset = vec3(12.9898, 78.233, 151.7182);
+    float random(vec3 scale) {
+      /* use the fragment position for a different seed per-pixel */
+      return fract(sin(dot(gl_FragCoord.xyz, scale)) * 43758.5453);
+    }
+    void main() {
+      vec4 color = vec4(0.0);
+      float total = 0.0;
+      float offset = random(v3offset);
+      for (float t = -nSamples; t <= nSamples; t++) {
+        float percent = (t + offset - 0.5) / nSamples;
+        float weight = 1.0 - abs(percent);
+        color += texture2D(uTexture, vTexCoord + uDelta * percent) * weight;
+        total += weight;
+      }
+      gl_FragColor = color / total;
+    }
+  `,
+  blur: 0,
+  mainParameter: 'blur',
+};
+
+Object.assign(Blur.prototype, blurDefaultValues);
+classRegistry.setClass(Blur);