@tsparticles/shape-image 3.0.0-alpha.1 → 3.0.0-beta.1

package/tsparticles.shape.image.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.0.0-alpha.1
+ * v3.0.0-beta.1
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -91,13 +91,430 @@ __webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  "loadImageShape": () => (/* binding */ loadImageShape)
+  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/GifUtils/Constants.js
+const InterlaceOffsets = [0, 4, 2, 1];
+const InterlaceSteps = [8, 8, 4, 2];
+;// CONCATENATED MODULE: ./dist/browser/GifUtils/ByteStream.js
+class ByteStream {
+  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() {
+    this.pos += 2;
+    return this.data[this.pos - 2] + (this.data[this.pos - 1] << 8);
+  }
+  readSubBlocks() {
+    let blockString = "",
+      size = 0;
+    do {
+      size = this.data[this.pos++];
+      for (let count = size; --count >= 0; blockString += String.fromCharCode(this.data[this.pos++])) {}
+    } while (size !== 0);
+    return blockString;
+  }
+  readSubBlocksBin() {
+    let size = 0,
+      len = 0;
+    for (let offset = 0; (size = this.data[this.pos + offset]) !== 0; offset += size + 1) {
+      len += size;
+    }
+    const blockData = new Uint8Array(len);
+    for (let i = 0; (size = this.data[this.pos++]) !== 0;) {
+      for (let count = size; --count >= 0; blockData[i++] = this.data[this.pos++]) {}
+    }
+    return blockData;
+  }
+  skipSubBlocks() {
+    for (; this.data[this.pos] !== 0; this.pos += this.data[this.pos] + 1) {}
+    this.pos++;
+  }
+}
+;// CONCATENATED MODULE: ./dist/browser/GifUtils/Utils.js
+
+
+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;
+}
+async function parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex) {
+  switch (byteStream.nextByte()) {
+    case 249:
+      {
+        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 255:
+      {
+        byteStream.pos++;
+        const applicationExtension = {
+          identifier: byteStream.getString(8),
+          authenticationCode: byteStream.getString(3),
+          data: byteStream.readSubBlocksBin()
+        };
+        gif.applicationExtensions.push(applicationExtension);
+        break;
+      }
+    case 254:
+      {
+        gif.comments.push([getFrameIndex(false), byteStream.readSubBlocks()]);
+        break;
+      }
+    case 1:
+      {
+        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;
+  }
+}
+async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, 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];
+    return {
+      r,
+      g,
+      b,
+      a: index === getTransparencyIndex(null) ? avgAlpha ? ~~((r + g + b) / 3) : 0 : 255
+    };
+  };
+  const image = (() => {
+    try {
+      return new ImageData(frame.width, frame.height, {
+        colorSpace: "srgb"
+      });
+    } 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;
+  const readBits = (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;
+  };
+  if (interlacedFlag) {
+    for (let code = 0, size = minCodeSize + 1, pos = 0, dic = [[0]], pass = 0; pass < 4; pass++) {
+      if (InterlaceOffsets[pass] < frame.height) {
+        for (let pixelPos = 0, lineIndex = 0;;) {
+          const last = code;
+          code = readBits(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 (let i = 0; i < dic[code].length; i++) {
+              const {
+                r,
+                g,
+                b,
+                a
+              } = getColor(dic[code][i]);
+              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) {
+              break;
+            }
+          }
+        }
+      }
+      progressCallback?.(byteStream.pos / (byteStream.data.length - 1), getFrameIndex(false) + 1, image, {
+        x: frame.left,
+        y: frame.top
+      }, {
+        width: gif.width,
+        height: gif.height
+      });
+    }
+    frame.image = image;
+    frame.bitmap = await createImageBitmap(image);
+  } else {
+    for (let code = 0, size = minCodeSize + 1, pos = 0, dic = [[0]], pixelPos = -4;;) {
+      const last = code;
+      code = readBits(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 (let i = 0; i < dic[code].length; i++) {
+          const {
+            r,
+            g,
+            b,
+            a
+          } = getColor(dic[code][i]);
+          image.data.set([r, g, b, a], pixelPos += 4);
+        }
+        if (dic.length >= 1 << size && size < 0xc) {
+          size++;
+        }
+      }
+    }
+    frame.image = image;
+    frame.bitmap = await createImageBitmap(image);
+    progressCallback?.((byteStream.pos + 1) / byteStream.data.length, getFrameIndex(false) + 1, frame.image, {
+      x: frame.left,
+      y: frame.top
+    }, {
+      width: gif.width,
+      height: gif.height
+    });
+  }
+}
+async function parseBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, progressCallback) {
+  switch (byteStream.nextByte()) {
+    case 59:
+      return true;
+    case 44:
+      await parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, progressCallback);
+      break;
+    case 33:
+      await 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 NaN;
+}
+async function decodeGIF(gifURL, progressCallback, avgAlpha) {
+  if (!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();
+  const gif = {
+      width: 0,
+      height: 0,
+      totalTime: 0,
+      colorRes: 0,
+      pixelAspectRatio: 0,
+      frames: [],
+      sortFlag: false,
+      globalColorTable: [],
+      backgroundImage: new ImageData(1, 1, {
+        colorSpace: "srgb"
+      }),
+      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, {
+        colorSpace: "srgb"
+      });
+    } 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;
+  };
+  const 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: 0,
+          image: new ImageData(1, 1, {
+            colorSpace: "srgb"
+          }),
+          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, 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} "${error.message}"`);
+    }
+    throw error;
+  }
+}
 ;// 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 {
@@ -126,12 +543,29 @@ async function loadImage(image) {
       image.element = undefined;
       image.error = true;
       image.loading = false;
-      console.error(`Error tsParticles - loading image: ${image.source}`);
+      (0,engine_root_window_.getLogger)().error(`${engine_root_window_.errorPrefix} loading image: ${image.source}`);
       resolve();
     });
     img.src = image.source;
   });
 }
+async function loadGifImage(image) {
+  if (image.type !== "gif") {
+    await loadImage(image);
+    return;
+  }
+  image.loading = true;
+  try {
+    image.gifData = await decodeGIF(image.source);
+    image.gifLoopCount = getGIFLoopAmount(image.gifData) ?? 0;
+    if (image.gifLoopCount === 0) {
+      image.gifLoopCount = Infinity;
+    }
+  } catch {
+    image.error = true;
+  }
+  image.loading = false;
+}
 async function downloadSvgImage(image) {
   if (image.type !== "svg") {
     await loadImage(image);
@@ -140,25 +574,25 @@ async function downloadSvgImage(image) {
   image.loading = true;
   const response = await fetch(image.source);
   if (!response.ok) {
-    console.error("Error tsParticles - Image not found");
+    (0,engine_root_window_.getLogger)().error(`${engine_root_window_.errorPrefix} Image not found`);
     image.error = true;
-  }
-  if (!image.error) {
+  } else {
     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),
+  const svgColoredData = replaceColorSvg(image, color, particle.opacity?.value ?? 1),
     imageRes = {
       color,
-      data: Object.assign(Object.assign({}, image), {
+      gif: imageData.gif,
+      data: {
+        ...image,
         svgData: svgColoredData
-      }),
+      },
       loaded: false,
       ratio: imageData.width / imageData.height,
-      replaceColor: (_c = imageData.replaceColor) !== null && _c !== void 0 ? _c : imageData.replace_color,
+      replaceColor: imageData.replaceColor,
       source: imageData.src
     };
   return new Promise(resolve => {
@@ -176,10 +610,11 @@ function replaceImageColor(image, imageData, color, particle) {
     });
     img.addEventListener("error", async () => {
       domUrl.revokeObjectURL(url);
-      const img2 = Object.assign(Object.assign({}, image), {
+      const img2 = {
+        ...image,
         error: false,
         loading: true
-      });
+      };
       await loadImage(img2);
       imageRes.loaded = true;
       imageRes.element = img2.element;
@@ -190,75 +625,159 @@ function replaceImageColor(image, imageData, color, particle) {
 }
 ;// 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);
+  constructor(engine) {
+    this.loadImageShape = async imageShape => {
+      if (!this._engine.loadImage) {
+        throw new Error(`${engine_root_window_.errorPrefix} image shape not initialized`);
+      }
+      await this._engine.loadImage({
+        gif: imageShape.gif,
+        name: imageShape.name,
+        replaceColor: imageShape.replaceColor ?? false,
+        src: imageShape.src
+      });
+    };
+    this._engine = engine;
   }
-  destroy() {
-    this._images = [];
+  addImage(image) {
+    if (!this._engine.images) {
+      this._engine.images = [];
+    }
+    this._engine.images.push(image);
   }
-  draw(context, particle, radius, opacity) {
-    var _a;
+  draw(context, particle, radius, opacity, delta) {
     const image = particle.image,
-      element = image === null || image === void 0 ? void 0 : image.element;
-    if (!element) {
+      element = image?.element;
+    if (!image) {
       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;
+    if (image.gif && image.gifData) {
+      const offscreenCanvas = new OffscreenCanvas(image.gifData.width, image.gifData.height),
+        offscreenContext = offscreenCanvas.getContext("2d");
+      if (!offscreenContext) {
+        throw new Error("could not create offscreen canvas context");
+      }
+      offscreenContext.imageSmoothingQuality = "low";
+      offscreenContext.imageSmoothingEnabled = false;
+      offscreenContext.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
+      if (particle.gifLoopCount === undefined) {
+        particle.gifLoopCount = image.gifLoopCount ?? 0;
+      }
+      let frameIndex = particle.gifFrame ?? 0;
+      const pos = {
+          x: -image.gifData.width * 0.5,
+          y: -image.gifData.height * 0.5
+        },
+        frame = image.gifData.frames[frameIndex];
+      if (particle.gifTime === undefined) {
+        particle.gifTime = 0;
+      }
+      if (!frame.bitmap) {
+        return;
+      }
+      context.scale(radius / image.gifData.width, radius / image.gifData.height);
+      switch (frame.disposalMethod) {
+        case 4:
+        case 5:
+        case 6:
+        case 7:
+        case 0:
+          offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
+          context.drawImage(offscreenCanvas, pos.x, pos.y);
+          offscreenContext.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
+          break;
+        case 1:
+          offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
+          context.drawImage(offscreenCanvas, pos.x, pos.y);
+          break;
+        case 2:
+          offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
+          context.drawImage(offscreenCanvas, pos.x, pos.y);
+          offscreenContext.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
+          if (image.gifData.globalColorTable.length === 0) {
+            offscreenContext.putImageData(image.gifData.frames[0].image, pos.x + frame.left, pos.y + frame.top);
+          } else {
+            offscreenContext.putImageData(image.gifData.backgroundImage, pos.x, pos.y);
+          }
+          break;
+        case 3:
+          {
+            const previousImageData = offscreenContext.getImageData(0, 0, offscreenCanvas.width, offscreenCanvas.height);
+            offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
+            context.drawImage(offscreenCanvas, pos.x, pos.y);
+            offscreenContext.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
+            offscreenContext.putImageData(previousImageData, 0, 0);
+          }
+          break;
+      }
+      particle.gifTime += delta.value;
+      if (particle.gifTime > frame.delayTime) {
+        particle.gifTime -= frame.delayTime;
+        if (++frameIndex >= image.gifData.frames.length) {
+          if (--particle.gifLoopCount <= 0) {
+            return;
+          }
+          frameIndex = 0;
+          offscreenContext.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
+        }
+        particle.gifFrame = frameIndex;
+      }
+      context.scale(image.gifData.width / radius, image.gifData.height / radius);
+    } else if (element) {
+      const ratio = image.ratio,
+        pos = {
+          x: -radius,
+          y: -radius
+        };
+      context.drawImage(element, pos.x, pos.y, radius * 2, radius * 2 / ratio);
     }
+    context.globalAlpha = 1;
   }
   getSidesCount() {
     return 12;
   }
+  async init(container) {
+    const options = container.actualOptions;
+    if (!options.preload || !this._engine.loadImage) {
+      return;
+    }
+    for (const imageData of options.preload) {
+      await this._engine.loadImage(imageData);
+    }
+  }
   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 (!this._engine.images) {
+      this._engine.images = [];
+    }
+    const imageData = particle.shapeData,
+      image = this._engine.images.find(t => t.name === imageData.name || t.source === imageData.src);
     if (!image) {
-      this.loadImageShape(container, imageData).then(() => {
+      this.loadImageShape(imageData).then(() => {
         this.loadShape(particle);
       });
     }
   }
   particleInit(container, particle) {
-    var _a;
     if (particle.shape !== "image" && particle.shape !== "images") {
       return;
     }
-    const images = this.getImages(container).images,
+    if (!this._engine.images) {
+      this._engine.images = [];
+    }
+    const images = this._engine.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);
+      image = images.find(t => t.name === imageData.name || t.source === imageData.src);
     if (!image) {
       return;
     }
+    const replaceColor = imageData.replaceColor ?? image.replaceColor;
     if (image.loading) {
       setTimeout(() => {
         this.particleInit(container, particle);
@@ -266,7 +785,6 @@ class ImageDrawer {
       return;
     }
     (async () => {
-      var _a, _b;
       let imageRes;
       if (image.svgData && color) {
         imageRes = await replaceImageColor(image, imageData, color, particle);
@@ -275,8 +793,11 @@ class ImageDrawer {
           color,
           data: image,
           element: image.element,
+          gif: image.gif,
+          gifData: image.gifData,
+          gifLoopCount: image.gifLoopCount,
           loaded: true,
-          ratio: imageData.width / imageData.height,
+          ratio: imageData.width && imageData.height ? imageData.width / imageData.height : image.ratio ?? 1,
           replaceColor: replaceColor,
           source: imageData.src
         };
@@ -284,8 +805,8 @@ class ImageDrawer {
       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,
+      const fill = imageData.fill ?? particle.fill,
+        close = imageData.close ?? particle.close,
         imageShape = {
           image: imageRes,
           fill,
@@ -296,31 +817,113 @@ class ImageDrawer {
       particle.close = imageShape.close;
     })();
   }
-  async loadImageShape(container, imageShape) {
-    var _a;
-    const source = imageShape.src;
-    if (!source) {
-      throw new Error("Error tsParticles - No image.src");
+}
+;// CONCATENATED MODULE: ./dist/browser/Options/Classes/Preload.js
+class Preload {
+  constructor() {
+    this.src = "";
+    this.gif = false;
+  }
+  load(data) {
+    if (!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;
+    }
+  }
+}
+;// CONCATENATED MODULE: ./dist/browser/ImagePreloader.js
+
+class ImagePreloaderPlugin {
+  constructor(engine) {
+    this.id = "imagePreloader";
+    this._engine = engine;
+  }
+  getPlugin() {
+    return {};
+  }
+  loadOptions(options, source) {
+    if (!source || !source.preload) {
+      return;
+    }
+    if (!options.preload) {
+      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;
+  }
+}
+;// CONCATENATED MODULE: ./dist/browser/index.js
+
+
+
+
+function addLoadImageToEngine(engine) {
+  if (engine.loadImage) {
+    return;
+  }
+  engine.loadImage = async data => {
+    if (!data.name && !data.src) {
+      throw new Error(`${engine_root_window_.errorPrefix} no image source provided`);
+    }
+    if (!engine.images) {
+      engine.images = [];
+    }
+    if (engine.images.find(t => t.name === data.name || t.source === data.src)) {
+      return;
     }
     try {
       const image = {
-        source: source,
-        type: source.substring(source.length - 3),
+        gif: data.gif ?? false,
+        name: data.name ?? data.src,
+        source: data.src,
+        type: data.src.substring(data.src.length - 3),
         error: false,
-        loading: true
+        loading: true,
+        replaceColor: data.replaceColor,
+        ratio: data.width && data.height ? data.width / data.height : undefined
       };
-      this.addImage(container, image);
-      const imageFunc = ((_a = imageShape.replaceColor) !== null && _a !== void 0 ? _a : imageShape.replace_color) ? downloadSvgImage : loadImage;
+      engine.images.push(image);
+      const imageFunc = data.gif ? loadGifImage : data.replaceColor ? downloadSvgImage : loadImage;
       await imageFunc(image);
-    } catch (_b) {
-      throw new Error(`tsParticles error - ${imageShape.src} not found`);
+    } catch {
+      throw new Error(`${engine_root_window_.errorPrefix} ${data.name ?? data.src} not found`);
     }
-  }
+  };
 }
-;// CONCATENATED MODULE: ./dist/browser/index.js
-
-async function loadImageShape(engine) {
-  await engine.addShape(["image", "images"], new ImageDrawer());
+async function loadImageShape(engine, refresh = true) {
+  addLoadImageToEngine(engine);
+  const preloader = new ImagePreloaderPlugin(engine);
+  await engine.addPlugin(preloader, refresh);
+  await engine.addShape(["image", "images"], new ImageDrawer(engine), refresh);
 }
 })();