Class BlendImage

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();

Hierarchy

BaseFilter
- BlendImage

Constructors

constructor

new BlendImage(options?): BlendImage
Constructor
Parameters
- Optional options: Record<string, any> = {}
  
  Options object
Returns BlendImage
Inherited from BaseFilter.constructor
- Defined in src/filters/BaseFilter.ts:58

Properties

alpha

alpha: number

alpha value. represent the strength of the blend image operation. not implemented.

image

image: FabricImage<Partial<ImageProps>, SerializedImageProps, ObjectEvents>

Color to make the blend operation with. default to a reddish color since black or white gives always strong result.

`Optional` `Private` mainParameter

mainParameter?: keyof BlendImage

Name of the parameter that can be changed in the filter. Some filters have more than one parameter and there is no mainParameter

mode

mode: TBlendImageMode

`Private` vertexSource

vertexSource: string = vertexSource

Array of attributes to send with buffers. do not modify

`Static` defaults

defaults: Partial<TClassProperties<BlendImage>> = blendImageDefaultValues

`Static` type

type: string = 'BlendImage'

The class type. Used to identify which class this is. This is used for serialization purposes and internally it can be used to identify classes. As a developer you could use instance of Class but to avoid importing all the code and blocking tree shaking we try to avoid doing that.

Accessors

type

get type(): string
Filter type

Returns string
Default
Inherited from BaseFilter.type
- Defined in src/filters/BaseFilter.ts:25

Methods

_setupFrameBuffer

_setupFrameBuffer(options): void
Parameters
- options: TWebGLPipelineState
Returns void
Inherited from BaseFilter._setupFrameBuffer
- Defined in src/filters/BaseFilter.ts:190

_swapTextures

_swapTextures(options): void
Parameters
- options: TWebGLPipelineState
Returns void
Inherited from BaseFilter._swapTextures
- Defined in src/filters/BaseFilter.ts:217

applyTo

applyTo(options): void
Apply this filter to the input image data provided.

Determines whether to use WebGL or Canvas2D based on the options.webgl flag.
Parameters
- options: TWebGLPipelineState | T2DPipelineState
Returns void
Inherited from BaseFilter.applyTo
- Defined in src/filters/BaseFilter.ts:265

applyTo2d

applyTo2d(options): void
Apply the Blend operation to a Uint8ClampedArray representing the pixels of an image.
Parameters
- options: T2DPipelineState
Returns void
Overrides BaseFilter.applyTo2d
- Defined in src/filters/BlendImage.ts:116

applyToWebGL

applyToWebGL(options): void
Apply this filter using webgl.
Parameters
- options: TWebGLPipelineState
Returns void
Overrides BaseFilter.applyToWebGL
- Defined in src/filters/BlendImage.ts:76

bindAdditionalTexture

bindAdditionalTexture(gl, texture, textureUnit): void
Parameters
- gl: WebGLRenderingContext
- texture: WebGLTexture
- textureUnit: number
Returns void
Inherited from BaseFilter.bindAdditionalTexture
- Defined in src/filters/BaseFilter.ts:334

calculateMatrix

calculateMatrix(): number[]
Calculate a transformMatrix to adapt the image to blend over

Returns number[]
- Defined in src/filters/BlendImage.ts:94

createHelpLayer

createHelpLayer(options): void
If needed by a 2d filter, this functions can create an helper canvas to be used remember that options.targetCanvas is available for use till end of chain.
Parameters
- options: T2DPipelineState
Returns void
Inherited from BaseFilter.createHelpLayer
- Defined in src/filters/BaseFilter.ts:380

createProgram

createProgram(gl, fragmentSource?, vertexSource?): {
    attributeLocations: TWebGLAttributeLocationMap;
    program: WebGLProgram;
    uniformLocations: TWebGLUniformLocationMap;
}
Compile this filter's shader program.
Parameters
- gl: WebGLRenderingContext
  
  The GL canvas context to use for shader compilation.
- fragmentSource: string = ...
  
  fragmentShader source for compilation
- vertexSource: string = ...
  
  vertexShader source for compilation
Returns {
    attributeLocations: TWebGLAttributeLocationMap;
    program: WebGLProgram;
    uniformLocations: TWebGLUniformLocationMap;
}
- attributeLocations: TWebGLAttributeLocationMap
- program: WebGLProgram
- uniformLocations: TWebGLUniformLocationMap
Inherited from BaseFilter.createProgram
- Defined in src/filters/BaseFilter.ts:77

createTexture

createTexture(backend, image): null | WebGLTexture
Parameters
- backend: WebGLFilterBackend
- image: FabricImage<Partial<ImageProps>, SerializedImageProps, ObjectEvents>
Returns null | WebGLTexture
- Defined in src/filters/BlendImage.ts:84

getAttributeLocations

getAttributeLocations(gl, program): TWebGLAttributeLocationMap
Return a map of attribute names to WebGLAttributeLocation objects.
Parameters
- gl: WebGLRenderingContext
  
  The canvas context used to compile the shader program.
- program: WebGLProgram
  
  The shader program from which to take attribute locations.
Returns TWebGLAttributeLocationMap
A map of attribute names to attribute locations.
Inherited from BaseFilter.getAttributeLocations
- Defined in src/filters/BaseFilter.ts:146

getCacheKey

getCacheKey(): string
Returns a string that represent the current selected shader code for the filter. Used to force recompilation when parameters change or to retrieve the shader from cache

Returns string
Overrides BaseFilter.getCacheKey
- Defined in src/filters/BlendImage.ts:68

getFragmentSource

getFragmentSource(): string
Returns string
Overrides BaseFilter.getFragmentSource
- Defined in src/filters/BlendImage.ts:72

getMainParameter

getMainParameter(): undefined | string | number | ((gl, program) => TWebGLAttributeLocationMap) | ((options) => TWebGLProgramCacheItem) | FabricImage<Partial<ImageProps>, SerializedImageProps, ObjectEvents> | ((options?) => boolean) | (() => {
    alpha: number;
    image: Pick<Omit<Partial<ImageProps> & TClassProperties<FabricImage<Partial<ImageProps>, SerializedImageProps, ObjectEvents>>, keyof SerializedImageProps>, never> & SerializedImageProps;
    mode: TBlendImageMode;
    type: string;
}) | ((backend, image) => null | WebGLTexture) | (() => {
    type: string;
}) | ((gl, program) => TWebGLUniformLocationMap) | ((gl, uniformLocations) => void) | (() => string) | (() => string) | ((options) => void) | ((options) => void) | ((gl, fragmentSource?, vertexSource?) => {
    attributeLocations: TWebGLAttributeLocationMap;
    program: WebGLProgram;
    uniformLocations: TWebGLUniformLocationMap;
}) | ((gl, attributeLocations, aPositionData) => void) | ((options) => void) | ((options) => void) | ((options) => void) | ((gl, texture, textureUnit) => void) | ((gl, textureUnit) => void) | (() => undefined | string | number | ((gl, program) => TWebGLAttributeLocationMap) | ((options) => TWebGLProgramCacheItem) | FabricImage<Partial<ImageProps>, SerializedImageProps, ObjectEvents> | ((options?) => boolean) | (() => {
    alpha: number;
    image: Pick<Omit<Partial<ImageProps> & TClassProperties<FabricImage<Partial<ImageProps>, SerializedImageProps, ObjectEvents>>, keyof SerializedImageProps>, never> & SerializedImageProps;
    mode: TBlendImageMode;
    type: string;
}) | ((backend, image) => null | WebGLTexture) | (() => {
    type: string;
}) | ((gl, program) => TWebGLUniformLocationMap) | ((gl, uniformLocations) => void) | (() => string) | (() => string) | ((options) => void) | ((options) => void) | ((gl, fragmentSource?, vertexSource?) => {
    attributeLocations: TWebGLAttributeLocationMap;
    program: WebGLProgram;
    uniformLocations: TWebGLUniformLocationMap;
}) | ((gl, attributeLocations, aPositionData) => void) | ((options) => void) | ((options) => void) | ((options) => void) | ((gl, texture, textureUnit) => void) | ((gl, textureUnit) => void) | (() => string | number | ((gl: WebGLRenderingContext, program: WebGLProgram) => TWebGLAttributeLocationMap) | ... 23 more ... | undefined) | ((value) => void) | ((options) => void) | (() => number[])) | ((value) => void) | ((options) => void) | (() => number[])
Returns undefined | string | number | ((gl, program) => TWebGLAttributeLocationMap) | ((options) => TWebGLProgramCacheItem) | FabricImage<Partial<ImageProps>, SerializedImageProps, ObjectEvents> | ((options?) => boolean) | (() => {
    alpha: number;
    image: Pick<Omit<Partial<ImageProps> & TClassProperties<FabricImage<Partial<ImageProps>, SerializedImageProps, ObjectEvents>>, keyof SerializedImageProps>, never> & SerializedImageProps;
    mode: TBlendImageMode;
    type: string;
}) | ((backend, image) => null | WebGLTexture) | (() => {
    type: string;
}) | ((gl, program) => TWebGLUniformLocationMap) | ((gl, uniformLocations) => void) | (() => string) | (() => string) | ((options) => void) | ((options) => void) | ((gl, fragmentSource?, vertexSource?) => {
    attributeLocations: TWebGLAttributeLocationMap;
    program: WebGLProgram;
    uniformLocations: TWebGLUniformLocationMap;
}) | ((gl, attributeLocations, aPositionData) => void) | ((options) => void) | ((options) => void) | ((options) => void) | ((gl, texture, textureUnit) => void) | ((gl, textureUnit) => void) | (() => undefined | string | number | ((gl, program) => TWebGLAttributeLocationMap) | ((options) => TWebGLProgramCacheItem) | FabricImage<Partial<ImageProps>, SerializedImageProps, ObjectEvents> | ((options?) => boolean) | (() => {
    alpha: number;
    image: Pick<Omit<Partial<ImageProps> & TClassProperties<FabricImage<Partial<ImageProps>, SerializedImageProps, ObjectEvents>>, keyof SerializedImageProps>, never> & SerializedImageProps;
    mode: TBlendImageMode;
    type: string;
}) | ((backend, image) => null | WebGLTexture) | (() => {
    type: string;
}) | ((gl, program) => TWebGLUniformLocationMap) | ((gl, uniformLocations) => void) | (() => string) | (() => string) | ((options) => void) | ((options) => void) | ((gl, fragmentSource?, vertexSource?) => {
    attributeLocations: TWebGLAttributeLocationMap;
    program: WebGLProgram;
    uniformLocations: TWebGLUniformLocationMap;
}) | ((gl, attributeLocations, aPositionData) => void) | ((options) => void) | ((options) => void) | ((options) => void) | ((gl, texture, textureUnit) => void) | ((gl, textureUnit) => void) | (() => string | number | ((gl: WebGLRenderingContext, program: WebGLProgram) => TWebGLAttributeLocationMap) | ... 23 more ... | undefined) | ((value) => void) | ((options) => void) | (() => number[])) | ((value) => void) | ((options) => void) | (() => number[])
Inherited from BaseFilter.getMainParameter
- Defined in src/filters/BaseFilter.ts:351

getUniformLocations

getUniformLocations(gl, program): TWebGLUniformLocationMap
Return WebGL uniform locations for this filter's shader.
Parameters
- gl: WebGLRenderingContext
  
  The GL canvas context used to compile this filter's shader.
- program: WebGLProgram
  
  This filter's compiled shader program.
Returns TWebGLUniformLocationMap
Overrides BaseFilter.getUniformLocations
- Defined in src/filters/BlendImage.ts:173

isNeutralState

isNeutralState(options?): boolean
Generic isNeutral implementation for one parameter based filters. Used only in image applyFilters to discard filters that will not have an effect on the image Other filters may need their own version ( ColorMatrix, HueRotation, gamma, ComposedFilter )
Parameters
- Optional options: any
Returns boolean
Inherited from BaseFilter.isNeutralState
- Defined in src/filters/BaseFilter.ts:233

retrieveShader

retrieveShader(options): TWebGLProgramCacheItem
Retrieves the cached shader.
Parameters
- options: TWebGLPipelineState
Returns TWebGLProgramCacheItem
the compiled program shader
Inherited from BaseFilter.retrieveShader
- Defined in src/filters/BaseFilter.ts:295

sendAttributeData

sendAttributeData(gl, attributeLocations, aPositionData): void
Send attribute data from this filter to its shader program on the GPU.
Parameters
- gl: WebGLRenderingContext
  
  The canvas context used to compile the shader program.
- attributeLocations: Record<string, number>
  
  A map of shader attribute names to their locations.
- aPositionData: Float32Array
Returns void
Inherited from BaseFilter.sendAttributeData
- Defined in src/filters/BaseFilter.ts:177

sendUniformData

sendUniformData(gl, uniformLocations): void
Send data from this filter to its shader program's uniforms.
Parameters
- gl: WebGLRenderingContext
  
  The GL canvas context used to compile this filter's shader.
- uniformLocations: TWebGLUniformLocationMap
  
  A map of string uniform names to WebGLUniformLocation objects
Returns void
Overrides BaseFilter.sendUniformData
- Defined in src/filters/BlendImage.ts:189

setMainParameter

setMainParameter(value): void
Parameters
- value: any
Returns void
Inherited from BaseFilter.setMainParameter
- Defined in src/filters/BaseFilter.ts:355

toJSON

toJSON(): {
type: string;
}
Returns a JSON representation of an instance

Returns {
type: string;
}
JSON
- type: string
Inherited from BaseFilter.toJSON
- Defined in src/filters/BaseFilter.ts:405

toObject

toObject(): {
    alpha: number;
    image: Pick<Omit<Partial<ImageProps> & TClassProperties<FabricImage<Partial<ImageProps>, SerializedImageProps, ObjectEvents>>, keyof SerializedImageProps>, never> & SerializedImageProps;
    mode: TBlendImageMode;
    type: string;
}
Returns object representation of an instance

Returns {
    alpha: number;
    image: Pick<Omit<Partial<ImageProps> & TClassProperties<FabricImage<Partial<ImageProps>, SerializedImageProps, ObjectEvents>>, keyof SerializedImageProps>, never> & SerializedImageProps;
    mode: TBlendImageMode;
    type: string;
}
Object representation of an instance
- alpha: number
- image: Pick<Omit<Partial<ImageProps> & TClassProperties<FabricImage<Partial<ImageProps>, SerializedImageProps, ObjectEvents>>, keyof SerializedImageProps>, never> & SerializedImageProps
- mode: TBlendImageMode
- type: string
Overrides BaseFilter.toObject
- Defined in src/filters/BlendImage.ts:202

unbindAdditionalTexture

unbindAdditionalTexture(gl, textureUnit): void
Parameters
- gl: WebGLRenderingContext
- textureUnit: number
Returns void
Inherited from BaseFilter.unbindAdditionalTexture
- Defined in src/filters/BaseFilter.ts:345

`Static` fromObject

fromObject(object, options?): Promise<BaseFilter>
Create filter instance from an object representation
Parameters
- object: Record<string, any>
  
  Object to create an instance from
- Optional options: {
  signal: AbortSignal;
  }
  - signal: AbortSignal
    
    handle aborting image loading, see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
Returns Promise<BaseFilter>

Static
Overrides BaseFilter.fromObject
- Defined in src/filters/BlendImage.ts:219

Class BlendImage

Example

Hierarchy

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

Optional options: Record<string, any> = {}

Returns BlendImage

Properties

alpha

image

Optional Private mainParameter

mode

Private vertexSource

Static defaults

Static type

Accessors

type

Returns string

Default

Methods

_setupFrameBuffer

Parameters

options: TWebGLPipelineState

Returns void

_swapTextures

Parameters

options: TWebGLPipelineState

Returns void

applyTo

Parameters

options: TWebGLPipelineState | T2DPipelineState

Returns void

applyTo2d

Parameters

options: T2DPipelineState

Returns void

applyToWebGL

Parameters

options: TWebGLPipelineState

Returns void

bindAdditionalTexture

Parameters

gl: WebGLRenderingContext

texture: WebGLTexture

textureUnit: number

Returns void

calculateMatrix

Returns number[]

createHelpLayer

Parameters

options: T2DPipelineState

Returns void

createProgram

Parameters

gl: WebGLRenderingContext

fragmentSource: string = ...

vertexSource: string = ...

Returns { attributeLocations: TWebGLAttributeLocationMap; program: WebGLProgram; uniformLocations: TWebGLUniformLocationMap; }

attributeLocations: TWebGLAttributeLocationMap

program: WebGLProgram

uniformLocations: TWebGLUniformLocationMap

createTexture

Parameters

backend: WebGLFilterBackend

image: FabricImage<Partial<ImageProps>, SerializedImageProps, ObjectEvents>

Returns null | WebGLTexture

getAttributeLocations

Parameters

gl: WebGLRenderingContext

program: WebGLProgram

Returns TWebGLAttributeLocationMap

getCacheKey

Returns string

getFragmentSource

`Optional` options: Record<string, any> = {}

`Optional` `Private` mainParameter

`Private` vertexSource

`Static` defaults

`Static` type

Returns {
attributeLocations: TWebGLAttributeLocationMap;
program: WebGLProgram;
uniformLocations: TWebGLUniformLocationMap;
}

`Optional` options: any

Returns {
type: string;
}

Returns {
alpha: number;
image: Pick<Omit<Partial<ImageProps> & TClassProperties<FabricImage<Partial<ImageProps>, SerializedImageProps, ObjectEvents>>, keyof SerializedImageProps>, never> & SerializedImageProps;
mode: TBlendImageMode;
type: string;
}

`Static` fromObject

`Optional` options: {
signal: AbortSignal;
}