UNPKG

fabric

Version:

Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.

1 lines 7.34 kB
{"version":3,"file":"Convolute.min.mjs","sources":["../../../src/filters/Convolute.ts"],"sourcesContent":["import { BaseFilter } from './BaseFilter';\nimport type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';\nimport { classRegistry } from '../ClassRegistry';\nimport { fragmentSource } from './shaders/convolute';\n\nexport type ConvoluteOwnProps = {\n opaque: boolean;\n matrix: number[];\n};\n\nexport const convoluteDefaultValues: ConvoluteOwnProps = {\n opaque: false,\n matrix: [0, 0, 0, 0, 1, 0, 0, 0, 0],\n};\n\n/**\n * Adapted from <a href=\"http://www.html5rocks.com/en/tutorials/canvas/imagefilters/\">html5rocks article</a>\n * @example <caption>Sharpen filter</caption>\n * const filter = new Convolute({\n * matrix: [ 0, -1, 0,\n * -1, 5, -1,\n * 0, -1, 0 ]\n * });\n * object.filters.push(filter);\n * object.applyFilters();\n * canvas.renderAll();\n * @example <caption>Blur filter</caption>\n * const filter = new Convolute({\n * matrix: [ 1/9, 1/9, 1/9,\n * 1/9, 1/9, 1/9,\n * 1/9, 1/9, 1/9 ]\n * });\n * object.filters.push(filter);\n * object.applyFilters();\n * canvas.renderAll();\n * @example <caption>Emboss filter</caption>\n * const filter = new Convolute({\n * matrix: [ 1, 1, 1,\n * 1, 0.7, -1,\n * -1, -1, -1 ]\n * });\n * object.filters.push(filter);\n * object.applyFilters();\n * canvas.renderAll();\n * @example <caption>Emboss filter with opaqueness</caption>\n * const filter = new Convolute({\n * opaque: true,\n * matrix: [ 1, 1, 1,\n * 1, 0.7, -1,\n * -1, -1, -1 ]\n * });\n * object.filters.push(filter);\n * object.applyFilters();\n * canvas.renderAll();\n */\nexport class Convolute extends BaseFilter<'Convolute', ConvoluteOwnProps> {\n /*\n * Opaque value (true/false)\n */\n declare opaque: ConvoluteOwnProps['opaque'];\n\n /*\n * matrix for the filter, max 9x9\n */\n declare matrix: ConvoluteOwnProps['matrix'];\n\n static type = 'Convolute';\n\n static defaults = convoluteDefaultValues;\n\n static uniformLocations = ['uMatrix', 'uOpaque', 'uHalfSize', 'uSize'];\n\n getCacheKey() {\n return `${this.type}_${Math.sqrt(this.matrix.length)}_${\n this.opaque ? 1 : 0\n }` as keyof typeof fragmentSource;\n }\n\n getFragmentSource() {\n return fragmentSource[this.getCacheKey()];\n }\n\n /**\n * Apply the Brightness operation to a Uint8ClampedArray representing the pixels of an image.\n *\n * @param {Object} options\n * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered.\n */\n applyTo2d(options: T2DPipelineState) {\n const imageData = options.imageData,\n data = imageData.data,\n weights = this.matrix,\n side = Math.round(Math.sqrt(weights.length)),\n halfSide = Math.floor(side / 2),\n sw = imageData.width,\n sh = imageData.height,\n output = options.ctx.createImageData(sw, sh),\n dst = output.data,\n // go through the destination image pixels\n alphaFac = this.opaque ? 1 : 0;\n let r, g, b, a, dstOff, scx, scy, srcOff, wt, x, y, cx, cy;\n\n for (y = 0; y < sh; y++) {\n for (x = 0; x < sw; x++) {\n dstOff = (y * sw + x) * 4;\n // calculate the weighed sum of the source image pixels that\n // fall under the convolution matrix\n r = 0;\n g = 0;\n b = 0;\n a = 0;\n\n for (cy = 0; cy < side; cy++) {\n for (cx = 0; cx < side; cx++) {\n scy = y + cy - halfSide;\n scx = x + cx - halfSide;\n\n // eslint-disable-next-line max-depth\n if (scy < 0 || scy >= sh || scx < 0 || scx >= sw) {\n continue;\n }\n\n srcOff = (scy * sw + scx) * 4;\n wt = weights[cy * side + cx];\n\n r += data[srcOff] * wt;\n g += data[srcOff + 1] * wt;\n b += data[srcOff + 2] * wt;\n // eslint-disable-next-line max-depth\n if (!alphaFac) {\n a += data[srcOff + 3] * wt;\n }\n }\n }\n dst[dstOff] = r;\n dst[dstOff + 1] = g;\n dst[dstOff + 2] = b;\n if (!alphaFac) {\n dst[dstOff + 3] = a;\n } else {\n dst[dstOff + 3] = data[dstOff + 3];\n }\n }\n }\n options.imageData = output;\n }\n\n /**\n * Send data from this filter to its shader program's uniforms.\n *\n * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.\n * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects\n */\n sendUniformData(\n gl: WebGLRenderingContext,\n uniformLocations: TWebGLUniformLocationMap,\n ) {\n gl.uniform1fv(uniformLocations.uMatrix, this.matrix);\n }\n\n /**\n * Returns object representation of an instance\n * @return {Object} Object representation of an instance\n */\n toObject() {\n return {\n ...super.toObject(),\n opaque: this.opaque,\n matrix: [...this.matrix],\n };\n }\n}\n\nclassRegistry.setClass(Convolute);\n"],"names":["convoluteDefaultValues","opaque","matrix","Convolute","BaseFilter","getCacheKey","concat","this","type","Math","sqrt","length","getFragmentSource","fragmentSource","applyTo2d","options","imageData","data","weights","side","round","halfSide","floor","sw","width","sh","height","output","ctx","createImageData","dst","alphaFac","r","g","b","a","dstOff","scx","scy","srcOff","wt","x","y","cx","cy","sendUniformData","gl","uniformLocations","uniform1fv","uMatrix","toObject","_objectSpread","super","_defineProperty","classRegistry","setClass"],"mappings":"6QAUO,MAAMA,EAA4C,CACvDC,QAAQ,EACRC,OAAQ,CAAC,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,IA2C5B,MAAMC,UAAkBC,EAiB7BC,WAAAA,GACE,MAAAC,GAAAA,OAAUC,KAAKC,KAAIF,KAAAA,OAAIG,KAAKC,KAAKH,KAAKL,OAAOS,QAAO,KAAAL,OAClDC,KAAKN,OAAS,EAAI,EAEtB,CAEAW,iBAAAA,GACE,OAAOC,EAAeN,KAAKF,cAC7B,CAQAS,SAAAA,CAAUC,GACR,MAAMC,EAAYD,EAAQC,UACxBC,EAAOD,EAAUC,KACjBC,EAAUX,KAAKL,OACfiB,EAAOV,KAAKW,MAAMX,KAAKC,KAAKQ,EAAQP,SACpCU,EAAWZ,KAAKa,MAAMH,EAAO,GAC7BI,EAAKP,EAAUQ,MACfC,EAAKT,EAAUU,OACfC,EAASZ,EAAQa,IAAIC,gBAAgBN,EAAIE,GACzCK,EAAMH,EAAOV,KAEbc,EAAWxB,KAAKN,OAAS,EAAI,EAC/B,IAAI+B,EAAGC,EAAGC,EAAGC,EAAGC,EAAQC,EAAKC,EAAKC,EAAQC,EAAIC,EAAGC,EAAGC,EAAIC,EAExD,IAAKF,EAAI,EAAGA,EAAIjB,EAAIiB,IAClB,IAAKD,EAAI,EAAGA,EAAIlB,EAAIkB,IAAK,CASvB,IARAL,EAAwB,GAAdM,EAAInB,EAAKkB,GAGnBT,EAAI,EACJC,EAAI,EACJC,EAAI,EACJC,EAAI,EAECS,EAAK,EAAGA,EAAKzB,EAAMyB,IACtB,IAAKD,EAAK,EAAGA,EAAKxB,EAAMwB,IACtBL,EAAMI,EAAIE,EAAKvB,EACfgB,EAAMI,EAAIE,EAAKtB,EAGXiB,EAAM,GAAKA,GAAOb,GAAMY,EAAM,GAAKA,GAAOd,IAI9CgB,EAA4B,GAAlBD,EAAMf,EAAKc,GACrBG,EAAKtB,EAAQ0B,EAAKzB,EAAOwB,GAEzBX,GAAKf,EAAKsB,GAAUC,EACpBP,GAAKhB,EAAKsB,EAAS,GAAKC,EACxBN,GAAKjB,EAAKsB,EAAS,GAAKC,EAEnBT,IACHI,GAAKlB,EAAKsB,EAAS,GAAKC,IAI9BV,EAAIM,GAAUJ,EACdF,EAAIM,EAAS,GAAKH,EAClBH,EAAIM,EAAS,GAAKF,EAIhBJ,EAAIM,EAAS,GAHVL,EAGed,EAAKmB,EAAS,GAFdD,CAItB,CAEFpB,EAAQC,UAAYW,CACtB,CAQAkB,eAAAA,CACEC,EACAC,GAEAD,EAAGE,WAAWD,EAAiBE,QAAS1C,KAAKL,OAC/C,CAMAgD,QAAAA,GACE,OAAAC,EAAAA,EAAA,CAAA,EACKC,MAAMF,YAAU,GAAA,CACnBjD,OAAQM,KAAKN,OACbC,OAAQ,IAAIK,KAAKL,SAErB,EA7GAmD,EANWlD,EAAS,OAWN,aAAWkD,EAXdlD,EAAS,WAaFH,GAAsBqD,EAb7BlD,EAAS,mBAeM,CAAC,UAAW,UAAW,YAAa,UAuGhEmD,EAAcC,SAASpD"}