UNPKG

fabric

Version:

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

1 lines 3.26 kB
{"version":3,"file":"Canvas2dFilterBackend.min.mjs","names":[],"sources":["../../../src/filters/Canvas2dFilterBackend.ts"],"sourcesContent":["/**\n * Canvas 2D filter backend.\n */\nimport type { BaseFilter } from './BaseFilter';\nimport type { T2DPipelineState, TPipelineResources } from './typedefs';\n\nexport class Canvas2dFilterBackend {\n /**\n * Experimental. This object is a sort of repository of help layers used to avoid\n * of recreating them during frequent filtering. If you are previewing a filter with\n * a slider you probably do not want to create help layers every filter step.\n * in this object there will be appended some canvases, created once, resized sometimes\n * cleared never. Clearing is left to the developer.\n **/\n resources: TPipelineResources = {};\n\n /**\n * Apply a set of filters against a source image and draw the filtered output\n * to the provided destination canvas.\n *\n * @param {EnhancedFilter} filters The filter to apply.\n * @param {HTMLImageElement|HTMLCanvasElement} sourceElement The source to be filtered.\n * @param {Number} sourceWidth The width of the source input.\n * @param {Number} sourceHeight The height of the source input.\n * @param {HTMLCanvasElement} targetCanvas The destination for filtered output to be drawn.\n */\n applyFilters(\n filters: BaseFilter<string>[],\n sourceElement: CanvasImageSource,\n sourceWidth: number,\n sourceHeight: number,\n targetCanvas: HTMLCanvasElement,\n ): T2DPipelineState | void {\n const ctx = targetCanvas.getContext('2d', {\n willReadFrequently: true,\n desynchronized: true,\n });\n if (!ctx) {\n return;\n }\n ctx.drawImage(sourceElement, 0, 0, sourceWidth, sourceHeight);\n const imageData = ctx.getImageData(0, 0, sourceWidth, sourceHeight);\n const originalImageData = ctx.getImageData(0, 0, sourceWidth, sourceHeight);\n const pipelineState: T2DPipelineState = {\n sourceWidth,\n sourceHeight,\n imageData,\n originalEl: sourceElement,\n originalImageData,\n canvasEl: targetCanvas,\n ctx,\n filterBackend: this,\n };\n filters.forEach((filter) => {\n filter.applyTo(pipelineState);\n });\n const { imageData: imageDataPostFilter } = pipelineState;\n if (\n imageDataPostFilter.width !== sourceWidth ||\n imageDataPostFilter.height !== sourceHeight\n ) {\n targetCanvas.width = imageDataPostFilter.width;\n targetCanvas.height = imageDataPostFilter.height;\n }\n ctx.putImageData(imageDataPostFilter, 0, 0);\n return pipelineState;\n }\n}\n"],"mappings":"8GAMA,IAAa,EAAb,KAAA,CAAA,aAAA,CAAA,EAAA,KAQE,YAAgC,EAAA,CAAA,CAYhC,aACE,EACA,EACA,EACA,EACA,EAAA,CAEA,IAAM,EAAM,EAAa,WAAW,KAAM,CACxC,mBAAA,CAAoB,EACpB,eAAA,CAAgB,EAAA,CAAA,CAElB,GAAA,CAAK,EACH,OAEF,EAAI,UAAU,EAAe,EAAG,EAAG,EAAa,EAAA,CAGhD,IAAM,EAAkC,CACtC,YAAA,EACA,aAAA,EACA,UALgB,EAAI,aAAa,EAAG,EAAG,EAAa,EAAA,CAMpD,WAAY,EACZ,kBANwB,EAAI,aAAa,EAAG,EAAG,EAAa,EAAA,CAO5D,SAAU,EACV,IAAA,EACA,cAAe,KAAA,CAEjB,EAAQ,QAAS,GAAA,CACf,EAAO,QAAQ,EAAA,EAAA,CAEjB,GAAA,CAAQ,UAAW,GAAwB,EAS3C,OAPE,EAAoB,QAAU,GAC9B,EAAoB,SAAW,IAE/B,EAAa,MAAQ,EAAoB,MACzC,EAAa,OAAS,EAAoB,QAE5C,EAAI,aAAa,EAAqB,EAAG,EAAA,CAClC,IAAA,OAAA,KAAA"}