tsparticles/tsparticles.shape.image.min.js

Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.

/*! tsParticles v1.42.2 by Matteo Bruni */
!function(e,o){if("object"==typeof exports&&"object"==typeof module)module.exports=o();else if("function"==typeof define&&define.amd)define([],o);else{var t=o();for(var r in t)("object"==typeof exports?exports:e)[r]=t[r]}}(window,(function(){return function(){"use strict";var e={d:function(o,t){for(var r in t)e.o(t,r)&&!e.o(o,r)&&Object.defineProperty(o,r,{enumerable:!0,get:t[r]})},o:function(e,o){return Object.prototype.hasOwnProperty.call(e,o)},r:function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},o={};e.r(o),e.d(o,{loadImageShape:function(){return g}});class t{}t.generatedAttribute="generated",t.randomColorValue="random",t.midColorValue="mid",t.touchEndEvent="touchend",t.mouseDownEvent="mousedown",t.mouseUpEvent="mouseup",t.mouseMoveEvent="mousemove",t.touchStartEvent="touchstart",t.touchMoveEvent="touchmove",t.mouseLeaveEvent="mouseleave",t.mouseOutEvent="mouseout",t.touchCancelEvent="touchcancel",t.resizeEvent="resize",t.visibilityChangeEvent="visibilitychange",t.noPolygonDataLoaded="No polygon data loaded.",t.noPolygonFound="No polygon found, you need to specify SVG url in config.";new WeakMap;new WeakMap;new WeakMap,new WeakSet;new WeakMap;new WeakMap;new WeakMap;function r(e,o){return`hsla(${e.h}, ${e.s}%, ${e.l}%, ${null!=o?o:1})`}new WeakMap;const a=/(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;async function n(e){return new Promise((o=>{e.loading=!0;const t=new Image;t.addEventListener("load",(()=>{e.element=t,e.loading=!1,o()})),t.addEventListener("error",(()=>{e.error=!0,e.loading=!1,console.error(`Error tsParticles - loading image: ${e.source}`),o()})),t.src=e.source}))}async function i(e){if("svg"!==e.type)return void await n(e);e.loading=!0;const o=await fetch(e.source);e.loading=!1,o.ok||(console.error("Error tsParticles - Image not found"),e.error=!0),e.error||(e.svgData=await o.text())}function s(e,o,t,i){var s,l,c;const d=function(e,o,t){const{svgData:n}=e;if(!n)return"";const i=r(o,t);if(n.includes("fill"))return n.replace(a,(()=>i));const s=n.indexOf(">");return`${n.substring(0,s)} fill="${i}"${n.substring(s)}`}(e,t,null!==(l=null===(s=i.opacity)||void 0===s?void 0:s.value)&&void 0!==l?l:1),u=new Blob([d],{type:"image/svg+xml"}),g=URL||window.URL||window.webkitURL||window,f=g.createObjectURL(u),v=new Image,m={data:Object.assign(Object.assign({},e),{svgData:d}),ratio:o.width/o.height,replaceColor:null!==(c=o.replaceColor)&&void 0!==c?c:o.replace_color,source:o.src};return v.addEventListener("load",(()=>{const o=i.image;o&&(o.loaded=!0,e.element=v),g.revokeObjectURL(f)})),v.addEventListener("error",(()=>{g.revokeObjectURL(f);const o=Object.assign(Object.assign({},e),{error:!1,loading:!0});n(o).then((()=>{const t=i.image;t&&(e.element=o.element,t.loaded=!0)}))})),v.src=f,m}var l,c=function(e,o,t,r,a){if("m"===r)throw new TypeError("Private method is not writable");if("a"===r&&!a)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof o?e!==o||!a:!o.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===r?a.call(e,t):a?a.value=t:o.set(e,t),t},d=function(e,o,t,r){if("a"===t&&!r)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof o?e!==o||!r:!o.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===t?r:"a"===t?r.call(e):r?r.value:o.get(e)};class u{constructor(){l.set(this,void 0),c(this,l,[],"f")}getSidesCount(){return 12}getImages(e){const o=d(this,l,"f").find((o=>o.id===e.id));return o||(d(this,l,"f").push({id:e.id,images:[]}),this.getImages(e))}addImage(e,o){const t=this.getImages(e);null==t||t.images.push(o)}destroy(){c(this,l,[],"f")}async loadImageShape(e,o){const t=o.src;if(!t)throw new Error("Error tsParticles - No image.src");try{const r={source:t,type:t.substr(t.length-3),error:!1,loading:!0};this.addImage(e,r);const a=o.replaceColor?i:n;await a(r)}catch(e){throw new Error(`tsParticles error - ${o.src} not found`)}}draw(e,o,t,r){var a,n;const i=o.image,s=null===(a=null==i?void 0:i.data)||void 0===a?void 0:a.element;if(!s)return;const l=null!==(n=null==i?void 0:i.ratio)&&void 0!==n?n:1,c={x:-t,y:-t};(null==i?void 0:i.data.svgData)&&(null==i?void 0:i.replaceColor)||(e.globalAlpha=r),e.drawImage(s,c.x,c.y,2*t,2*t/l),(null==i?void 0:i.data.svgData)&&(null==i?void 0:i.replaceColor)||(e.globalAlpha=1)}loadShape(e){var o,t,r;if("image"!==e.shape&&"images"!==e.shape)return;const a=this.getImages(e.container).images,n=e.shapeData,i=a.find((e=>e.source===n.src));let l;if(!i)return void this.loadImageShape(e.container,n).then((()=>{this.loadShape(e)}));if(i.error)return;const c=e.getFillColor();l=i.svgData&&n.replaceColor&&c?s(i,n,c,e):{data:i,loaded:!0,ratio:n.width/n.height,replaceColor:null!==(o=n.replaceColor)&&void 0!==o?o:n.replace_color,source:n.src},l.ratio||(l.ratio=1);const d={image:l,fill:null!==(t=n.fill)&&void 0!==t?t:e.fill,close:null!==(r=n.close)&&void 0!==r?r:e.close};e.image=d.image,e.fill=d.fill,e.close=d.close}}async function g(e){const o=new u;await e.addShape("image",o),await e.addShape("images",o)}return l=new WeakMap,o}()}));