BlendImage
Defined in: src/filters/BlendImage.ts:41
Image Blend filter class
Example
Section titled “Example”const filter = new filters.BlendColor({ color: '#000', mode: 'multiply'});
const filter = new BlendImage({ image: fabricImageObject, mode: 'multiply'});object.filters.push(filter);object.applyFilters();canvas.renderAll();Extends
Section titled “Extends”BaseFilter<"BlendImage",BlendImageOwnProps>
Constructors
Section titled “Constructors”Constructor
Section titled “Constructor”new BlendImage(
options?):BlendImage
Defined in: src/filters/BaseFilter.ts:57
Constructor
Parameters
Section titled “Parameters”options?
Section titled “options?”object & Partial<BlendImageOwnProps> & Record<string, any> = {}
Options object
Returns
Section titled “Returns”BlendImage
Inherited from
Section titled “Inherited from”Properties
Section titled “Properties”alpha:
number
Defined in: src/filters/BlendImage.ts:62
alpha value. represent the strength of the blend image operation. not implemented.
image:
FabricImage
Defined in: src/filters/BlendImage.ts:45
Image to make the blend operation with.
mode:
TBlendImageMode
Defined in: src/filters/BlendImage.ts:56
Blend mode for the filter: either ‘multiply’ or ‘mask’. ‘multiply’ will multiply the values of each channel (R, G, B, and A) of the filter image by their corresponding values in the base image. ‘mask’ will only look at the alpha channel of the filter image, and apply those values to the base image’s alpha channel.
Default
Section titled “Default”defaults
Section titled “defaults”
staticdefaults:BlendImageOwnProps=blendImageDefaultValues
Defined in: src/filters/BlendImage.ts:66
Overrides
Section titled “Overrides”
statictype:string='BlendImage'
Defined in: src/filters/BlendImage.ts:64
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.
Overrides
Section titled “Overrides”uniformLocations
Section titled “uniformLocations”
staticuniformLocations:string[]
Defined in: src/filters/BlendImage.ts:68
Contains the uniform locations for the fragment shader. uStepW and uStepH are handled by the BaseFilter, each filter class needs to specify all the one that are needed
Overrides
Section titled “Overrides”Accessors
Section titled “Accessors”Get Signature
Section titled “Get Signature”get type():
Name
Defined in: src/filters/BaseFilter.ts:31
Filter type
Default
Section titled “Default”Returns
Section titled “Returns”Name
Inherited from
Section titled “Inherited from”Methods
Section titled “Methods”_setupFrameBuffer()
Section titled “_setupFrameBuffer()”_setupFrameBuffer(
options):void
Defined in: src/filters/BaseFilter.ts:205
Parameters
Section titled “Parameters”options
Section titled “options”Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”_swapTextures()
Section titled “_swapTextures()”_swapTextures(
options):void
Defined in: src/filters/BaseFilter.ts:232
Parameters
Section titled “Parameters”options
Section titled “options”Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”applyTo()
Section titled “applyTo()”applyTo(
options):void
Defined in: src/filters/BaseFilter.ts:265
Apply this filter to the input image data provided.
Determines whether to use WebGL or Canvas2D based on the options.webgl flag.
Parameters
Section titled “Parameters”options
Section titled “options”TWebGLPipelineState | T2DPipelineState
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”applyTo2d()
Section titled “applyTo2d()”applyTo2d(
options):void
Defined in: src/filters/BlendImage.ts:122
Apply the Blend operation to a Uint8ClampedArray representing the pixels of an image.
Parameters
Section titled “Parameters”options
Section titled “options”Returns
Section titled “Returns”void
Overrides
Section titled “Overrides”applyToWebGL()
Section titled “applyToWebGL()”applyToWebGL(
options):void
Defined in: src/filters/BlendImage.ts:82
Apply this filter using webgl.
Parameters
Section titled “Parameters”options
Section titled “options”Returns
Section titled “Returns”void
Overrides
Section titled “Overrides”bindAdditionalTexture()
Section titled “bindAdditionalTexture()”bindAdditionalTexture(
gl,texture,textureUnit):void
Defined in: src/filters/BaseFilter.ts:334
Parameters
Section titled “Parameters”WebGLRenderingContext
texture
Section titled “texture”WebGLTexture
textureUnit
Section titled “textureUnit”number
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”BaseFilter.bindAdditionalTexture
calculateMatrix()
Section titled “calculateMatrix()”calculateMatrix():
number[]
Defined in: src/filters/BlendImage.ts:100
Calculate a transformMatrix to adapt the image to blend over
Returns
Section titled “Returns”number[]
createHelpLayer()
Section titled “createHelpLayer()”createHelpLayer(
options):void
Defined in: src/filters/BaseFilter.ts:370
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
Section titled “Parameters”options
Section titled “options”Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”createProgram()
Section titled “createProgram()”createProgram(
gl,fragmentSource,vertexSource):object
Defined in: src/filters/BaseFilter.ts:83
Compile this filter’s shader program.
Parameters
Section titled “Parameters”WebGLRenderingContext
The GL canvas context to use for shader compilation.
fragmentSource
Section titled “fragmentSource”string = ...
fragmentShader source for compilation
vertexSource
Section titled “vertexSource”string = ...
vertexShader source for compilation
Returns
Section titled “Returns”object
attributeLocations
Section titled “attributeLocations”attributeLocations:
TWebGLAttributeLocationMap
program
Section titled “program”program:
WebGLProgram
uniformLocations
Section titled “uniformLocations”uniformLocations:
TWebGLUniformLocationMap
Inherited from
Section titled “Inherited from”createTexture()
Section titled “createTexture()”createTexture(
backend,image):null|WebGLTexture
Defined in: src/filters/BlendImage.ts:90
Parameters
Section titled “Parameters”backend
Section titled “backend”Returns
Section titled “Returns”null | WebGLTexture
getAttributeLocations()
Section titled “getAttributeLocations()”getAttributeLocations(
gl,program):TWebGLAttributeLocationMap
Defined in: src/filters/BaseFilter.ts:153
Return a map of attribute names to WebGLAttributeLocation objects.
Parameters
Section titled “Parameters”WebGLRenderingContext
The canvas context used to compile the shader program.
program
Section titled “program”WebGLProgram
The shader program from which to take attribute locations.
Returns
Section titled “Returns”A map of attribute names to attribute locations.
Inherited from
Section titled “Inherited from”BaseFilter.getAttributeLocations
getCacheKey()
Section titled “getCacheKey()”getCacheKey():
string
Defined in: src/filters/BlendImage.ts:70
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
Section titled “Returns”string
Overrides
Section titled “Overrides”getFragmentSource()
Section titled “getFragmentSource()”getFragmentSource():
string
Defined in: src/filters/BlendImage.ts:74
Returns
Section titled “Returns”string
Overrides
Section titled “Overrides”BaseFilter.getFragmentSource
getUniformLocations()
Section titled “getUniformLocations()”getUniformLocations(
gl,program):TWebGLUniformLocationMap
Defined in: src/filters/BaseFilter.ts:169
Return a map of uniform names to WebGLUniformLocation objects.
Parameters
Section titled “Parameters”WebGLRenderingContext
The canvas context used to compile the shader program.
program
Section titled “program”WebGLProgram
The shader program from which to take uniform locations.
Returns
Section titled “Returns”A map of uniform names to uniform locations.
Inherited from
Section titled “Inherited from”BaseFilter.getUniformLocations
getVertexSource()
Section titled “getVertexSource()”getVertexSource():
string
Defined in: src/filters/BlendImage.ts:78
Returns
Section titled “Returns”string
Overrides
Section titled “Overrides”isNeutralState()
Section titled “isNeutralState()”isNeutralState(
options?):boolean
Defined in: src/filters/BaseFilter.ts:248
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
Section titled “Parameters”options?
Section titled “options?”any
Returns
Section titled “Returns”boolean
Inherited from
Section titled “Inherited from”retrieveShader()
Section titled “retrieveShader()”retrieveShader(
options):TWebGLProgramCacheItem
Defined in: src/filters/BaseFilter.ts:295
Retrieves the cached shader.
Parameters
Section titled “Parameters”options
Section titled “options”Returns
Section titled “Returns”the compiled program shader
Inherited from
Section titled “Inherited from”sendAttributeData()
Section titled “sendAttributeData()”sendAttributeData(
gl,attributeLocations,aPositionData):void
Defined in: src/filters/BaseFilter.ts:192
Send attribute data from this filter to its shader program on the GPU.
Parameters
Section titled “Parameters”WebGLRenderingContext
The canvas context used to compile the shader program.
attributeLocations
Section titled “attributeLocations”Record<string, number>
A map of shader attribute names to their locations.
aPositionData
Section titled “aPositionData”Float32Array
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”sendUniformData()
Section titled “sendUniformData()”sendUniformData(
gl,uniformLocations):void
Defined in: src/filters/BlendImage.ts:179
Send data from this filter to its shader program’s uniforms.
Parameters
Section titled “Parameters”WebGLRenderingContext
The GL canvas context used to compile this filter’s shader.
uniformLocations
Section titled “uniformLocations”A map of string uniform names to WebGLUniformLocation objects
Returns
Section titled “Returns”void
Overrides
Section titled “Overrides”toJSON()
Section titled “toJSON()”toJSON():
object&BlendImageOwnProps
Defined in: src/filters/BaseFilter.ts:407
Returns a JSON representation of an instance
Returns
Section titled “Returns”object & BlendImageOwnProps
JSON
Inherited from
Section titled “Inherited from”toObject()
Section titled “toObject()”toObject():
object&BlendImageOwnProps
Defined in: src/filters/BlendImage.ts:194
Returns object representation of an instance TODO: Handle the possibility of missing image better. As of now a BlendImage filter without image can’t be used with fromObject
Returns
Section titled “Returns”object & BlendImageOwnProps
Object representation of an instance
Overrides
Section titled “Overrides”unbindAdditionalTexture()
Section titled “unbindAdditionalTexture()”unbindAdditionalTexture(
gl,textureUnit):void
Defined in: src/filters/BaseFilter.ts:345
Parameters
Section titled “Parameters”WebGLRenderingContext
textureUnit
Section titled “textureUnit”number
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”BaseFilter.unbindAdditionalTexture
fromObject()
Section titled “fromObject()”
staticfromObject(object,options?):Promise<BaseFilter<"BlendImage",BlendImageOwnProps,BlendImageOwnProps>>
Defined in: src/filters/BlendImage.ts:212
Create filter instance from an object representation
Parameters
Section titled “Parameters”object
Section titled “object”Record<string, any>
Object to create an instance from
options?
Section titled “options?”signal
Section titled “signal”AbortSignal
handle aborting image loading, see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
Returns
Section titled “Returns”Promise<BaseFilter<"BlendImage", BlendImageOwnProps, BlendImageOwnProps>>