1 line
15 KiB
Plaintext
1 line
15 KiB
Plaintext
{"version":3,"file":"ExtractSystem.mjs","sources":["../../../../../src/rendering/renderers/shared/extract/ExtractSystem.ts"],"sourcesContent":["import { ExtensionType } from '../../../../extensions/Extensions';\nimport { Container } from '../../../../scene/container/Container';\nimport { Texture } from '../texture/Texture';\n\nimport type { ColorSource } from '../../../../color/Color';\nimport type { ICanvas } from '../../../../environment/canvas/ICanvas';\nimport type { Rectangle } from '../../../../maths/shapes/Rectangle';\nimport type { Renderer } from '../../types';\nimport type { System } from '../system/System';\nimport type { GetPixelsOutput } from '../texture/GenerateCanvas';\nimport type { GenerateTextureOptions } from './GenerateTextureSystem';\n\nconst imageTypes = {\n png: 'image/png',\n jpg: 'image/jpeg',\n webp: 'image/webp',\n};\n\ntype Formats = keyof typeof imageTypes;\n\n/**\n * Options for creating an image from a renderer.\n * @memberof rendering\n */\nexport interface ImageOptions\n{\n /** The format of the image. */\n format?: Formats;\n /** The quality of the image. */\n quality?: number;\n}\n\n/**\n * Options for extracting content from a renderer.\n * @memberof rendering\n */\nexport interface BaseExtractOptions\n{\n /** The target to extract. */\n target: Container | Texture;\n /** The region of the target to extract. */\n frame?: Rectangle;\n /** The resolution of the extracted content. */\n resolution?: number;\n /** The color used to clear the extracted content. */\n clearColor?: ColorSource;\n /** Whether to enable anti-aliasing. This may affect performance. */\n antialias?: boolean;\n}\n/**\n * Options for extracting an HTMLImage from the renderer.\n * @memberof rendering\n */\nexport type ExtractImageOptions = BaseExtractOptions & ImageOptions;\n/**\n * Options for extracting and downloading content from a renderer.\n * @memberof rendering\n */\nexport type ExtractDownloadOptions = BaseExtractOptions & {\n /** The filename to use when downloading the content. */\n filename: string;\n};\n/**\n * Options for extracting content from a renderer.\n * @memberof rendering\n */\nexport type ExtractOptions = BaseExtractOptions | ExtractImageOptions | ExtractDownloadOptions;\n\n/**\n * This class provides renderer-specific plugins for exporting content from a renderer.\n * For instance, these plugins can be used for saving an Image, Canvas element or for exporting the raw image data (pixels).\n *\n * Do not instantiate these plugins directly. It is available from the `renderer.extract` property.\n * @example\n * import { Application, Graphics } from 'pixi.js';\n *\n * // Create a new application (extract will be auto-added to renderer)\n * const app = new Application();\n * await app.init();\n *\n * // Draw a red circle\n * const graphics = new Graphics()\n * .circle(0, 0, 50);\n * .fill(0xFF0000)\n *\n * // Render the graphics as an HTMLImageElement\n * const image = await app.renderer.extract.image(graphics);\n * document.body.appendChild(image);\n * @memberof rendering\n */\nexport class ExtractSystem implements System\n{\n /** @ignore */\n public static extension = {\n type: [\n ExtensionType.WebGLSystem,\n ExtensionType.WebGPUSystem,\n ],\n name: 'extract',\n } as const;\n\n /** Default options for creating an image. */\n public static defaultImageOptions: ImageOptions = {\n /** The format of the image. */\n format: 'png' as Formats,\n /** The quality of the image. */\n quality: 1,\n };\n\n private _renderer: Renderer;\n\n /** @param renderer - The renderer this System works for. */\n constructor(renderer: Renderer)\n {\n this._renderer = renderer;\n }\n\n private _normalizeOptions<T extends ExtractOptions>(\n options: ExtractImageOptions | Container | Texture,\n defaults: Partial<T> = {},\n ): T\n {\n if (options instanceof Container || options instanceof Texture)\n {\n return {\n target: options,\n ...defaults\n } as T;\n }\n\n return {\n ...defaults,\n ...options,\n } as T;\n }\n\n /**\n * Will return a HTML Image of the target\n * @param options - The options for creating the image, or the target to extract\n * @returns - HTML Image of the target\n */\n public async image(options: ExtractImageOptions | Container | Texture): Promise<HTMLImageElement>\n {\n const image = new Image();\n\n image.src = await this.base64(options);\n\n return image;\n }\n\n /**\n * Will return a base64 encoded string of this target. It works by calling\n * `Extract.canvas` and then running toDataURL on that.\n * @param options - The options for creating the image, or the target to extract\n */\n public async base64(options: ExtractImageOptions | Container | Texture): Promise<string>\n {\n options = this._normalizeOptions<ExtractImageOptions>(\n options,\n ExtractSystem.defaultImageOptions\n );\n\n const { format, quality } = options;\n\n const canvas = this.canvas(options);\n\n if (canvas.toBlob !== undefined)\n {\n return new Promise<string>((resolve, reject) =>\n {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n canvas.toBlob!((blob) =>\n {\n if (!blob)\n {\n reject(new Error('ICanvas.toBlob failed!'));\n\n return;\n }\n\n const reader = new FileReader();\n\n reader.onload = () => resolve(reader.result as string);\n reader.onerror = reject;\n reader.readAsDataURL(blob);\n }, imageTypes[format], quality);\n });\n }\n if (canvas.toDataURL !== undefined)\n {\n return canvas.toDataURL(imageTypes[format], quality);\n }\n if (canvas.convertToBlob !== undefined)\n {\n const blob = await canvas.convertToBlob({ type: imageTypes[format], quality });\n\n return new Promise<string>((resolve, reject) =>\n {\n const reader = new FileReader();\n\n reader.onload = () => resolve(reader.result as string);\n reader.onerror = reject;\n reader.readAsDataURL(blob);\n });\n }\n\n throw new Error('Extract.base64() requires ICanvas.toDataURL, ICanvas.toBlob, '\n + 'or ICanvas.convertToBlob to be implemented');\n }\n\n /**\n * Creates a Canvas element, renders this target to it and then returns it.\n * @param options - The options for creating the canvas, or the target to extract\n * @returns - A Canvas element with the texture rendered on.\n */\n public canvas(options: ExtractOptions | Container | Texture): ICanvas\n {\n options = this._normalizeOptions(options);\n\n const target = options.target;\n\n const renderer = this._renderer;\n\n if (target instanceof Texture)\n {\n return renderer.texture.generateCanvas(target);\n }\n\n const texture = renderer.textureGenerator.generateTexture(options as GenerateTextureOptions);\n\n const canvas = renderer.texture.generateCanvas(texture);\n\n texture.destroy();\n\n return canvas;\n }\n\n /**\n * Will return a one-dimensional array containing the pixel data of the entire texture in RGBA\n * order, with integer values between 0 and 255 (included).\n * @param options - The options for extracting the image, or the target to extract\n * @returns - One-dimensional array containing the pixel data of the entire texture\n */\n public pixels(options: ExtractOptions | Container | Texture): GetPixelsOutput\n {\n options = this._normalizeOptions(options);\n\n const target = options.target;\n\n const renderer = this._renderer;\n const texture = target instanceof Texture\n ? target\n : renderer.textureGenerator.generateTexture(options as GenerateTextureOptions);\n\n const pixelInfo = renderer.texture.getPixels(texture);\n\n if (target instanceof Container)\n {\n // destroy generated texture\n texture.destroy();\n }\n\n return pixelInfo;\n }\n\n /**\n * Will return a texture of the target\n * @param options - The options for creating the texture, or the target to extract\n * @returns - A texture of the target\n */\n public texture(options: ExtractOptions | Container | Texture): Texture\n {\n options = this._normalizeOptions(options);\n\n if (options.target instanceof Texture) return options.target;\n\n return this._renderer.textureGenerator.generateTexture(options as GenerateTextureOptions);\n }\n\n /**\n * Will extract a HTMLImage of the target and download it\n * @param options - The options for downloading and extracting the image, or the target to extract\n */\n public download(options: ExtractDownloadOptions | Container | Texture)\n {\n options = this._normalizeOptions<ExtractDownloadOptions>(options);\n\n const canvas = this.canvas(options);\n\n const link = document.createElement('a');\n\n link.download = options.filename ?? 'image.png';\n link.href = canvas.toDataURL('image/png');\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n }\n\n /**\n * Logs the target to the console as an image. This is a useful way to debug what's happening in the renderer.\n * @param options - The options for logging the image, or the target to log\n */\n public log(options: (ExtractOptions & {width?: number}) | Container | Texture)\n {\n const width = options.width ?? 200;\n\n options = this._normalizeOptions(options);\n\n const canvas = this.canvas(options);\n\n const base64 = canvas.toDataURL();\n\n // eslint-disable-next-line no-console\n console.log(`[Pixi Texture] ${canvas.width}px ${canvas.height}px`);\n\n const style = [\n 'font-size: 1px;',\n `padding: ${width}px ${300}px;`,\n `background: url(${base64}) no-repeat;`,\n 'background-size: contain;',\n ].join(' ');\n\n // eslint-disable-next-line no-console\n console.log('%c ', style);\n }\n\n public destroy(): void\n {\n this._renderer = null as any as Renderer;\n }\n}\n"],"names":[],"mappings":";;;;;AAYA,MAAM,UAAa,GAAA;AAAA,EACf,GAAK,EAAA,WAAA;AAAA,EACL,GAAK,EAAA,YAAA;AAAA,EACL,IAAM,EAAA,YAAA;AACV,CAAA,CAAA;AA0EO,MAAM,cAAA,GAAN,MAAM,cACb,CAAA;AAAA;AAAA,EAqBI,YAAY,QACZ,EAAA;AACI,IAAA,IAAA,CAAK,SAAY,GAAA,QAAA,CAAA;AAAA,GACrB;AAAA,EAEQ,iBACJ,CAAA,OAAA,EACA,QAAuB,GAAA,EAE3B,EAAA;AACI,IAAI,IAAA,OAAA,YAAmB,SAAa,IAAA,OAAA,YAAmB,OACvD,EAAA;AACI,MAAO,OAAA;AAAA,QACH,MAAQ,EAAA,OAAA;AAAA,QACR,GAAG,QAAA;AAAA,OACP,CAAA;AAAA,KACJ;AAEA,IAAO,OAAA;AAAA,MACH,GAAG,QAAA;AAAA,MACH,GAAG,OAAA;AAAA,KACP,CAAA;AAAA,GACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,MAAa,MAAM,OACnB,EAAA;AACI,IAAM,MAAA,KAAA,GAAQ,IAAI,KAAM,EAAA,CAAA;AAExB,IAAA,KAAA,CAAM,GAAM,GAAA,MAAM,IAAK,CAAA,MAAA,CAAO,OAAO,CAAA,CAAA;AAErC,IAAO,OAAA,KAAA,CAAA;AAAA,GACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,MAAa,OAAO,OACpB,EAAA;AACI,IAAA,OAAA,GAAU,IAAK,CAAA,iBAAA;AAAA,MACX,OAAA;AAAA,MACA,cAAc,CAAA,mBAAA;AAAA,KAClB,CAAA;AAEA,IAAM,MAAA,EAAE,MAAQ,EAAA,OAAA,EAAY,GAAA,OAAA,CAAA;AAE5B,IAAM,MAAA,MAAA,GAAS,IAAK,CAAA,MAAA,CAAO,OAAO,CAAA,CAAA;AAElC,IAAI,IAAA,MAAA,CAAO,WAAW,KACtB,CAAA,EAAA;AACI,MAAA,OAAO,IAAI,OAAA,CAAgB,CAAC,OAAA,EAAS,MACrC,KAAA;AAEI,QAAO,MAAA,CAAA,MAAA,CAAQ,CAAC,IAChB,KAAA;AACI,UAAA,IAAI,CAAC,IACL,EAAA;AACI,YAAO,MAAA,CAAA,IAAI,KAAM,CAAA,wBAAwB,CAAC,CAAA,CAAA;AAE1C,YAAA,OAAA;AAAA,WACJ;AAEA,UAAM,MAAA,MAAA,GAAS,IAAI,UAAW,EAAA,CAAA;AAE9B,UAAA,MAAA,CAAO,MAAS,GAAA,MAAM,OAAQ,CAAA,MAAA,CAAO,MAAgB,CAAA,CAAA;AACrD,UAAA,MAAA,CAAO,OAAU,GAAA,MAAA,CAAA;AACjB,UAAA,MAAA,CAAO,cAAc,IAAI,CAAA,CAAA;AAAA,SAC1B,EAAA,UAAA,CAAW,MAAM,CAAA,EAAG,OAAO,CAAA,CAAA;AAAA,OACjC,CAAA,CAAA;AAAA,KACL;AACA,IAAI,IAAA,MAAA,CAAO,cAAc,KACzB,CAAA,EAAA;AACI,MAAA,OAAO,MAAO,CAAA,SAAA,CAAU,UAAW,CAAA,MAAM,GAAG,OAAO,CAAA,CAAA;AAAA,KACvD;AACA,IAAI,IAAA,MAAA,CAAO,kBAAkB,KAC7B,CAAA,EAAA;AACI,MAAM,MAAA,IAAA,GAAO,MAAM,MAAA,CAAO,aAAc,CAAA,EAAE,MAAM,UAAW,CAAA,MAAM,CAAG,EAAA,OAAA,EAAS,CAAA,CAAA;AAE7E,MAAA,OAAO,IAAI,OAAA,CAAgB,CAAC,OAAA,EAAS,MACrC,KAAA;AACI,QAAM,MAAA,MAAA,GAAS,IAAI,UAAW,EAAA,CAAA;AAE9B,QAAA,MAAA,CAAO,MAAS,GAAA,MAAM,OAAQ,CAAA,MAAA,CAAO,MAAgB,CAAA,CAAA;AACrD,QAAA,MAAA,CAAO,OAAU,GAAA,MAAA,CAAA;AACjB,QAAA,MAAA,CAAO,cAAc,IAAI,CAAA,CAAA;AAAA,OAC5B,CAAA,CAAA;AAAA,KACL;AAEA,IAAM,MAAA,IAAI,MAAM,yGACkC,CAAA,CAAA;AAAA,GACtD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOO,OAAO,OACd,EAAA;AACI,IAAU,OAAA,GAAA,IAAA,CAAK,kBAAkB,OAAO,CAAA,CAAA;AAExC,IAAA,MAAM,SAAS,OAAQ,CAAA,MAAA,CAAA;AAEvB,IAAA,MAAM,WAAW,IAAK,CAAA,SAAA,CAAA;AAEtB,IAAA,IAAI,kBAAkB,OACtB,EAAA;AACI,MAAO,OAAA,QAAA,CAAS,OAAQ,CAAA,cAAA,CAAe,MAAM,CAAA,CAAA;AAAA,KACjD;AAEA,IAAA,MAAM,OAAU,GAAA,QAAA,CAAS,gBAAiB,CAAA,eAAA,CAAgB,OAAiC,CAAA,CAAA;AAE3F,IAAA,MAAM,MAAS,GAAA,QAAA,CAAS,OAAQ,CAAA,cAAA,CAAe,OAAO,CAAA,CAAA;AAEtD,IAAA,OAAA,CAAQ,OAAQ,EAAA,CAAA;AAEhB,IAAO,OAAA,MAAA,CAAA;AAAA,GACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQO,OAAO,OACd,EAAA;AACI,IAAU,OAAA,GAAA,IAAA,CAAK,kBAAkB,OAAO,CAAA,CAAA;AAExC,IAAA,MAAM,SAAS,OAAQ,CAAA,MAAA,CAAA;AAEvB,IAAA,MAAM,WAAW,IAAK,CAAA,SAAA,CAAA;AACtB,IAAA,MAAM,UAAU,MAAkB,YAAA,OAAA,GAC5B,SACA,QAAS,CAAA,gBAAA,CAAiB,gBAAgB,OAAiC,CAAA,CAAA;AAEjF,IAAA,MAAM,SAAY,GAAA,QAAA,CAAS,OAAQ,CAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAEpD,IAAA,IAAI,kBAAkB,SACtB,EAAA;AAEI,MAAA,OAAA,CAAQ,OAAQ,EAAA,CAAA;AAAA,KACpB;AAEA,IAAO,OAAA,SAAA,CAAA;AAAA,GACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOO,QAAQ,OACf,EAAA;AACI,IAAU,OAAA,GAAA,IAAA,CAAK,kBAAkB,OAAO,CAAA,CAAA;AAExC,IAAA,IAAI,QAAQ,MAAkB,YAAA,OAAA;AAAS,MAAA,OAAO,OAAQ,CAAA,MAAA,CAAA;AAEtD,IAAA,OAAO,IAAK,CAAA,SAAA,CAAU,gBAAiB,CAAA,eAAA,CAAgB,OAAiC,CAAA,CAAA;AAAA,GAC5F;AAAA;AAAA;AAAA;AAAA;AAAA,EAMO,SAAS,OAChB,EAAA;AACI,IAAU,OAAA,GAAA,IAAA,CAAK,kBAA0C,OAAO,CAAA,CAAA;AAEhE,IAAM,MAAA,MAAA,GAAS,IAAK,CAAA,MAAA,CAAO,OAAO,CAAA,CAAA;AAElC,IAAM,MAAA,IAAA,GAAO,QAAS,CAAA,aAAA,CAAc,GAAG,CAAA,CAAA;AAEvC,IAAK,IAAA,CAAA,QAAA,GAAW,QAAQ,QAAY,IAAA,WAAA,CAAA;AACpC,IAAK,IAAA,CAAA,IAAA,GAAO,MAAO,CAAA,SAAA,CAAU,WAAW,CAAA,CAAA;AACxC,IAAS,QAAA,CAAA,IAAA,CAAK,YAAY,IAAI,CAAA,CAAA;AAC9B,IAAA,IAAA,CAAK,KAAM,EAAA,CAAA;AACX,IAAS,QAAA,CAAA,IAAA,CAAK,YAAY,IAAI,CAAA,CAAA;AAAA,GAClC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMO,IAAI,OACX,EAAA;AACI,IAAM,MAAA,KAAA,GAAQ,QAAQ,KAAS,IAAA,GAAA,CAAA;AAE/B,IAAU,OAAA,GAAA,IAAA,CAAK,kBAAkB,OAAO,CAAA,CAAA;AAExC,IAAM,MAAA,MAAA,GAAS,IAAK,CAAA,MAAA,CAAO,OAAO,CAAA,CAAA;AAElC,IAAM,MAAA,MAAA,GAAS,OAAO,SAAU,EAAA,CAAA;AAGhC,IAAA,OAAA,CAAQ,IAAI,CAAkB,eAAA,EAAA,MAAA,CAAO,KAAK,CAAM,GAAA,EAAA,MAAA,CAAO,MAAM,CAAI,EAAA,CAAA,CAAA,CAAA;AAEjE,IAAA,MAAM,KAAQ,GAAA;AAAA,MACV,iBAAA;AAAA,MACA,CAAA,SAAA,EAAY,KAAK,CAAA,GAAA,EAAM,GAAG,CAAA,GAAA,CAAA;AAAA,MAC1B,mBAAmB,MAAM,CAAA,YAAA,CAAA;AAAA,MACzB,2BAAA;AAAA,KACJ,CAAE,KAAK,GAAG,CAAA,CAAA;AAGV,IAAQ,OAAA,CAAA,GAAA,CAAI,OAAO,KAAK,CAAA,CAAA;AAAA,GAC5B;AAAA,EAEO,OACP,GAAA;AACI,IAAA,IAAA,CAAK,SAAY,GAAA,IAAA,CAAA;AAAA,GACrB;AACJ,CAAA,CAAA;AAAA;AAhPa,cAAA,CAGK,SAAY,GAAA;AAAA,EACtB,IAAM,EAAA;AAAA,IACF,aAAc,CAAA,WAAA;AAAA,IACd,aAAc,CAAA,YAAA;AAAA,GAClB;AAAA,EACA,IAAM,EAAA,SAAA;AACV,CAAA,CAAA;AAAA;AATS,cAAA,CAYK,mBAAoC,GAAA;AAAA;AAAA,EAE9C,MAAQ,EAAA,KAAA;AAAA;AAAA,EAER,OAAS,EAAA,CAAA;AACb,CAAA,CAAA;AAjBG,IAAM,aAAN,GAAA;;;;"} |