import { fabric } from 'fabric' ; import isEqual from 'lodash/isEqual' ; import Handler from './Handler' ; export type GrayscaleModeType = 'average' | 'luminosity' | 'lightness' ; export interface RemoveColorFilter { color ? : string ; distance ? : number ; fragmentSource ? : any ; useAlpahe ? : any ; } export interface BlendColorFilter { color ? : string ; mode ? : string ; alpha ? : number ; } export interface GammaFilter { gamma ? : number [ ] ; } export interface BlendImageFilter { image ? : fabric . Image ; mode ? : string ; alpha ? : number ; } export interface HueRotationFilter { rotation ? : number ; } export type ResizeType = 'bilinear' | 'hermite' | 'sliceHack' | 'lanczos' ; export interface ResizeFilter { resizeType ? : ResizeType ; scaleX ? : number ; scaleY ? : number ; lanczosLobes ? : number ; } export interface TintFilter { color ? : string ; opacity ? : number ; } export interface MaskFilter { mask ? : fabric . Image ; default channel : number ; } export interface MultiplyFilter { default color : string ; } export interface GradientTransparencyFilter { default threshold ? : number ; } export interface ColorMatrixFilter { /** Filter matrix */ matrix ? : number [ ] ; } export interface RemoveWhiteFilter { default threshold ? : number ; default distance ? : number ; } export type ValuesOf < T extends any [ ] > = T [ number ] ; export interface IFilter { type : typeof FILTER_TYPES [ number ] ; [ key ] : any ; } export const FILTER_TYPES = [ 'grayscale' , 'invert' , 'remove-color' , 'sepia' , 'brownie' , 'brightness' , 'contrast' , 'saturation' , 'noise' , 'vintage' , 'pixelate' , 'blur' , 'sharpen' , 'emboss' , 'technicolor' , 'polaroid' , 'blend-color' , 'gamma' , 'kodachrome' , 'blackwhite' , 'blend-image' , 'hue' , 'resize' , 'tint' , 'mask' , 'multiply' , 'sepia2' , ] ; export const capitalize = ( str ) => ( str ? str . charAt ( 0 ) . toUpperCase ( ) + str . slice ( 1 ) : false ) ; const SHARPEN_MATRIX = [ 0 , - 1 , 0 , - 1 , 5 , - 1 , 0 , - 1 , 0 ] ; const EMBOSS_MATRIX = [ 1 , 1 , 1 , 1 , 0.7 , - 1 , - 1 , - 1 , - 1 ] ; author salgum1114
 *  date class implements IBaseHandler class ImageHandler { handler : Handler ; constructor ( handler ) { this . handler = handler ; } param { IFilter } filter public createFilter = ( filter ) => { const { type : filterType , ... other } = filter ; const type = filterType . toLowerCase ( ) ; if ( type === 'grayscale' ) { return new fabric . Image . filters . Grayscale ( other ) ; } else if ( type === 'invert' ) { return new fabric . Image . filters . Invert ( ) ; } else if ( type === 'sepia' ) { return new fabric . Image . filters . Sepia ( ) ; } else if ( type === 'brightness' ) { return new fabric . Image . filters . Brightness ( { brightness : other . brightness } ) ; } else if ( type === 'contrast' ) { return new fabric . Image . filters . Contrast ( other ) ; } else if ( type === 'saturation' ) { return new fabric . Image . filters . Saturation ( other ) ; } else if ( type === 'noise' ) { return new fabric . Image . filters . Noise ( { noise : other . noise } ) ; } else if ( type === 'pixelate' ) { return new fabric . Image . filters . Pixelate ( other ) ; } else if ( type === 'sharpen' ) { return new fabric . Image . filters . Convolute ( { matrix : SHARPEN_MATRIX , } ) ; } else if ( type === 'emboss' ) { return new fabric . Image . filters . Convolute ( { matrix : EMBOSS_MATRIX , } ) ; } else if ( type === 'blend-color' ) { return new fabric . Image . filters . BlendColor ( other ) ; } else if ( type === 'blend-image' ) { return new fabric . Image . filters . BlendImage ( other ) ; } else if ( type === 'resize' ) { return new fabric . Image . filters . Resize ( other ) ; } else if ( type === 'tint' ) { return new fabric . Image . filters . Tint ( other ) ; } else if ( type === 'mask' ) { return new fabric . Image . filters . Mask ( { channel : other . channel , mask : other . mask , } ) ; } else if ( type === 'multiply' ) { return new fabric . Image . filters . Multiply ( { color : other . color , } ) ; } else if ( type === 'sepia2' ) { return new fabric . Image . filters . Sepia2 ( other ) ; } return false ; } ; param { IFilter [ ] } filters public createFilters = ( filters ) => { const createdFilters = filters . reduce ( ( prev , filter ) => { let type = filter . type ; if ( type . toLowerCase ( ) === 'convolute' && isEqual ( filter . matrix , SHARPEN_MATRIX ) ) { type = 'sharpen' ; } else if ( type . toLowerCase ( ) === 'convolute' && isEqual ( filter . matrix , EMBOSS_MATRIX ) ) { type = 'emboss' ; } const findIndex = FILTER_TYPES . findIndex ( filterType => type . toLowerCase ( ) === filterType ) ; if ( findIndex > - 1 ) { prev [ findIndex ] = this . createFilter ( { ... filter , type , } ) ; } return prev ; } , [ ] ) ; return createdFilters ; } ; param { string } type param { * } value param { fabric . Image } imageObj public applyFilterByType = ( type , apply = true , value ? , imageObj ? ) : void => { const obj = imageObj || ( this . handler . canvas . getActiveObject ( ) as any ) ; const findIndex = FILTER_TYPES . findIndex ( ft => ft === type ) ; if ( obj . filters && findIndex > - 1 ) { if ( apply ) { obj . filters [ findIndex ] = this . createFilter ( { type , ... value , } ) ; obj . applyFilters ( ) ; } else { obj . filters [ findIndex ] = false ; obj . applyFilters ( ) ; } this . handler . canvas . requestRenderAll ( ) ; } } ; param { fabric . Image } imageObj param { number } index param { fabric . IBaseFilter } filter public applyFilter = ( index , filter , imageObj ? ) : void => { const obj = imageObj || ( this . handler . canvas . getActiveObject ( ) as any ) ; if ( obj . filters ) { obj . filters [ index ] = filter ; obj . applyFilters ( ) ; this . handler . canvas . requestRenderAll ( ) ; } } ; param { fabric . Image } imageObj param { number } index param { string } prop param { any } value public applyFilterValue = ( index , prop , value , imageObj ? ) : void => { const obj = imageObj || ( this . handler . canvas . getActiveObject ( ) as fabric . Image ) ; if ( obj . filters ) { const filter = obj . filters [ index ] ; if ( filter ) { filter . setOptions ( { [ prop ] : value , } ) ; obj . applyFilters ( ) ; this . handler . canvas . requestRenderAll ( ) ; } } } ; param { fabric . Image } imageObj param { boolean } grayscale param { GrayscaleModeType } value public applyGrayscale = ( grayscale = false , value ? , imageObj ? ) : void => { this . applyFilter ( 0 , grayscale && new fabric . Image . filters . Grayscale ( value ? { mode : value , } : undefined ) , imageObj ) ; } ; param { fabric . Image } imageObj param { boolean } invert public applyInvert = ( invert = false , imageObj ? ) : void => { this . applyFilter ( 1 , invert && new fabric . Image . filters . Invert ( ) , imageObj ) ; } ; param { fabric . Image } imageObj param { boolean } removeColor param { RemoveColorFilter } value param { fabric . Image } imageObj param { boolean } sepia public applySepia = ( sepia = false , imageObj ? ) : void => { this . applyFilter ( 3 , sepia && new fabric . Image . filters . Sepia ( ) , imageObj ) ; } ; param { boolean } brownie param { fabric . Image } imageObj param { boolean } brightness param { number } value param { fabric . Image } imageObj public applyBrightness = ( brightness = false , value ? , imageObj ? ) : void => { this . applyFilter ( 5 , brightness && new fabric . Image . filters . Brightness ( value ? { brightness : value , } : undefined ) , imageObj ) ; } ; param { boolean } contrast param { number } value param { fabric . Image } imageObj public applyContrast = ( contrast = false , value ? , imageObj ? ) : void => { this . applyFilter ( 6 , contrast && new fabric . Image . filters . Contrast ( value ? { contrast : value , } : undefined ) , imageObj ) ; } ; param { boolean } saturation param { number } value param { fabric . Image } imageObj public applySaturation = ( saturation = false , value ? , imageObj ? ) : void => { this . applyFilter ( 7 , saturation && new fabric . Image . filters . Saturation ( value ? { saturation : value , } : undefined ) , imageObj ) ; } ; param { boolean } noise param { number } value param { fabric . Image } imageObj public applyNoise = ( noise = false , value ? , imageObj ? ) : void => { this . applyFilter ( 8 , noise && new fabric . Image . filters . Noise ( value ? { noise : value , } : undefined ) , imageObj ) ; } ; param { boolean } vintage param { fabric . Image } imageObj param { boolean } pixelate param { number } value param { fabric . Image } imageObj public applyPixelate = ( pixelate = false , value ? , imageObj ? ) : void => { this . applyFilter ( 10 , pixelate && new fabric . Image . filters . Pixelate ( value ? { blocksize : value , } : undefined ) , imageObj ) ; } ; param { boolean } blur param { number } value param { fabric . Image } imageObj param { boolean } sharpen param { number [ ] } value param { fabric . Image } imageObj public applySharpen = ( sharpen = false , value = SHARPEN_MATRIX , imageObj ? ) : void => { this . applyFilter ( 12 , sharpen && new fabric . Image . filters . Convolute ( value ? { matrix : value , } : undefined ) , imageObj ) ; } ; param { boolean } emboss param { number [ ] } value param { fabric . Image } imageObj public applyEmboss = ( emboss = false , value = EMBOSS_MATRIX , imageObj ? ) : void => { this . applyFilter ( 13 , emboss && new fabric . Image . filters . Convolute ( value ? { matrix : value , } : undefined ) , imageObj ) ; } ; param { boolean } technicolor param { fabric . Image } imageObj param { boolean } polaroid param { fabric . Image } imageObj param { boolean } blend param { BlendColorFilter } value param { fabric . Image } imageObj public applyBlendColor = ( blend = false , value ? , imageObj ? ) : void => { this . applyFilter ( 16 , blend && new fabric . Image . filters . BlendColor ( value ) , imageObj ) ; } ; param { boolean } gamma param { GammaFilter } value param { fabric . Image } imageObj param { boolean } kodachrome param { fabric . Image } imageObj param { boolean } blackWhite param { fabric . Image } imageObj param { boolean } blendImage param { BlendImageFilter } value param { fabric . Image } imageObj public applyBlendImage = ( blendImage = false , value ? , imageObj ? ) : void => { this . applyFilter ( 20 , blendImage && new fabric . Image . filters . BlendImage ( value ) , imageObj ) ; } ; param { boolean } hue param { HueRotationFilter } value param { fabric . Image } imageObj param { boolean } resize param { ResizeFilter } value param { fabric . Image } imageObj public applyResize = ( resize = false , value ? , imageObj ? ) : void => { this . applyFilter ( 22 , resize && new fabric . Image . filters . Resize ( value ) , imageObj ) ; } ; param { boolean } tint param { TintFilter } value param { fabric . Image } imageObj public applyTint = ( tint = false , value ? , imageObj ? ) : void => { this . applyFilter ( 23 , tint && new fabric . Image . filters . Tint ( value ) , imageObj ) ; } ; param { boolean } mask param { MaskFilter } value param { fabric . Image } imageObj public applyMask = ( mask = false , value ? , imageObj ? ) : void => { this . applyFilter ( 24 , mask && new fabric . Image . filters . Mask ( value ) , imageObj ) ; } ; param { boolean } multiply param { MultiplyFilter } value param { fabric . Image } imageObj public applyMultiply = ( multiply = false , value ? , imageObj ? ) : void => { this . applyFilter ( 25 , multiply && new fabric . Image . filters . Multiply ( value ) , imageObj ) ; } ; param { boolean } sepia2 param { fabric . Image } imageObj public applySepia2 = ( sepia2 = false , imageObj ? ) : void => { this . applyFilter ( 26 , sepia2 && new fabric . Image . filters . Sepia2 ( ) , imageObj ) ; } ; param { boolean } gradientTransparency param { GradientTransparencyFilter } value param { fabric . Image } imageObj public applyGradientTransparency = ( gradientTransparency = false , value ? , imageObj ? ) : void => { this . applyFilter ( 27 , gradientTransparency && new fabric . Image . filters . GradientTransparency ( value ) , imageObj ) ; } ; param { boolean } colorMatrix param { ColorMatrixFilter } value param { fabric . Image } imageObj public applyColorMatrix = ( colorMatrix = false , value ? , imageObj ? ) : void => { this . applyFilter ( 28 , colorMatrix && new fabric . Image . filters . ColorMatrix ( value ) , imageObj ) ; } ; param { boolean } removeWhite param { RemoveWhiteFilter } value param { fabric . Image } imageObj public applyRemoveWhite = ( removeWhite = false , value ? , imageObj ? ) : void => { this . applyFilter ( 29 , removeWhite && new fabric . Image . filters . RemoveWhite ( value ) , imageObj ) ; } ; } export default ImageHandler ;