@tsparticles/shape-image 4.0.0-beta.8 → 4.0.0

package/tsparticles.shape.image.js

@@ -1,327 +1,861 @@
-/*!
- * Author : Matteo Bruni
- * MIT license: https://opensource.org/licenses/MIT
- * Demo / Generator : https://particles.js.org/
- * GitHub : https://www.github.com/matteobruni/tsparticles
- * How to use? : Check the GitHub README
- * v4.0.0-beta.8
- */
-/*
- * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
- * This devtool is neither made for production nor for readable output files.
- * It uses "eval()" calls to create a separate source file in the browser devtools.
- * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
- * or disable the default devtool with "devtool: false".
- * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
- */
-(function webpackUniversalModuleDefinition(root, factory) {
-	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("@tsparticles/engine"));
-	else if(typeof define === 'function' && define.amd)
-		define(["@tsparticles/engine"], factory);
-	else {
-		var a = typeof exports === 'object' ? factory(require("@tsparticles/engine")) : factory(root["window"]);
-		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
-	}
-})(this, (__WEBPACK_EXTERNAL_MODULE__tsparticles_engine__) => {
-return /******/ (() => { // webpackBootstrap
-/******/ 	"use strict";
-/******/ 	var __webpack_modules__ = ({
+(function(g){g.__tsParticlesInternals=g.__tsParticlesInternals||{};g.__tsParticlesInternals.bundles=g.__tsParticlesInternals.bundles||{};g.__tsParticlesInternals.effects=g.__tsParticlesInternals.effects||{};g.__tsParticlesInternals.engine=g.__tsParticlesInternals.engine||{};g.__tsParticlesInternals.interactions=g.__tsParticlesInternals.interactions||{};g.__tsParticlesInternals.palettes=g.__tsParticlesInternals.palettes||{};g.__tsParticlesInternals.paths=g.__tsParticlesInternals.paths||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins.emittersShapes=g.__tsParticlesInternals.plugins.emittersShapes||{};g.__tsParticlesInternals.presets=g.__tsParticlesInternals.presets||{};g.__tsParticlesInternals.shapes=g.__tsParticlesInternals.shapes||{};g.__tsParticlesInternals.updaters=g.__tsParticlesInternals.updaters||{};g.__tsParticlesInternals.utils=g.__tsParticlesInternals.utils||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas.utils=g.__tsParticlesInternals.canvas.utils||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path.utils=g.__tsParticlesInternals.path.utils||{};var __tsProxyFactory=typeof Proxy!=="undefined"?function(obj){return new Proxy(obj,{get:function(target,key){if(!(key in target)){target[key]={};}return target[key];}});}:function(obj){return obj;};g.__tsParticlesInternals.bundles=__tsProxyFactory(g.__tsParticlesInternals.bundles);g.__tsParticlesInternals.effects=__tsProxyFactory(g.__tsParticlesInternals.effects);g.__tsParticlesInternals.interactions=__tsProxyFactory(g.__tsParticlesInternals.interactions);g.__tsParticlesInternals.palettes=__tsProxyFactory(g.__tsParticlesInternals.palettes);g.__tsParticlesInternals.paths=__tsProxyFactory(g.__tsParticlesInternals.paths);g.__tsParticlesInternals.plugins=__tsProxyFactory(g.__tsParticlesInternals.plugins);g.__tsParticlesInternals.plugins.emittersShapes=__tsProxyFactory(g.__tsParticlesInternals.plugins.emittersShapes);g.__tsParticlesInternals.presets=__tsProxyFactory(g.__tsParticlesInternals.presets);g.__tsParticlesInternals.shapes=__tsProxyFactory(g.__tsParticlesInternals.shapes);g.__tsParticlesInternals.updaters=__tsProxyFactory(g.__tsParticlesInternals.updaters);g.__tsParticlesInternals.utils=__tsProxyFactory(g.__tsParticlesInternals.utils);g.__tsParticlesInternals.canvas=__tsProxyFactory(g.__tsParticlesInternals.canvas);g.__tsParticlesInternals.path=__tsProxyFactory(g.__tsParticlesInternals.path);g.tsparticlesInternalExports=g.tsparticlesInternalExports||{};})(typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:this);
+/* Shape v4.0.0 */
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tsparticles/engine')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@tsparticles/engine'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.__tsParticlesInternals = global.__tsParticlesInternals || {}, global.__tsParticlesInternals.shapes = global.__tsParticlesInternals.shapes || {}, global.__tsParticlesInternals.shapes.image = global.__tsParticlesInternals.shapes.image || {}), global.__tsParticlesInternals.engine));
+})(this, (function (exports, engine) { 'use strict';
 
-/***/ "@tsparticles/engine"
-/*!*********************************************************************************************************************************!*\
-  !*** external {"commonjs":"@tsparticles/engine","commonjs2":"@tsparticles/engine","amd":"@tsparticles/engine","root":"window"} ***!
-  \*********************************************************************************************************************************/
-(module) {
+    const shapeTypes = ["image", "images"];
+    const stringStart = 0, defaultOpacity = 1;
+    const currentColorRegex = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;
+    function replaceColorSvg(imageShape, color, opacity, hdr = false) {
+        const { svgData } = imageShape;
+        if (!svgData) {
+            return "";
+        }
+        const colorStyle = engine.getStyleFromHsl(color, hdr, opacity);
+        if (svgData.includes("fill")) {
+            return svgData.replaceAll(currentColorRegex, () => colorStyle);
+        }
+        const preFillIndex = svgData.indexOf(">");
+        return `${svgData.substring(stringStart, preFillIndex)} fill="${colorStyle}"${svgData.substring(preFillIndex)}`;
+    }
+    async function loadImage(image) {
+        return new Promise(resolve => {
+            image.loading = true;
+            const img = new Image();
+            image.element = img;
+            img.addEventListener("load", () => {
+                image.loading = false;
+                resolve();
+            });
+            img.addEventListener("error", () => {
+                image.element = undefined;
+                image.error = true;
+                image.loading = false;
+                engine.getLogger().error(`Error loading image: ${image.source}`);
+                resolve();
+            });
+            img.src = image.source;
+        });
+    }
+    async function downloadSvgImage(image) {
+        if (image.type !== "svg") {
+            await loadImage(image);
+            return;
+        }
+        image.loading = true;
+        const response = await fetch(image.source);
+        if (response.ok) {
+            image.svgData = await response.text();
+        }
+        else {
+            engine.getLogger().error("Image not found");
+            image.error = true;
+        }
+        image.loading = false;
+    }
+    function replaceImageColor(image, imageData, color, particle, hdr = false) {
+        const svgColoredData = replaceColorSvg(image, color, particle.opacity?.value ?? defaultOpacity, hdr), imageRes = {
+            color,
+            gif: imageData.gif,
+            data: {
+                ...image,
+                svgData: svgColoredData,
+            },
+            loaded: false,
+            ratio: imageData.width / imageData.height,
+            replaceColor: imageData.replaceColor,
+            source: imageData.src,
+        };
+        return new Promise(resolve => {
+            const svg = new Blob([svgColoredData], { type: "image/svg+xml" }), url = URL.createObjectURL(svg), img = new Image();
+            img.addEventListener("load", () => {
+                imageRes.loaded = true;
+                imageRes.element = img;
+                resolve(imageRes);
+                URL.revokeObjectURL(url);
+            });
+            const errorHandler = async () => {
+                URL.revokeObjectURL(url);
+                const img2 = {
+                    ...image,
+                    error: false,
+                    loading: true,
+                };
+                await loadImage(img2);
+                imageRes.loaded = true;
+                imageRes.element = img2.element;
+                resolve(imageRes);
+            };
+            img.addEventListener("error", () => void errorHandler());
+            img.src = url;
+        });
+    }
 
-module.exports = __WEBPACK_EXTERNAL_MODULE__tsparticles_engine__;
+    const InterlaceOffsets = [0, 4, 2, 1];
+    const InterlaceSteps = [8, 8, 4, 2];
 
-/***/ },
+    class ByteStream {
+        data;
+        pos;
+        constructor(bytes) {
+            this.pos = 0;
+            this.data = new Uint8ClampedArray(bytes);
+        }
+        getString(count) {
+            const slice = this.data.slice(this.pos, this.pos + count);
+            this.pos += slice.length;
+            return slice.reduce((acc, curr) => acc + String.fromCharCode(curr), "");
+        }
+        nextByte() {
+            return this.data[this.pos++];
+        }
+        nextTwoBytes() {
+            const increment = 2, previous = 1, shift = 8;
+            this.pos += increment;
+            return this.data[this.pos - increment] + (this.data[this.pos - previous] << shift);
+        }
+        readSubBlocks() {
+            let blockString = "", size;
+            const minCount = 0, emptySize = 0;
+            do {
+                size = this.data[this.pos++];
+                for (let count = size; --count >= minCount; blockString += String.fromCharCode(this.data[this.pos++])) {
+                }
+            } while (size !== emptySize);
+            return blockString;
+        }
+        readSubBlocksBin() {
+            let size = this.data[this.pos], len = 0;
+            const emptySize = 0, increment = 1;
+            for (let offset = 0; size !== emptySize; offset += size + increment, size = this.data[this.pos + offset]) {
+                len += size;
+            }
+            const blockData = new Uint8Array(len);
+            size = this.data[this.pos++];
+            for (let i = 0; size !== emptySize; size = this.data[this.pos++]) {
+                for (let count = size; --count >= emptySize; blockData[i++] = this.data[this.pos++]) {
+                }
+            }
+            return blockData;
+        }
+        skipSubBlocks() {
+            for (const increment = 1, noData = 0; this.data[this.pos] !== noData; this.pos += this.data[this.pos] + increment) {
+            }
+            this.pos++;
+        }
+    }
 
-/***/ "./dist/browser/Utils.js"
-/*!*******************************!*\
-  !*** ./dist/browser/Utils.js ***!
-  \*******************************/
-(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+    var DisposalMethod;
+    (function (DisposalMethod) {
+        DisposalMethod[DisposalMethod["Replace"] = 0] = "Replace";
+        DisposalMethod[DisposalMethod["Combine"] = 1] = "Combine";
+        DisposalMethod[DisposalMethod["RestoreBackground"] = 2] = "RestoreBackground";
+        DisposalMethod[DisposalMethod["RestorePrevious"] = 3] = "RestorePrevious";
+        DisposalMethod[DisposalMethod["UndefinedA"] = 4] = "UndefinedA";
+        DisposalMethod[DisposalMethod["UndefinedB"] = 5] = "UndefinedB";
+        DisposalMethod[DisposalMethod["UndefinedC"] = 6] = "UndefinedC";
+        DisposalMethod[DisposalMethod["UndefinedD"] = 7] = "UndefinedD";
+    })(DisposalMethod || (DisposalMethod = {}));
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   downloadSvgImage: () => (/* binding */ downloadSvgImage),\n/* harmony export */   loadImage: () => (/* binding */ loadImage),\n/* harmony export */   replaceImageColor: () => (/* binding */ replaceImageColor),\n/* harmony export */   shapeTypes: () => (/* binding */ shapeTypes)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nconst shapeTypes = [\n    \"image\",\n    \"images\"\n];\nconst stringStart = 0, defaultOpacity = 1;\nconst currentColorRegex = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\\((-?\\d+%?[,\\s]+){2,3}\\s*[\\d.]+%?\\))|currentcolor/gi;\nfunction replaceColorSvg(imageShape, color, opacity, hdr = false) {\n    const { svgData } = imageShape;\n    if (!svgData) {\n        return \"\";\n    }\n    const colorStyle = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromHsl)(color, hdr, opacity);\n    if (svgData.includes(\"fill\")) {\n        return svgData.replaceAll(currentColorRegex, ()=>colorStyle);\n    }\n    const preFillIndex = svgData.indexOf(\">\");\n    return `${svgData.substring(stringStart, preFillIndex)} fill=\"${colorStyle}\"${svgData.substring(preFillIndex)}`;\n}\nasync function loadImage(image) {\n    return new Promise((resolve)=>{\n        image.loading = true;\n        const img = new Image();\n        image.element = img;\n        img.addEventListener(\"load\", ()=>{\n            image.loading = false;\n            resolve();\n        });\n        img.addEventListener(\"error\", ()=>{\n            image.element = undefined;\n            image.error = true;\n            image.loading = false;\n            (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getLogger)().error(`Error loading image: ${image.source}`);\n            resolve();\n        });\n        img.src = image.source;\n    });\n}\nasync function downloadSvgImage(image) {\n    if (image.type !== \"svg\") {\n        await loadImage(image);\n        return;\n    }\n    image.loading = true;\n    const response = await fetch(image.source);\n    if (response.ok) {\n        image.svgData = await response.text();\n    } else {\n        (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getLogger)().error(\"Image not found\");\n        image.error = true;\n    }\n    image.loading = false;\n}\nfunction replaceImageColor(image, imageData, color, particle, hdr = false) {\n    const svgColoredData = replaceColorSvg(image, color, particle.opacity?.value ?? defaultOpacity, hdr), imageRes = {\n        color,\n        gif: imageData.gif,\n        data: {\n            ...image,\n            svgData: svgColoredData\n        },\n        loaded: false,\n        ratio: imageData.width / imageData.height,\n        replaceColor: imageData.replaceColor,\n        source: imageData.src\n    };\n    return new Promise((resolve)=>{\n        const svg = new Blob([\n            svgColoredData\n        ], {\n            type: \"image/svg+xml\"\n        }), url = URL.createObjectURL(svg), img = new Image();\n        img.addEventListener(\"load\", ()=>{\n            imageRes.loaded = true;\n            imageRes.element = img;\n            resolve(imageRes);\n            URL.revokeObjectURL(url);\n        });\n        const errorHandler = async ()=>{\n            URL.revokeObjectURL(url);\n            const img2 = {\n                ...image,\n                error: false,\n                loading: true\n            };\n            await loadImage(img2);\n            imageRes.loaded = true;\n            imageRes.element = img2.element;\n            resolve(imageRes);\n        };\n        img.addEventListener(\"error\", ()=>void errorHandler());\n        img.src = url;\n    });\n}\n\n\n//# sourceURL=webpack://@tsparticles/shape-image/./dist/browser/Utils.js?\n}");
+    var GIFDataHeaders;
+    (function (GIFDataHeaders) {
+        GIFDataHeaders[GIFDataHeaders["Extension"] = 33] = "Extension";
+        GIFDataHeaders[GIFDataHeaders["ApplicationExtension"] = 255] = "ApplicationExtension";
+        GIFDataHeaders[GIFDataHeaders["GraphicsControlExtension"] = 249] = "GraphicsControlExtension";
+        GIFDataHeaders[GIFDataHeaders["PlainTextExtension"] = 1] = "PlainTextExtension";
+        GIFDataHeaders[GIFDataHeaders["CommentExtension"] = 254] = "CommentExtension";
+        GIFDataHeaders[GIFDataHeaders["Image"] = 44] = "Image";
+        GIFDataHeaders[GIFDataHeaders["EndOfFile"] = 59] = "EndOfFile";
+    })(GIFDataHeaders || (GIFDataHeaders = {}));
 
-/***/ },
+    const defaultFrame = 0, initialTime = 0, firstIndex = 0, defaultLoopCount = 0;
+    function parseColorTable(byteStream, count) {
+        const colors = [];
+        for (let i = 0; i < count; i++) {
+            colors.push({
+                r: byteStream.data[byteStream.pos],
+                g: byteStream.data[byteStream.pos + 1],
+                b: byteStream.data[byteStream.pos + 2],
+            });
+            byteStream.pos += 3;
+        }
+        return colors;
+    }
+    function parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex) {
+        switch (byteStream.nextByte()) {
+            case GIFDataHeaders.GraphicsControlExtension: {
+                const frame = gif.frames[getFrameIndex(false)];
+                byteStream.pos++;
+                const packedByte = byteStream.nextByte();
+                frame.GCreserved = (packedByte & 0xe0) >>> 5;
+                frame.disposalMethod = (packedByte & 0x1c) >>> 2;
+                frame.userInputDelayFlag = (packedByte & 2) === 2;
+                const transparencyFlag = (packedByte & 1) === 1;
+                frame.delayTime = byteStream.nextTwoBytes() * 0xa;
+                const transparencyIndex = byteStream.nextByte();
+                if (transparencyFlag) {
+                    getTransparencyIndex(transparencyIndex);
+                }
+                byteStream.pos++;
+                break;
+            }
+            case GIFDataHeaders.ApplicationExtension: {
+                byteStream.pos++;
+                const applicationExtension = {
+                    identifier: byteStream.getString(8),
+                    authenticationCode: byteStream.getString(3),
+                    data: byteStream.readSubBlocksBin(),
+                };
+                gif.applicationExtensions.push(applicationExtension);
+                break;
+            }
+            case GIFDataHeaders.CommentExtension: {
+                gif.comments.push([getFrameIndex(false), byteStream.readSubBlocks()]);
+                break;
+            }
+            case GIFDataHeaders.PlainTextExtension: {
+                if (gif.globalColorTable.length === 0) {
+                    throw new EvalError("plain text extension without global color table");
+                }
+                byteStream.pos++;
+                gif.frames[getFrameIndex(false)].plainTextData = {
+                    left: byteStream.nextTwoBytes(),
+                    top: byteStream.nextTwoBytes(),
+                    width: byteStream.nextTwoBytes(),
+                    height: byteStream.nextTwoBytes(),
+                    charSize: {
+                        width: byteStream.nextTwoBytes(),
+                        height: byteStream.nextTwoBytes(),
+                    },
+                    foregroundColor: byteStream.nextByte(),
+                    backgroundColor: byteStream.nextByte(),
+                    text: byteStream.readSubBlocks(),
+                };
+                break;
+            }
+            default:
+                byteStream.skipSubBlocks();
+                break;
+        }
+    }
+    function readBits(imageData, pos, len) {
+        const bytePos = pos >>> 3, bitPos = pos & 7;
+        return (((imageData[bytePos] + (imageData[bytePos + 1] << 8) + (imageData[bytePos + 2] << 16)) &
+            (((1 << len) - 1) << bitPos)) >>>
+            bitPos);
+    }
+    async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings, progressCallback) {
+        const frame = gif.frames[getFrameIndex(true)];
+        frame.left = byteStream.nextTwoBytes();
+        frame.top = byteStream.nextTwoBytes();
+        frame.width = byteStream.nextTwoBytes();
+        frame.height = byteStream.nextTwoBytes();
+        const packedByte = byteStream.nextByte(), localColorTableFlag = (packedByte & 0x80) === 0x80, interlacedFlag = (packedByte & 0x40) === 0x40;
+        frame.sortFlag = (packedByte & 0x20) === 0x20;
+        frame.reserved = (packedByte & 0x18) >>> 3;
+        const localColorCount = 1 << ((packedByte & 7) + 1);
+        if (localColorTableFlag) {
+            frame.localColorTable = parseColorTable(byteStream, localColorCount);
+        }
+        const getColor = (index) => {
+            const { r, g, b } = (localColorTableFlag ? frame.localColorTable : gif.globalColorTable)[index];
+            if (index !== getTransparencyIndex(null)) {
+                return { r, g, b, a: 255 };
+            }
+            return { r, g, b, a: avgAlpha ? Math.trunc((r + g + b) / 3) : 0 };
+        }, image = (() => {
+            try {
+                return new ImageData(frame.width, frame.height, canvasSettings);
+            }
+            catch (error) {
+                if (error instanceof DOMException && error.name === "IndexSizeError") {
+                    return null;
+                }
+                throw error;
+            }
+        })();
+        if (image == null) {
+            throw new EvalError("GIF frame size is to large");
+        }
+        const minCodeSize = byteStream.nextByte(), imageData = byteStream.readSubBlocksBin(), clearCode = 1 << minCodeSize;
+        if (interlacedFlag) {
+            for (let code = 0, size = minCodeSize + 1, pos = 0, dic = [[0]], pass = 0; pass < 4; pass++) {
+                if (InterlaceOffsets[pass] < frame.height) {
+                    let pixelPos = 0, lineIndex = 0, exit = false;
+                    while (!exit) {
+                        const last = code;
+                        code = readBits(imageData, pos, size);
+                        pos += size + 1;
+                        if (code === clearCode) {
+                            size = minCodeSize + 1;
+                            dic.length = clearCode + 2;
+                            for (let i = 0; i < dic.length; i++) {
+                                dic[i] = i < clearCode ? [i] : [];
+                            }
+                        }
+                        else {
+                            if (code >= dic.length) {
+                                dic.push(dic[last].concat(dic[last][0]));
+                            }
+                            else if (last !== clearCode) {
+                                dic.push(dic[last].concat(dic[code][0]));
+                            }
+                            for (const item of dic[code]) {
+                                const { r, g, b, a } = getColor(item);
+                                image.data.set([r, g, b, a], InterlaceOffsets[pass] * frame.width +
+                                    InterlaceSteps[pass] * lineIndex +
+                                    (pixelPos % (frame.width * 4)));
+                                pixelPos += 4;
+                            }
+                            if (dic.length === 1 << size && size < 0xc) {
+                                size++;
+                            }
+                        }
+                        if (pixelPos === frame.width * 4 * (lineIndex + 1)) {
+                            lineIndex++;
+                            if (InterlaceOffsets[pass] + InterlaceSteps[pass] * lineIndex >= frame.height) {
+                                exit = true;
+                            }
+                        }
+                    }
+                }
+            }
+            frame.image = image;
+            frame.bitmap = await createImageBitmap(image);
+        }
+        else {
+            let code = 0, size = minCodeSize + 1, pos = 0, pixelPos = -4;
+            const dic = [[0]];
+            for (;;) {
+                const last = code;
+                code = readBits(imageData, pos, size);
+                pos += size;
+                if (code === clearCode) {
+                    size = minCodeSize + 1;
+                    dic.length = clearCode + 2;
+                    for (let i = 0; i < dic.length; i++) {
+                        dic[i] = i < clearCode ? [i] : [];
+                    }
+                }
+                else {
+                    if (code === clearCode + 1) {
+                        break;
+                    }
+                    if (code >= dic.length) {
+                        dic.push(dic[last].concat(dic[last][0]));
+                    }
+                    else if (last !== clearCode) {
+                        dic.push(dic[last].concat(dic[code][0]));
+                    }
+                    for (const item of dic[code]) {
+                        const { r, g, b, a } = getColor(item);
+                        pixelPos += 4;
+                        image.data.set([r, g, b, a], pixelPos);
+                    }
+                    if (dic.length >= 1 << size && size < 0xc) {
+                        size++;
+                    }
+                }
+            }
+            frame.image = image;
+            frame.bitmap = await createImageBitmap(image);
+        }
+    }
+    async function parseBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings, progressCallback) {
+        switch (byteStream.nextByte()) {
+            case GIFDataHeaders.EndOfFile:
+                return true;
+            case GIFDataHeaders.Image:
+                await parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings);
+                break;
+            case GIFDataHeaders.Extension:
+                parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex);
+                break;
+            default:
+                throw new EvalError("undefined block found");
+        }
+        return false;
+    }
+    function getGIFLoopAmount(gif) {
+        for (const extension of gif.applicationExtensions) {
+            if (extension.identifier + extension.authenticationCode !== "NETSCAPE2.0") {
+                continue;
+            }
+            return extension.data[1] + (extension.data[2] << 8);
+        }
+        return Number.NaN;
+    }
+    async function decodeGIF(gifURL, canvasSettings, progressCallback, avgAlpha) {
+        avgAlpha ??= false;
+        const res = await fetch(gifURL);
+        if (!res.ok && res.status === 404) {
+            throw new EvalError("file not found");
+        }
+        const buffer = await res.arrayBuffer(), gif = {
+            width: 0,
+            height: 0,
+            totalTime: 0,
+            colorRes: 0,
+            pixelAspectRatio: 0,
+            frames: [],
+            sortFlag: false,
+            globalColorTable: [],
+            backgroundImage: new ImageData(1, 1, canvasSettings),
+            comments: [],
+            applicationExtensions: [],
+        }, byteStream = new ByteStream(new Uint8ClampedArray(buffer));
+        if (byteStream.getString(6) !== "GIF89a") {
+            throw new Error("not a supported GIF file");
+        }
+        gif.width = byteStream.nextTwoBytes();
+        gif.height = byteStream.nextTwoBytes();
+        const packedByte = byteStream.nextByte(), globalColorTableFlag = (packedByte & 0x80) === 0x80;
+        gif.colorRes = (packedByte & 0x70) >>> 4;
+        gif.sortFlag = (packedByte & 8) === 8;
+        const globalColorCount = 1 << ((packedByte & 7) + 1), backgroundColorIndex = byteStream.nextByte();
+        gif.pixelAspectRatio = byteStream.nextByte();
+        if (gif.pixelAspectRatio !== 0) {
+            gif.pixelAspectRatio = (gif.pixelAspectRatio + 0xf) / 0x40;
+        }
+        if (globalColorTableFlag) {
+            gif.globalColorTable = parseColorTable(byteStream, globalColorCount);
+        }
+        const backgroundImage = (() => {
+            try {
+                return new ImageData(gif.width, gif.height, canvasSettings);
+            }
+            catch (error) {
+                if (error instanceof DOMException && error.name === "IndexSizeError") {
+                    return null;
+                }
+                throw error;
+            }
+        })();
+        if (backgroundImage == null) {
+            throw new Error("GIF frame size is to large");
+        }
+        const { r, g, b } = gif.globalColorTable[backgroundColorIndex];
+        backgroundImage.data.set(globalColorTableFlag ? [r, g, b, 255] : [0, 0, 0, 0]);
+        for (let i = 4; i < backgroundImage.data.length; i *= 2) {
+            backgroundImage.data.copyWithin(i, 0, i);
+        }
+        gif.backgroundImage = backgroundImage;
+        let frameIndex = -1, incrementFrameIndex = true, transparencyIndex = -1;
+        const getframeIndex = (increment) => {
+            if (increment) {
+                incrementFrameIndex = true;
+            }
+            return frameIndex;
+        }, getTransparencyIndex = (newValue) => {
+            if (newValue != null) {
+                transparencyIndex = newValue;
+            }
+            return transparencyIndex;
+        };
+        try {
+            do {
+                if (incrementFrameIndex) {
+                    gif.frames.push({
+                        left: 0,
+                        top: 0,
+                        width: 0,
+                        height: 0,
+                        disposalMethod: DisposalMethod.Replace,
+                        image: new ImageData(1, 1, canvasSettings),
+                        plainTextData: null,
+                        userInputDelayFlag: false,
+                        delayTime: 0,
+                        sortFlag: false,
+                        localColorTable: [],
+                        reserved: 0,
+                        GCreserved: 0,
+                    });
+                    frameIndex++;
+                    transparencyIndex = -1;
+                    incrementFrameIndex = false;
+                }
+            } while (!(await parseBlock(byteStream, gif, avgAlpha, getframeIndex, getTransparencyIndex, canvasSettings, progressCallback)));
+            gif.frames.length--;
+            for (const frame of gif.frames) {
+                if (frame.userInputDelayFlag && frame.delayTime === 0) {
+                    gif.totalTime = Infinity;
+                    break;
+                }
+                gif.totalTime += frame.delayTime;
+            }
+            return gif;
+        }
+        catch (error) {
+            if (error instanceof EvalError) {
+                throw new Error(`error while parsing frame ${frameIndex.toString()} "${error.message}"`, { cause: error });
+            }
+            throw error;
+        }
+    }
+    function drawGif(data, canvasSettings) {
+        const { context, radius, particle, delta } = data, image = particle.image;
+        if (!image?.gifData || !image.gif) {
+            return;
+        }
+        const offscreenCanvas = new OffscreenCanvas(image.gifData.width, image.gifData.height), offscreenContext = offscreenCanvas.getContext("2d", canvasSettings);
+        if (!offscreenContext) {
+            throw new Error("could not create offscreen canvas context");
+        }
+        offscreenContext.imageSmoothingQuality = "low";
+        offscreenContext.imageSmoothingEnabled = false;
+        offscreenContext.clearRect(engine.originPoint.x, engine.originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
+        particle.gifLoopCount ??= image.gifLoopCount ?? defaultLoopCount;
+        let frameIndex = particle.gifFrame ?? defaultFrame;
+        const pos = { x: -image.gifData.width * engine.half, y: -image.gifData.height * engine.half }, frame = image.gifData.frames[frameIndex];
+        particle.gifTime ??= initialTime;
+        if (!frame.bitmap) {
+            return;
+        }
+        context.scale(radius / image.gifData.width, radius / image.gifData.height);
+        switch (frame.disposalMethod) {
+            case DisposalMethod.UndefinedA:
+            case DisposalMethod.UndefinedB:
+            case DisposalMethod.UndefinedC:
+            case DisposalMethod.UndefinedD:
+            case DisposalMethod.Replace:
+                offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
+                context.drawImage(offscreenCanvas, pos.x, pos.y);
+                offscreenContext.clearRect(engine.originPoint.x, engine.originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
+                break;
+            case DisposalMethod.Combine:
+                offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
+                context.drawImage(offscreenCanvas, pos.x, pos.y);
+                break;
+            case DisposalMethod.RestoreBackground:
+                offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
+                context.drawImage(offscreenCanvas, pos.x, pos.y);
+                offscreenContext.clearRect(engine.originPoint.x, engine.originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
+                if (!image.gifData.globalColorTable.length) {
+                    offscreenContext.putImageData(image.gifData.frames[firstIndex].image, pos.x + frame.left, pos.y + frame.top);
+                }
+                else {
+                    offscreenContext.putImageData(image.gifData.backgroundImage, pos.x, pos.y);
+                }
+                break;
+            case DisposalMethod.RestorePrevious:
+                {
+                    const previousImageData = offscreenContext.getImageData(engine.originPoint.x, engine.originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
+                    offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
+                    context.drawImage(offscreenCanvas, pos.x, pos.y);
+                    offscreenContext.clearRect(engine.originPoint.x, engine.originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
+                    offscreenContext.putImageData(previousImageData, engine.originPoint.x, engine.originPoint.y);
+                }
+                break;
+        }
+        particle.gifTime += delta.value;
+        if (particle.gifTime > frame.delayTime) {
+            particle.gifTime -= frame.delayTime;
+            if (++frameIndex >= image.gifData.frames.length) {
+                if (--particle.gifLoopCount <= defaultLoopCount) {
+                    return;
+                }
+                frameIndex = firstIndex;
+                offscreenContext.clearRect(engine.originPoint.x, engine.originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
+            }
+            particle.gifFrame = frameIndex;
+        }
+        context.scale(image.gifData.width / radius, image.gifData.height / radius);
+    }
+    async function loadGifImage(image, canvasSettings) {
+        if (image.type !== "gif") {
+            await loadImage(image);
+            return;
+        }
+        image.loading = true;
+        try {
+            image.gifData = await decodeGIF(image.source, canvasSettings);
+            image.gifLoopCount = getGIFLoopAmount(image.gifData);
+            if (!image.gifLoopCount) {
+                image.gifLoopCount = Infinity;
+            }
+        }
+        catch {
+            image.error = true;
+        }
+        image.loading = false;
+    }
 
-/***/ "./dist/browser/index.js"
-/*!*******************************!*\
-  !*** ./dist/browser/index.js ***!
-  \*******************************/
-(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+    const sides = 12;
+    class ImageDrawer {
+        _container;
+        _engine;
+        constructor(engine, container) {
+            this._engine = engine;
+            this._container = container;
+        }
+        draw(data) {
+            const { context, radius, particle, opacity } = data, image = particle.image, element = image?.element;
+            if (!image) {
+                return;
+            }
+            context.globalAlpha = opacity;
+            if (image.gif && image.gifData) {
+                drawGif(data, this._container.canvas.render.settings);
+            }
+            else if (element) {
+                const ratio = image.ratio, pos = {
+                    x: -radius,
+                    y: -radius,
+                }, diameter = radius * engine.double;
+                context.drawImage(element, pos.x, pos.y, diameter, diameter / ratio);
+            }
+            context.globalAlpha = engine.defaultAlpha;
+        }
+        getSidesCount() {
+            return sides;
+        }
+        async init(container) {
+            const options = container.actualOptions;
+            if (!options.preload || !this._engine.loadImage) {
+                return;
+            }
+            const promises = [];
+            for (const imageData of options.preload) {
+                promises.push(this._engine.loadImage(container, imageData));
+            }
+            await Promise.all(promises);
+        }
+        loadShape(particle) {
+            const { _container: container } = this;
+            if (!particle.shape || !shapeTypes.includes(particle.shape)) {
+                return;
+            }
+            const imageData = particle.shapeData;
+            if (!imageData) {
+                return;
+            }
+            const images = this._engine.getImages?.(container), image = images?.find((t) => t.name === imageData.name || t.source === imageData.src);
+            if (image) {
+                return;
+            }
+            void this.loadImageShape(container, imageData).then(() => {
+                this.loadShape(particle);
+            });
+        }
+        particleInit(container, particle) {
+            if (particle.shape !== "image" && particle.shape !== "images") {
+                return;
+            }
+            const images = this._engine.getImages?.(container), imageData = particle.shapeData;
+            if (!imageData) {
+                return;
+            }
+            const color = particle.getFillColor(), image = images?.find((t) => t.name === imageData.name || t.source === imageData.src);
+            if (!image) {
+                return;
+            }
+            const replaceColor = imageData.replaceColor;
+            if (image.loading) {
+                setTimeout(() => {
+                    this.particleInit(container, particle);
+                });
+                return;
+            }
+            void (async () => {
+                let imageRes;
+                if (image.svgData && color) {
+                    imageRes = await replaceImageColor(image, imageData, color, particle, container.hdr);
+                }
+                else {
+                    imageRes = {
+                        color,
+                        data: image,
+                        element: image.element,
+                        gif: image.gif,
+                        gifData: image.gifData,
+                        gifLoopCount: image.gifLoopCount,
+                        loaded: true,
+                        ratio: imageData.width && imageData.height ? imageData.width / imageData.height : (image.ratio ?? engine.defaultRatio),
+                        replaceColor: replaceColor,
+                        source: imageData.src,
+                    };
+                }
+                if (!imageRes.ratio) {
+                    imageRes.ratio = 1;
+                }
+                const close = imageData.close ?? particle.shapeClose, imageShape = {
+                    image: imageRes,
+                    close,
+                };
+                particle.image = imageShape.image;
+                particle.shapeClose = imageShape.close;
+            })();
+        }
+        loadImageShape = async (container, imageShape) => {
+            if (!this._engine.loadImage) {
+                throw new Error(`Image shape not initialized`);
+            }
+            await this._engine.loadImage(container, {
+                gif: imageShape.gif,
+                name: imageShape.name,
+                replaceColor: imageShape.replaceColor,
+                src: imageShape.src,
+            });
+        };
+    }
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   loadImageShape: () => (/* binding */ loadImageShape)\n/* harmony export */ });\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n\nconst extLength = 3;\nfunction addLoadImageToEngine(engine) {\n    engine.getImages ??= (container)=>{\n        engine.images ??= new Map();\n        let images = engine.images.get(container);\n        if (!images) {\n            images = [];\n            engine.images.set(container, images);\n        }\n        return images;\n    };\n    engine.loadImage ??= async (container, data)=>{\n        if (!engine.getImages) {\n            throw new Error(\"No images collection found\");\n        }\n        if (!data.name && !data.src) {\n            throw new Error(\"No image source provided\");\n        }\n        engine.images ??= new Map();\n        const containerImages = engine.getImages(container);\n        if (containerImages.some((t)=>t.name === data.name || t.source === data.src)) {\n            return;\n        }\n        try {\n            const image = {\n                gif: data.gif,\n                name: data.name ?? data.src,\n                source: data.src,\n                type: data.src.substring(data.src.length - extLength),\n                error: false,\n                loading: true,\n                replaceColor: data.replaceColor,\n                ratio: data.width && data.height ? data.width / data.height : undefined\n            };\n            containerImages.push(image);\n            engine.images.set(container, containerImages);\n            let imageFunc;\n            if (data.gif) {\n                const { loadGifImage } = await __webpack_require__.e(/*! import() */ \"dist_browser_GifUtils_Utils_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./GifUtils/Utils.js */ \"./dist/browser/GifUtils/Utils.js\"));\n                imageFunc = (img)=>loadGifImage(img, {\n                        colorSpace: \"srgb\"\n                    });\n            } else if (data.replaceColor) {\n                const { downloadSvgImage } = await Promise.resolve(/*! import() */).then(__webpack_require__.bind(__webpack_require__, /*! ./Utils.js */ \"./dist/browser/Utils.js\"));\n                imageFunc = downloadSvgImage;\n            } else {\n                const { loadImage } = await Promise.resolve(/*! import() */).then(__webpack_require__.bind(__webpack_require__, /*! ./Utils.js */ \"./dist/browser/Utils.js\"));\n                imageFunc = loadImage;\n            }\n            await imageFunc(image);\n        } catch  {\n            throw new Error(`${data.name ?? data.src} not found`);\n        }\n    };\n}\nasync function loadImageShape(engine) {\n    engine.checkVersion(\"4.0.0-beta.8\");\n    await engine.pluginManager.register(async (e)=>{\n        const { ImagePreloaderPlugin } = await __webpack_require__.e(/*! import() */ \"dist_browser_ImagePreloader_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./ImagePreloader.js */ \"./dist/browser/ImagePreloader.js\"));\n        addLoadImageToEngine(e);\n        e.pluginManager.addPlugin(new ImagePreloaderPlugin(e));\n        e.pluginManager.addShape(_Utils_js__WEBPACK_IMPORTED_MODULE_0__.shapeTypes, async (container)=>{\n            const { ImageDrawer } = await Promise.all(/*! import() */[__webpack_require__.e(\"dist_browser_GifUtils_Utils_js\"), __webpack_require__.e(\"dist_browser_ImageDrawer_js\")]).then(__webpack_require__.bind(__webpack_require__, /*! ./ImageDrawer.js */ \"./dist/browser/ImageDrawer.js\"));\n            return new ImageDrawer(e, container);\n        });\n    });\n}\n\n\n//# sourceURL=webpack://@tsparticles/shape-image/./dist/browser/index.js?\n}");
+    class Preload {
+        gif;
+        height;
+        name;
+        replaceColor;
+        src;
+        width;
+        constructor() {
+            this.src = "";
+            this.gif = false;
+        }
+        load(data) {
+            if (engine.isNull(data)) {
+                return;
+            }
+            if (data.gif !== undefined) {
+                this.gif = data.gif;
+            }
+            if (data.height !== undefined) {
+                this.height = data.height;
+            }
+            if (data.name !== undefined) {
+                this.name = data.name;
+            }
+            if (data.replaceColor !== undefined) {
+                this.replaceColor = data.replaceColor;
+            }
+            if (data.src !== undefined) {
+                this.src = data.src;
+            }
+            if (data.width !== undefined) {
+                this.width = data.width;
+            }
+        }
+    }
 
-/***/ }
+    class ImagePreloaderPlugin {
+        id = "image-preloader";
+        _engine;
+        constructor(engine) {
+            this._engine = engine;
+        }
+        async getPlugin(container) {
+            const { ImagePreloaderInstance } = await Promise.resolve().then(function () { return ImagePreloaderInstance$1; });
+            return new ImagePreloaderInstance(this._engine, container);
+        }
+        loadOptions(_container, options, source) {
+            if (!source?.preload) {
+                return;
+            }
+            options.preload ??= [];
+            const preloadOptions = options.preload;
+            for (const item of source.preload) {
+                const existing = preloadOptions.find(t => t.name === item.name || t.src === item.src);
+                if (existing) {
+                    existing.load(item);
+                }
+                else {
+                    const preload = new Preload();
+                    preload.load(item);
+                    preloadOptions.push(preload);
+                }
+            }
+        }
+        needsPlugin() {
+            return true;
+        }
+    }
 
-/******/ 	});
-/************************************************************************/
-/******/ 	// The module cache
-/******/ 	var __webpack_module_cache__ = {};
-/******/ 	
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
-/******/ 		// Check if module is in cache
-/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
-/******/ 		if (cachedModule !== undefined) {
-/******/ 			return cachedModule.exports;
-/******/ 		}
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = __webpack_module_cache__[moduleId] = {
-/******/ 			// no module.id needed
-/******/ 			// no module.loaded needed
-/******/ 			exports: {}
-/******/ 		};
-/******/ 	
-/******/ 		// Execute the module function
-/******/ 		if (!(moduleId in __webpack_modules__)) {
-/******/ 			delete __webpack_module_cache__[moduleId];
-/******/ 			var e = new Error("Cannot find module '" + moduleId + "'");
-/******/ 			e.code = 'MODULE_NOT_FOUND';
-/******/ 			throw e;
-/******/ 		}
-/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
-/******/ 	
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
-/******/ 	
-/******/ 	// expose the modules object (__webpack_modules__)
-/******/ 	__webpack_require__.m = __webpack_modules__;
-/******/ 	
-/************************************************************************/
-/******/ 	/* webpack/runtime/define property getters */
-/******/ 	(() => {
-/******/ 		// define getter functions for harmony exports
-/******/ 		__webpack_require__.d = (exports, definition) => {
-/******/ 			for(var key in definition) {
-/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
-/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
-/******/ 				}
-/******/ 			}
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/ensure chunk */
-/******/ 	(() => {
-/******/ 		__webpack_require__.f = {};
-/******/ 		// This file contains only the entry chunk.
-/******/ 		// The chunk loading function for additional chunks
-/******/ 		__webpack_require__.e = (chunkId) => {
-/******/ 			return Promise.all(Object.keys(__webpack_require__.f).reduce((promises, key) => {
-/******/ 				__webpack_require__.f[key](chunkId, promises);
-/******/ 				return promises;
-/******/ 			}, []));
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/get javascript chunk filename */
-/******/ 	(() => {
-/******/ 		// This function allow to reference async chunks
-/******/ 		__webpack_require__.u = (chunkId) => {
-/******/ 			// return url for filenames based on template
-/******/ 			return "" + chunkId + ".js";
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/global */
-/******/ 	(() => {
-/******/ 		__webpack_require__.g = (function() {
-/******/ 			if (typeof globalThis === 'object') return globalThis;
-/******/ 			try {
-/******/ 				return this || new Function('return this')();
-/******/ 			} catch (e) {
-/******/ 				if (typeof window === 'object') return window;
-/******/ 			}
-/******/ 		})();
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
-/******/ 	(() => {
-/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/load script */
-/******/ 	(() => {
-/******/ 		var inProgress = {};
-/******/ 		var dataWebpackPrefix = "@tsparticles/shape-image:";
-/******/ 		// loadScript function to load a script via script tag
-/******/ 		__webpack_require__.l = (url, done, key, chunkId) => {
-/******/ 			if(inProgress[url]) { inProgress[url].push(done); return; }
-/******/ 			var script, needAttach;
-/******/ 			if(key !== undefined) {
-/******/ 				var scripts = document.getElementsByTagName("script");
-/******/ 				for(var i = 0; i < scripts.length; i++) {
-/******/ 					var s = scripts[i];
-/******/ 					if(s.getAttribute("src") == url || s.getAttribute("data-webpack") == dataWebpackPrefix + key) { script = s; break; }
-/******/ 				}
-/******/ 			}
-/******/ 			if(!script) {
-/******/ 				needAttach = true;
-/******/ 				script = document.createElement('script');
-/******/ 		
-/******/ 				script.charset = 'utf-8';
-/******/ 				if (__webpack_require__.nc) {
-/******/ 					script.setAttribute("nonce", __webpack_require__.nc);
-/******/ 				}
-/******/ 				script.setAttribute("data-webpack", dataWebpackPrefix + key);
-/******/ 		
-/******/ 				script.src = url;
-/******/ 			}
-/******/ 			inProgress[url] = [done];
-/******/ 			var onScriptComplete = (prev, event) => {
-/******/ 				// avoid mem leaks in IE.
-/******/ 				script.onerror = script.onload = null;
-/******/ 				clearTimeout(timeout);
-/******/ 				var doneFns = inProgress[url];
-/******/ 				delete inProgress[url];
-/******/ 				script.parentNode && script.parentNode.removeChild(script);
-/******/ 				doneFns && doneFns.forEach((fn) => (fn(event)));
-/******/ 				if(prev) return prev(event);
-/******/ 			}
-/******/ 			var timeout = setTimeout(onScriptComplete.bind(null, undefined, { type: 'timeout', target: script }), 120000);
-/******/ 			script.onerror = onScriptComplete.bind(null, script.onerror);
-/******/ 			script.onload = onScriptComplete.bind(null, script.onload);
-/******/ 			needAttach && document.head.appendChild(script);
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/make namespace object */
-/******/ 	(() => {
-/******/ 		// define __esModule on exports
-/******/ 		__webpack_require__.r = (exports) => {
-/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 			}
-/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/publicPath */
-/******/ 	(() => {
-/******/ 		var scriptUrl;
-/******/ 		if (__webpack_require__.g.importScripts) scriptUrl = __webpack_require__.g.location + "";
-/******/ 		var document = __webpack_require__.g.document;
-/******/ 		if (!scriptUrl && document) {
-/******/ 			if (document.currentScript && document.currentScript.tagName.toUpperCase() === 'SCRIPT')
-/******/ 				scriptUrl = document.currentScript.src;
-/******/ 			if (!scriptUrl) {
-/******/ 				var scripts = document.getElementsByTagName("script");
-/******/ 				if(scripts.length) {
-/******/ 					var i = scripts.length - 1;
-/******/ 					while (i > -1 && (!scriptUrl || !/^http(s?):/.test(scriptUrl))) scriptUrl = scripts[i--].src;
-/******/ 				}
-/******/ 			}
-/******/ 		}
-/******/ 		// When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration
-/******/ 		// or pass an empty string ("") and set the __webpack_public_path__ variable from your code to use your own logic.
-/******/ 		if (!scriptUrl) throw new Error("Automatic publicPath is not supported in this browser");
-/******/ 		scriptUrl = scriptUrl.replace(/^blob:/, "").replace(/#.*$/, "").replace(/\?.*$/, "").replace(/\/[^\/]+$/, "/");
-/******/ 		__webpack_require__.p = scriptUrl;
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/jsonp chunk loading */
-/******/ 	(() => {
-/******/ 		// no baseURI
-/******/ 		
-/******/ 		// object to store loaded and loading chunks
-/******/ 		// undefined = chunk not loaded, null = chunk preloaded/prefetched
-/******/ 		// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
-/******/ 		var installedChunks = {
-/******/ 			"tsparticles.shape.image": 0
-/******/ 		};
-/******/ 		
-/******/ 		__webpack_require__.f.j = (chunkId, promises) => {
-/******/ 				// JSONP chunk loading for javascript
-/******/ 				var installedChunkData = __webpack_require__.o(installedChunks, chunkId) ? installedChunks[chunkId] : undefined;
-/******/ 				if(installedChunkData !== 0) { // 0 means "already installed".
-/******/ 		
-/******/ 					// a Promise means "currently loading".
-/******/ 					if(installedChunkData) {
-/******/ 						promises.push(installedChunkData[2]);
-/******/ 					} else {
-/******/ 						if(true) { // all chunks have JS
-/******/ 							// setup Promise in chunk cache
-/******/ 							var promise = new Promise((resolve, reject) => (installedChunkData = installedChunks[chunkId] = [resolve, reject]));
-/******/ 							promises.push(installedChunkData[2] = promise);
-/******/ 		
-/******/ 							// start chunk loading
-/******/ 							var url = __webpack_require__.p + __webpack_require__.u(chunkId);
-/******/ 							// create error before stack unwound to get useful stacktrace later
-/******/ 							var error = new Error();
-/******/ 							var loadingEnded = (event) => {
-/******/ 								if(__webpack_require__.o(installedChunks, chunkId)) {
-/******/ 									installedChunkData = installedChunks[chunkId];
-/******/ 									if(installedChunkData !== 0) installedChunks[chunkId] = undefined;
-/******/ 									if(installedChunkData) {
-/******/ 										var errorType = event && (event.type === 'load' ? 'missing' : event.type);
-/******/ 										var realSrc = event && event.target && event.target.src;
-/******/ 										error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')';
-/******/ 										error.name = 'ChunkLoadError';
-/******/ 										error.type = errorType;
-/******/ 										error.request = realSrc;
-/******/ 										installedChunkData[1](error);
-/******/ 									}
-/******/ 								}
-/******/ 							};
-/******/ 							__webpack_require__.l(url, loadingEnded, "chunk-" + chunkId, chunkId);
-/******/ 						}
-/******/ 					}
-/******/ 				}
-/******/ 		};
-/******/ 		
-/******/ 		// no prefetching
-/******/ 		
-/******/ 		// no preloaded
-/******/ 		
-/******/ 		// no HMR
-/******/ 		
-/******/ 		// no HMR manifest
-/******/ 		
-/******/ 		// no on chunks loaded
-/******/ 		
-/******/ 		// install a JSONP callback for chunk loading
-/******/ 		var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
-/******/ 			var [chunkIds, moreModules, runtime] = data;
-/******/ 			// add "moreModules" to the modules object,
-/******/ 			// then flag all "chunkIds" as loaded and fire callback
-/******/ 			var moduleId, chunkId, i = 0;
-/******/ 			if(chunkIds.some((id) => (installedChunks[id] !== 0))) {
-/******/ 				for(moduleId in moreModules) {
-/******/ 					if(__webpack_require__.o(moreModules, moduleId)) {
-/******/ 						__webpack_require__.m[moduleId] = moreModules[moduleId];
-/******/ 					}
-/******/ 				}
-/******/ 				if(runtime) var result = runtime(__webpack_require__);
-/******/ 			}
-/******/ 			if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
-/******/ 			for(;i < chunkIds.length; i++) {
-/******/ 				chunkId = chunkIds[i];
-/******/ 				if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
-/******/ 					installedChunks[chunkId][0]();
-/******/ 				}
-/******/ 				installedChunks[chunkId] = 0;
-/******/ 			}
-/******/ 		
-/******/ 		}
-/******/ 		
-/******/ 		var chunkLoadingGlobal = this["webpackChunk_tsparticles_shape_image"] = this["webpackChunk_tsparticles_shape_image"] || [];
-/******/ 		chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
-/******/ 		chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
-/******/ 	})();
-/******/ 	
-/************************************************************************/
-/******/ 	
-/******/ 	// startup
-/******/ 	// Load entry module and return exports
-/******/ 	// This entry module can't be inlined because the eval devtool is used.
-/******/ 	var __webpack_exports__ = __webpack_require__("./dist/browser/index.js");
-/******/ 	
-/******/ 	return __webpack_exports__;
-/******/ })()
-;
-});
+    const extLength = 3;
+    function addLoadImageToEngine(engine) {
+        engine.getImages ??= (container) => {
+            engine.images ??= new Map();
+            let images = engine.images.get(container);
+            if (!images) {
+                images = [];
+                engine.images.set(container, images);
+            }
+            return images;
+        };
+        engine.loadImage ??= async (container, data) => {
+            if (!engine.getImages) {
+                throw new Error("No images collection found");
+            }
+            if (!data.name && !data.src) {
+                throw new Error("No image source provided");
+            }
+            engine.images ??= new Map();
+            const containerImages = engine.getImages(container);
+            if (containerImages.some((t) => t.name === data.name || t.source === data.src)) {
+                return;
+            }
+            try {
+                const image = {
+                    gif: data.gif,
+                    name: data.name ?? data.src,
+                    source: data.src,
+                    type: data.src.substring(data.src.length - extLength),
+                    error: false,
+                    loading: true,
+                    replaceColor: data.replaceColor,
+                    ratio: data.width && data.height ? data.width / data.height : undefined,
+                };
+                containerImages.push(image);
+                engine.images.set(container, containerImages);
+                let imageFunc;
+                if (data.gif) {
+                    imageFunc = (img) => loadGifImage(img, { colorSpace: "srgb" });
+                }
+                else if (data.replaceColor) {
+                    imageFunc = downloadSvgImage;
+                }
+                else {
+                    imageFunc = loadImage;
+                }
+                await imageFunc(image);
+            }
+            catch {
+                throw new Error(`${data.name ?? data.src} not found`);
+            }
+        };
+    }
+    async function loadImageShape(engine) {
+        engine.checkVersion("4.0.0");
+        await engine.pluginManager.register(e => {
+            addLoadImageToEngine(e);
+            e.pluginManager.addPlugin(new ImagePreloaderPlugin(e));
+            e.pluginManager.addShape(shapeTypes, container => Promise.resolve(new ImageDrawer(e, container)));
+        });
+    }
+
+    const globalObject = globalThis;
+    globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
+    globalObject.loadImageShape = loadImageShape;
+
+    class ImagePreloaderInstance {
+        _container;
+        _engine;
+        constructor(engine, container) {
+            this._engine = engine;
+            this._container = container;
+        }
+        destroy() {
+            this._engine.images?.delete(this._container);
+        }
+    }
+
+    var ImagePreloaderInstance$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        ImagePreloaderInstance: ImagePreloaderInstance
+    });
+
+    exports.loadImageShape = loadImageShape;
+
+}));
+Object.assign(globalThis.window || globalThis, { loadImageShape: (globalThis.__tsParticlesInternals.shapes.image || {}).loadImageShape });
+delete (globalThis.window || globalThis).tsparticlesInternalExports;