@tsparticles/shape-image 3.0.0-alpha.0

package/tsparticles.shape.image.js

@@ -0,0 +1,330 @@
+/*!
+ * 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
+ * v3.0.0-alpha.0
+ */
+(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__533__) => {
+return /******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	var __webpack_modules__ = ({
+
+/***/ 533:
+/***/ ((module) => {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__533__;
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// 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
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* 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/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/******/ 	/* 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 });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+(() => {
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "loadImageShape": () => (/* binding */ loadImageShape)
+});
+
+// EXTERNAL MODULE: external {"commonjs":"@tsparticles/engine","commonjs2":"@tsparticles/engine","amd":"@tsparticles/engine","root":"window"}
+var engine_root_window_ = __webpack_require__(533);
+;// CONCATENATED MODULE: ./dist/browser/Utils.js
+
+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) {
+  const {
+    svgData
+  } = imageShape;
+  if (!svgData) {
+    return "";
+  }
+  const colorStyle = (0,engine_root_window_.getStyleFromHsl)(color, opacity);
+  if (svgData.includes("fill")) {
+    return svgData.replace(currentColorRegex, () => colorStyle);
+  }
+  const preFillIndex = svgData.indexOf(">");
+  return `${svgData.substring(0, 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;
+      console.error(`Error tsParticles - 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) {
+    console.error("Error tsParticles - Image not found");
+    image.error = true;
+  }
+  if (!image.error) {
+    image.svgData = await response.text();
+  }
+  image.loading = false;
+}
+function replaceImageColor(image, imageData, color, particle) {
+  var _a, _b, _c;
+  const svgColoredData = replaceColorSvg(image, color, (_b = (_a = particle.opacity) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 1),
+    imageRes = {
+      color,
+      data: Object.assign(Object.assign({}, image), {
+        svgData: svgColoredData
+      }),
+      loaded: false,
+      ratio: imageData.width / imageData.height,
+      replaceColor: (_c = imageData.replaceColor) !== null && _c !== void 0 ? _c : imageData.replace_color,
+      source: imageData.src
+    };
+  return new Promise(resolve => {
+    const svg = new Blob([svgColoredData], {
+        type: "image/svg+xml"
+      }),
+      domUrl = URL || window.URL || window.webkitURL || window,
+      url = domUrl.createObjectURL(svg),
+      img = new Image();
+    img.addEventListener("load", () => {
+      imageRes.loaded = true;
+      imageRes.element = img;
+      resolve(imageRes);
+      domUrl.revokeObjectURL(url);
+    });
+    img.addEventListener("error", async () => {
+      domUrl.revokeObjectURL(url);
+      const img2 = Object.assign(Object.assign({}, image), {
+        error: false,
+        loading: true
+      });
+      await loadImage(img2);
+      imageRes.loaded = true;
+      imageRes.element = img2.element;
+      resolve(imageRes);
+    });
+    img.src = url;
+  });
+}
+;// CONCATENATED MODULE: ./dist/browser/ImageDrawer.js
+
+class ImageDrawer {
+  constructor() {
+    this._images = [];
+  }
+  addImage(container, image) {
+    const containerImages = this.getImages(container);
+    containerImages === null || containerImages === void 0 ? void 0 : containerImages.images.push(image);
+  }
+  destroy() {
+    this._images = [];
+  }
+  draw(context, particle, radius, opacity) {
+    var _a;
+    const image = particle.image,
+      element = image === null || image === void 0 ? void 0 : image.element;
+    if (!element) {
+      return;
+    }
+    const ratio = (_a = image === null || image === void 0 ? void 0 : image.ratio) !== null && _a !== void 0 ? _a : 1,
+      pos = {
+        x: -radius,
+        y: -radius
+      };
+    context.globalAlpha = opacity;
+    context.drawImage(element, pos.x, pos.y, radius * 2, radius * 2 / ratio);
+    context.globalAlpha = 1;
+  }
+  getImages(container) {
+    const containerImages = this._images.find(t => t.id === container.id);
+    if (!containerImages) {
+      this._images.push({
+        id: container.id,
+        images: []
+      });
+      return this.getImages(container);
+    } else {
+      return containerImages;
+    }
+  }
+  getSidesCount() {
+    return 12;
+  }
+  loadShape(particle) {
+    if (particle.shape !== "image" && particle.shape !== "images") {
+      return;
+    }
+    const container = particle.container,
+      images = this.getImages(container).images,
+      imageData = particle.shapeData,
+      image = images.find(t => t.source === imageData.src);
+    if (!image) {
+      this.loadImageShape(container, imageData).then(() => {
+        this.loadShape(particle);
+      });
+    }
+  }
+  particleInit(container, particle) {
+    var _a;
+    if (particle.shape !== "image" && particle.shape !== "images") {
+      return;
+    }
+    const images = this.getImages(container).images,
+      imageData = particle.shapeData,
+      color = particle.getFillColor(),
+      replaceColor = (_a = imageData.replaceColor) !== null && _a !== void 0 ? _a : imageData.replace_color,
+      image = images.find(t => t.source === imageData.src);
+    if (!image) {
+      return;
+    }
+    if (image.loading) {
+      setTimeout(() => {
+        this.particleInit(container, particle);
+      });
+      return;
+    }
+    (async () => {
+      var _a, _b;
+      let imageRes;
+      if (image.svgData && color) {
+        imageRes = await replaceImageColor(image, imageData, color, particle);
+      } else {
+        imageRes = {
+          color,
+          data: image,
+          element: image.element,
+          loaded: true,
+          ratio: imageData.width / imageData.height,
+          replaceColor: replaceColor,
+          source: imageData.src
+        };
+      }
+      if (!imageRes.ratio) {
+        imageRes.ratio = 1;
+      }
+      const fill = (_a = imageData.fill) !== null && _a !== void 0 ? _a : particle.fill,
+        close = (_b = imageData.close) !== null && _b !== void 0 ? _b : particle.close,
+        imageShape = {
+          image: imageRes,
+          fill,
+          close
+        };
+      particle.image = imageShape.image;
+      particle.fill = imageShape.fill;
+      particle.close = imageShape.close;
+    })();
+  }
+  async loadImageShape(container, imageShape) {
+    var _a;
+    const source = imageShape.src;
+    if (!source) {
+      throw new Error("Error tsParticles - No image.src");
+    }
+    try {
+      const image = {
+        source: source,
+        type: source.substring(source.length - 3),
+        error: false,
+        loading: true
+      };
+      this.addImage(container, image);
+      const imageFunc = ((_a = imageShape.replaceColor) !== null && _a !== void 0 ? _a : imageShape.replace_color) ? downloadSvgImage : loadImage;
+      await imageFunc(image);
+    } catch (_b) {
+      throw new Error(`tsParticles error - ${imageShape.src} not found`);
+    }
+  }
+}
+;// CONCATENATED MODULE: ./dist/browser/index.js
+
+async function loadImageShape(engine) {
+  await engine.addShape(["image", "images"], new ImageDrawer());
+}
+})();
+
+/******/ 	return __webpack_exports__;
+/******/ })()
+;
+});

package/tsparticles.shape.image.min.js

@@ -0,0 +1,2 @@
+/*! For license information please see tsparticles.shape.image.min.js.LICENSE.txt */
+!function(e,r){if("object"==typeof exports&&"object"==typeof module)module.exports=r(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],r);else{var t="object"==typeof exports?r(require("@tsparticles/engine")):r(e.window);for(var o in t)("object"==typeof exports?exports:e)[o]=t[o]}}(this,(e=>(()=>{"use strict";var r={533:r=>{r.exports=e}},t={};function o(e){var a=t[e];if(void 0!==a)return a.exports;var i=t[e]={exports:{}};return r[e](i,i.exports,o),i.exports}o.d=(e,r)=>{for(var t in r)o.o(r,t)&&!o.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},o.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{o.r(a),o.d(a,{loadImageShape:()=>l});var e=o(533);const r=/(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;async function t(e){return new Promise((r=>{e.loading=!0;const t=new Image;e.element=t,t.addEventListener("load",(()=>{e.loading=!1,r()})),t.addEventListener("error",(()=>{e.element=void 0,e.error=!0,e.loading=!1,console.error(`Error tsParticles - loading image: ${e.source}`),r()})),t.src=e.source}))}async function i(e){if("svg"!==e.type)return void await t(e);e.loading=!0;const r=await fetch(e.source);r.ok||(console.error("Error tsParticles - Image not found"),e.error=!0),e.error||(e.svgData=await r.text()),e.loading=!1}function s(o,a,i,s){var n,l,c;const d=function(t,o,a){const{svgData:i}=t;if(!i)return"";const s=(0,e.getStyleFromHsl)(o,a);if(i.includes("fill"))return i.replace(r,(()=>s));const n=i.indexOf(">");return`${i.substring(0,n)} fill="${s}"${i.substring(n)}`}(o,i,null!==(l=null===(n=s.opacity)||void 0===n?void 0:n.value)&&void 0!==l?l:1),g={color:i,data:Object.assign(Object.assign({},o),{svgData:d}),loaded:!1,ratio:a.width/a.height,replaceColor:null!==(c=a.replaceColor)&&void 0!==c?c:a.replace_color,source:a.src};return new Promise((e=>{const r=new Blob([d],{type:"image/svg+xml"}),a=URL||window.URL||window.webkitURL||window,i=a.createObjectURL(r),s=new Image;s.addEventListener("load",(()=>{g.loaded=!0,g.element=s,e(g),a.revokeObjectURL(i)})),s.addEventListener("error",(async()=>{a.revokeObjectURL(i);const r=Object.assign(Object.assign({},o),{error:!1,loading:!0});await t(r),g.loaded=!0,g.element=r.element,e(g)})),s.src=i}))}class n{constructor(){this._images=[]}addImage(e,r){const t=this.getImages(e);null==t||t.images.push(r)}destroy(){this._images=[]}draw(e,r,t,o){var a;const i=r.image,s=null==i?void 0:i.element;if(!s)return;const n=null!==(a=null==i?void 0:i.ratio)&&void 0!==a?a:1,l={x:-t,y:-t};e.globalAlpha=o,e.drawImage(s,l.x,l.y,2*t,2*t/n),e.globalAlpha=1}getImages(e){const r=this._images.find((r=>r.id===e.id));return r||(this._images.push({id:e.id,images:[]}),this.getImages(e))}getSidesCount(){return 12}loadShape(e){if("image"!==e.shape&&"images"!==e.shape)return;const r=e.container,t=this.getImages(r).images,o=e.shapeData;t.find((e=>e.source===o.src))||this.loadImageShape(r,o).then((()=>{this.loadShape(e)}))}particleInit(e,r){var t;if("image"!==r.shape&&"images"!==r.shape)return;const o=this.getImages(e).images,a=r.shapeData,i=r.getFillColor(),n=null!==(t=a.replaceColor)&&void 0!==t?t:a.replace_color,l=o.find((e=>e.source===a.src));l&&(l.loading?setTimeout((()=>{this.particleInit(e,r)})):(async()=>{var e,t;let o;o=l.svgData&&i?await s(l,a,i,r):{color:i,data:l,element:l.element,loaded:!0,ratio:a.width/a.height,replaceColor:n,source:a.src},o.ratio||(o.ratio=1);const c={image:o,fill:null!==(e=a.fill)&&void 0!==e?e:r.fill,close:null!==(t=a.close)&&void 0!==t?t:r.close};r.image=c.image,r.fill=c.fill,r.close=c.close})())}async loadImageShape(e,r){var o;const a=r.src;if(!a)throw new Error("Error tsParticles - No image.src");try{const s={source:a,type:a.substring(a.length-3),error:!1,loading:!0};this.addImage(e,s);const n=(null!==(o=r.replaceColor)&&void 0!==o?o:r.replace_color)?i:t;await n(s)}catch(e){throw new Error(`tsParticles error - ${r.src} not found`)}}}async function l(e){await e.addShape(["image","images"],new n)}})(),a})()));

package/tsparticles.shape.image.min.js.LICENSE.txt

@@ -0,0 +1,8 @@
+/*!
+ * 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
+ * v3.0.0-alpha.0
+ */

package/types/IImageShape.d.ts

@@ -0,0 +1,8 @@
+import type { IShapeValues } from "@tsparticles/engine";
+export interface IImageShape extends IShapeValues {
+    height: number;
+    replaceColor: boolean;
+    replace_color: boolean;
+    src: string;
+    width: number;
+}

package/types/ImageDrawer.d.ts

@@ -0,0 +1,14 @@
+import type { Container, IShapeDrawer } from "@tsparticles/engine";
+import type { ContainerImage, IImage, ImageParticle } from "./Utils";
+export declare class ImageDrawer implements IShapeDrawer {
+    private _images;
+    constructor();
+    addImage(container: Container, image: IImage): void;
+    destroy(): void;
+    draw(context: CanvasRenderingContext2D, particle: ImageParticle, radius: number, opacity: number): void;
+    getImages(container: Container): ContainerImage;
+    getSidesCount(): number;
+    loadShape(particle: ImageParticle): void;
+    particleInit(container: Container, particle: ImageParticle): void;
+    private loadImageShape;
+}

package/types/Utils.d.ts

@@ -0,0 +1,30 @@
+import type { IHsl, Particle } from "@tsparticles/engine";
+import type { IImageShape } from "./IImageShape";
+export interface IImage {
+    color?: IHsl;
+    element?: HTMLImageElement;
+    error: boolean;
+    loading: boolean;
+    source: string;
+    svgData?: string;
+    type: string;
+}
+export interface IParticleImage {
+    color?: IHsl;
+    data: IImage;
+    element?: HTMLImageElement;
+    loaded?: boolean;
+    ratio: number;
+    replaceColor: boolean;
+    source: string;
+}
+export interface ContainerImage {
+    id: string;
+    images: IImage[];
+}
+export type ImageParticle = Particle & {
+    image?: IParticleImage;
+};
+export declare function loadImage(image: IImage): Promise<void>;
+export declare function downloadSvgImage(image: IImage): Promise<void>;
+export declare function replaceImageColor(image: IImage, imageData: IImageShape, color: IHsl, particle: Particle): Promise<IParticleImage>;

package/types/index.d.ts

@@ -0,0 +1,2 @@
+import type { Engine } from "@tsparticles/engine";
+export declare function loadImageShape(engine: Engine): Promise<void>;

package/umd/IImageShape.js

@@ -0,0 +1,12 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});

package/umd/ImageDrawer.js

@@ -0,0 +1,134 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "./Utils"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.ImageDrawer = void 0;
+    const Utils_1 = require("./Utils");
+    class ImageDrawer {
+        constructor() {
+            this._images = [];
+        }
+        addImage(container, image) {
+            const containerImages = this.getImages(container);
+            containerImages === null || containerImages === void 0 ? void 0 : containerImages.images.push(image);
+        }
+        destroy() {
+            this._images = [];
+        }
+        draw(context, particle, radius, opacity) {
+            var _a;
+            const image = particle.image, element = image === null || image === void 0 ? void 0 : image.element;
+            if (!element) {
+                return;
+            }
+            const ratio = (_a = image === null || image === void 0 ? void 0 : image.ratio) !== null && _a !== void 0 ? _a : 1, pos = {
+                x: -radius,
+                y: -radius,
+            };
+            context.globalAlpha = opacity;
+            context.drawImage(element, pos.x, pos.y, radius * 2, (radius * 2) / ratio);
+            context.globalAlpha = 1;
+        }
+        getImages(container) {
+            const containerImages = this._images.find((t) => t.id === container.id);
+            if (!containerImages) {
+                this._images.push({
+                    id: container.id,
+                    images: [],
+                });
+                return this.getImages(container);
+            }
+            else {
+                return containerImages;
+            }
+        }
+        getSidesCount() {
+            return 12;
+        }
+        loadShape(particle) {
+            if (particle.shape !== "image" && particle.shape !== "images") {
+                return;
+            }
+            const container = particle.container, images = this.getImages(container).images, imageData = particle.shapeData, image = images.find((t) => t.source === imageData.src);
+            if (!image) {
+                this.loadImageShape(container, imageData).then(() => {
+                    this.loadShape(particle);
+                });
+            }
+        }
+        particleInit(container, particle) {
+            var _a;
+            if (particle.shape !== "image" && particle.shape !== "images") {
+                return;
+            }
+            const images = this.getImages(container).images, imageData = particle.shapeData, color = particle.getFillColor(), replaceColor = (_a = imageData.replaceColor) !== null && _a !== void 0 ? _a : imageData.replace_color, image = images.find((t) => t.source === imageData.src);
+            if (!image) {
+                return;
+            }
+            if (image.loading) {
+                setTimeout(() => {
+                    this.particleInit(container, particle);
+                });
+                return;
+            }
+            (async () => {
+                var _a, _b;
+                let imageRes;
+                if (image.svgData && color) {
+                    imageRes = await (0, Utils_1.replaceImageColor)(image, imageData, color, particle);
+                }
+                else {
+                    imageRes = {
+                        color,
+                        data: image,
+                        element: image.element,
+                        loaded: true,
+                        ratio: imageData.width / imageData.height,
+                        replaceColor: replaceColor,
+                        source: imageData.src,
+                    };
+                }
+                if (!imageRes.ratio) {
+                    imageRes.ratio = 1;
+                }
+                const fill = (_a = imageData.fill) !== null && _a !== void 0 ? _a : particle.fill, close = (_b = imageData.close) !== null && _b !== void 0 ? _b : particle.close, imageShape = {
+                    image: imageRes,
+                    fill,
+                    close,
+                };
+                particle.image = imageShape.image;
+                particle.fill = imageShape.fill;
+                particle.close = imageShape.close;
+            })();
+        }
+        async loadImageShape(container, imageShape) {
+            var _a;
+            const source = imageShape.src;
+            if (!source) {
+                throw new Error("Error tsParticles - No image.src");
+            }
+            try {
+                const image = {
+                    source: source,
+                    type: source.substring(source.length - 3),
+                    error: false,
+                    loading: true,
+                };
+                this.addImage(container, image);
+                const imageFunc = ((_a = imageShape.replaceColor) !== null && _a !== void 0 ? _a : imageShape.replace_color) ? Utils_1.downloadSvgImage : Utils_1.loadImage;
+                await imageFunc(image);
+            }
+            catch (_b) {
+                throw new Error(`tsParticles error - ${imageShape.src} not found`);
+            }
+        }
+    }
+    exports.ImageDrawer = ImageDrawer;
+});

package/umd/Utils.js

@@ -0,0 +1,94 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "@tsparticles/engine"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.replaceImageColor = exports.downloadSvgImage = exports.loadImage = void 0;
+    const engine_1 = require("@tsparticles/engine");
+    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) {
+        const { svgData } = imageShape;
+        if (!svgData) {
+            return "";
+        }
+        const colorStyle = (0, engine_1.getStyleFromHsl)(color, opacity);
+        if (svgData.includes("fill")) {
+            return svgData.replace(currentColorRegex, () => colorStyle);
+        }
+        const preFillIndex = svgData.indexOf(">");
+        return `${svgData.substring(0, 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;
+                console.error(`Error tsParticles - loading image: ${image.source}`);
+                resolve();
+            });
+            img.src = image.source;
+        });
+    }
+    exports.loadImage = loadImage;
+    async function downloadSvgImage(image) {
+        if (image.type !== "svg") {
+            await loadImage(image);
+            return;
+        }
+        image.loading = true;
+        const response = await fetch(image.source);
+        if (!response.ok) {
+            console.error("Error tsParticles - Image not found");
+            image.error = true;
+        }
+        if (!image.error) {
+            image.svgData = await response.text();
+        }
+        image.loading = false;
+    }
+    exports.downloadSvgImage = downloadSvgImage;
+    function replaceImageColor(image, imageData, color, particle) {
+        var _a, _b, _c;
+        const svgColoredData = replaceColorSvg(image, color, (_b = (_a = particle.opacity) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 1), imageRes = {
+            color,
+            data: Object.assign(Object.assign({}, image), { svgData: svgColoredData }),
+            loaded: false,
+            ratio: imageData.width / imageData.height,
+            replaceColor: (_c = imageData.replaceColor) !== null && _c !== void 0 ? _c : imageData.replace_color,
+            source: imageData.src,
+        };
+        return new Promise((resolve) => {
+            const svg = new Blob([svgColoredData], { type: "image/svg+xml" }), domUrl = URL || window.URL || window.webkitURL || window, url = domUrl.createObjectURL(svg), img = new Image();
+            img.addEventListener("load", () => {
+                imageRes.loaded = true;
+                imageRes.element = img;
+                resolve(imageRes);
+                domUrl.revokeObjectURL(url);
+            });
+            img.addEventListener("error", async () => {
+                domUrl.revokeObjectURL(url);
+                const img2 = Object.assign(Object.assign({}, image), { error: false, loading: true });
+                await loadImage(img2);
+                imageRes.loaded = true;
+                imageRes.element = img2.element;
+                resolve(imageRes);
+            });
+            img.src = url;
+        });
+    }
+    exports.replaceImageColor = replaceImageColor;
+});

package/umd/index.js

@@ -0,0 +1,18 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "./ImageDrawer"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.loadImageShape = void 0;
+    const ImageDrawer_1 = require("./ImageDrawer");
+    async function loadImageShape(engine) {
+        await engine.addShape(["image", "images"], new ImageDrawer_1.ImageDrawer());
+    }
+    exports.loadImageShape = loadImageShape;
+});