@tsparticles/shape-image 4.0.0-alpha.16 → 4.0.0-alpha.17

package/423.min.js

@@ -1 +1 @@
-"use strict";(this.webpackChunk_tsparticles_shape_image=this.webpackChunk_tsparticles_shape_image||[]).push([[423,763],{423(e,t,a){a.d(t,{ImageDrawer:()=>r});var i=a(303),o=a(694),n=a(763);class r{_engine;constructor(e){this._engine=e}addImage(e){this._engine.images??=[],this._engine.images.push(e)}draw(e){let{context:t,radius:a,particle:o,opacity:r}=e,l=o.image,s=l?.element;if(l){if(t.globalAlpha=r,l.gif&&l.gifData)(0,n.zS)(e,o.container.canvas.settings);else if(s){let e=l.ratio,o={x:-a,y:-a},n=a*i.double;t.drawImage(s,o.x,o.y,n,n/e)}t.globalAlpha=i.defaultAlpha}}getSidesCount(){return 12}async init(e){let t=e.actualOptions;if(t.preload&&this._engine.loadImage)for(let e of t.preload)await this._engine.loadImage(e)}loadShape(e){if(!e.shape||!o.z.includes(e.shape))return;let t=e.shapeData;!t||(this._engine.images??=[],this._engine.images.find(e=>e.name===t.name||e.source===t.src)||this.loadImageShape(t).then(()=>{this.loadShape(e)}))}particleInit(e,t){if("image"!==t.shape&&"images"!==t.shape)return;this._engine.images??=[];let a=this._engine.images,n=t.shapeData;if(!n)return;let r=t.getFillColor(),l=a.find(e=>e.name===n.name||e.source===n.src);if(!l)return;let s=n.replaceColor;l.loading?setTimeout(()=>{this.particleInit(e,t)}):(async()=>{let a;(a=l.svgData&&r?await (0,o.d)(l,n,r,t,e.hdr):{color:r,data:l,element:l.element,gif:l.gif,gifData:l.gifData,gifLoopCount:l.gifLoopCount,loaded:!0,ratio:n.width&&n.height?n.width/n.height:l.ratio??i.defaultRatio,replaceColor:s,source:n.src}).ratio||(a.ratio=1);let g=n.fill??t.shapeFill,h=n.close??t.shapeClose;t.image=a,t.shapeFill=g,t.shapeClose=h})()}loadImageShape=async e=>{if(!this._engine.loadImage)throw Error("Image shape not initialized");await this._engine.loadImage({gif:e.gif,name:e.name,replaceColor:e.replaceColor,src:e.src})}}},763(e,t,a){a.d(t,{zS:()=>w,loadGifImage:()=>x});var i,o,n,r,l=a(694),s=a(303);let g=[0,4,2,1],h=[8,8,4,2];class d{data;pos;constructor(e){this.pos=0,this.data=new Uint8ClampedArray(e)}getString(e){let t=this.data.slice(this.pos,this.pos+e);return this.pos+=t.length,t.reduce((e,t)=>e+String.fromCharCode(t),"")}nextByte(){return this.data[this.pos++]}nextTwoBytes(){return this.pos+=2,this.data[this.pos-2]+(this.data[this.pos-1]<<8)}readSubBlocks(){let e="",t=0;do{t=this.data[this.pos++];for(let a=t;--a>=0;e+=String.fromCodePoint(this.data[this.pos++]));}while(0!==t)return e}readSubBlocksBin(){let e=this.data[this.pos],t=0;for(let a=0;0!==e;a+=e+1,e=this.data[this.pos+a])t+=e;let a=new Uint8Array(t);e=this.data[this.pos++];for(let t=0;0!==e;e=this.data[this.pos++])for(let i=e;--i>=0;a[t++]=this.data[this.pos++]);return a}skipSubBlocks(){for(;0!==this.data[this.pos];this.pos+=this.data[this.pos]+1);this.pos++}}function f(e,t){let a=[];for(let i=0;i<t;i++)a.push({r:e.data[e.pos],g:e.data[e.pos+1],b:e.data[e.pos+2]}),e.pos+=3;return a}function c(e,t,a){let i=t>>>3,o=7&t;return(e[i]+(e[i+1]<<8)+(e[i+2]<<16)&(1<<a)-1<<o)>>>o}async function p(e,t,a,i,o,n){let r=t.frames[i(!0)];r.left=e.nextTwoBytes(),r.top=e.nextTwoBytes(),r.width=e.nextTwoBytes(),r.height=e.nextTwoBytes();let l=e.nextByte(),s=(128&l)==128;r.sortFlag=(32&l)==32,r.reserved=(24&l)>>>3,s&&(r.localColorTable=f(e,1<<(7&l)+1));let d=e=>{let{r:i,g:n,b:l}=(s?r.localColorTable:t.globalColorTable)[e];return e!==o(null)?{r:i,g:n,b:l,a:255}:{r:i,g:n,b:l,a:a?Math.trunc((i+n+l)/3):0}},p=(()=>{try{return new ImageData(r.width,r.height,{colorSpace:"srgb"})}catch(e){if(e instanceof DOMException&&"IndexSizeError"===e.name)return null;throw e}})();if(null==p)throw EvalError("GIF frame size is to large");let m=e.nextByte(),u=e.readSubBlocksBin(),w=1<<m;if((64&l)==64){for(let a=0,o=m+1,l=0,s=[[0]],f=0;f<4;f++){if(g[f]<r.height){let e=0,t=0,i=!1;for(;!i;){let n=a;if(a=c(u,l,o),l+=o+1,a===w){o=m+1,s.length=w+2;for(let e=0;e<s.length;e++)s[e]=e<w?[e]:[]}else{for(let i of(a>=s.length?s.push(s[n].concat(s[n][0])):n!==w&&s.push(s[n].concat(s[a][0])),s[a])){let{r:a,g:o,b:n,a:l}=d(i);p.data.set([a,o,n,l],g[f]*r.width+h[f]*t+e%(4*r.width)),e+=4}s.length===1<<o&&o<12&&o++}e===4*r.width*(t+1)&&(t++,g[f]+h[f]*t>=r.height&&(i=!0))}}n?.(e.pos/(e.data.length-1),i(!1)+1,p,{x:r.left,y:r.top},{width:t.width,height:t.height})}r.image=p,r.bitmap=await createImageBitmap(p)}else{let a=0,o=m+1,l=0,s=-4,g=[[0]];for(;;){let e=a;if(a=c(u,l,o),l+=o,a===w){o=m+1,g.length=w+2;for(let e=0;e<g.length;e++)g[e]=e<w?[e]:[]}else{if(a===w+1)break;for(let t of(a>=g.length?g.push(g[e].concat(g[e][0])):e!==w&&g.push(g[e].concat(g[a][0])),g[a])){let{r:e,g:a,b:i,a:o}=d(t);p.data.set([e,a,i,o],s),s+=4}g.length>=1<<o&&o<12&&o++}}r.image=p,r.bitmap=await createImageBitmap(p),n?.((e.pos+1)/e.data.length,i(!1)+1,r.image,{x:r.left,y:r.top},{width:t.width,height:t.height})}}async function m(e,t,a,i,o,n){switch(e.nextByte()){case r.EndOfFile:return!0;case r.Image:await p(e,t,a,i,o,n);break;case r.Extension:switch(e.nextByte()){case r.GraphicsControlExtension:{let a=t.frames[i(!1)];e.pos++;let n=e.nextByte();a.GCreserved=(224&n)>>>5,a.disposalMethod=(28&n)>>>2,a.userInputDelayFlag=(2&n)==2,a.delayTime=10*e.nextTwoBytes();let r=e.nextByte();(1&n)==1&&o(r),e.pos++;break}case r.ApplicationExtension:{e.pos++;let a={identifier:e.getString(8),authenticationCode:e.getString(3),data:e.readSubBlocksBin()};t.applicationExtensions.push(a);break}case r.CommentExtension:t.comments.push([i(!1),e.readSubBlocks()]);break;case r.PlainTextExtension:if(0===t.globalColorTable.length)throw EvalError("plain text extension without global color table");e.pos++,t.frames[i(!1)].plainTextData={left:e.nextTwoBytes(),top:e.nextTwoBytes(),width:e.nextTwoBytes(),height:e.nextTwoBytes(),charSize:{width:e.nextTwoBytes(),height:e.nextTwoBytes()},foregroundColor:e.nextByte(),backgroundColor:e.nextByte(),text:e.readSubBlocks()};break;default:e.skipSubBlocks()}break;default:throw EvalError("undefined block found")}return!1}async function u(e,t,a){a??=!1;let i=await fetch(e);if(!i.ok&&404===i.status)throw EvalError("file not found");let o=await i.arrayBuffer(),r={width:0,height:0,totalTime:0,colorRes:0,pixelAspectRatio:0,frames:[],sortFlag:!1,globalColorTable:[],backgroundImage:new ImageData(1,1,{colorSpace:"srgb"}),comments:[],applicationExtensions:[]},l=new d(new Uint8ClampedArray(o));if("GIF89a"!==l.getString(6))throw Error("not a supported GIF file");r.width=l.nextTwoBytes(),r.height=l.nextTwoBytes();let s=l.nextByte(),g=(128&s)==128;r.colorRes=(112&s)>>>4,r.sortFlag=(8&s)==8;let h=l.nextByte();r.pixelAspectRatio=l.nextByte(),0!==r.pixelAspectRatio&&(r.pixelAspectRatio=(r.pixelAspectRatio+15)/64),g&&(r.globalColorTable=f(l,1<<(7&s)+1));let c=(()=>{try{return new ImageData(r.width,r.height,{colorSpace:"srgb"})}catch(e){if(e instanceof DOMException&&"IndexSizeError"===e.name)return null;throw e}})();if(null==c)throw Error("GIF frame size is to large");let{r:p,g:u,b:w}=r.globalColorTable[h];c.data.set(g?[p,u,w,255]:[0,0,0,0]);for(let e=4;e<c.data.length;e*=2)c.data.copyWithin(e,0,e);r.backgroundImage=c;let x=-1,y=!0,b=-1,C=e=>(e&&(y=!0),x),I=e=>(null!=e&&(b=e),b);try{do y&&(r.frames.push({left:0,top:0,width:0,height:0,disposalMethod:n.Replace,image:new ImageData(1,1,{colorSpace:"srgb"}),plainTextData:null,userInputDelayFlag:!1,delayTime:0,sortFlag:!1,localColorTable:[],reserved:0,GCreserved:0}),x++,b=-1,y=!1);while(!await m(l,r,a,C,I,t))for(let e of(r.frames.length--,r.frames)){if(e.userInputDelayFlag&&0===e.delayTime){r.totalTime=1/0;break}r.totalTime+=e.delayTime}return r}catch(e){if(e instanceof EvalError)throw Error(`error while parsing frame ${x.toString()} "${e.message}"`);throw e}}function w(e,t){let{context:a,radius:i,particle:o,delta:r}=e,l=o.image;if(!l?.gifData||!l.gif)return;let g=new OffscreenCanvas(l.gifData.width,l.gifData.height),h=g.getContext("2d",t);if(!h)throw Error("could not create offscreen canvas context");h.imageSmoothingQuality="low",h.imageSmoothingEnabled=!1,h.clearRect(s.originPoint.x,s.originPoint.y,g.width,g.height),o.gifLoopCount??=l.gifLoopCount??0;let d=o.gifFrame??0,f={x:-l.gifData.width*s.half,y:-l.gifData.height*s.half},c=l.gifData.frames[d];if(o.gifTime??=0,c.bitmap){switch(a.scale(i/l.gifData.width,i/l.gifData.height),c.disposalMethod){case n.UndefinedA:case n.UndefinedB:case n.UndefinedC:case n.UndefinedD:case n.Replace:h.drawImage(c.bitmap,c.left,c.top),a.drawImage(g,f.x,f.y),h.clearRect(s.originPoint.x,s.originPoint.y,g.width,g.height);break;case n.Combine:h.drawImage(c.bitmap,c.left,c.top),a.drawImage(g,f.x,f.y);break;case n.RestoreBackground:h.drawImage(c.bitmap,c.left,c.top),a.drawImage(g,f.x,f.y),h.clearRect(s.originPoint.x,s.originPoint.y,g.width,g.height),l.gifData.globalColorTable.length?h.putImageData(l.gifData.backgroundImage,f.x,f.y):h.putImageData(l.gifData.frames[0].image,f.x+c.left,f.y+c.top);break;case n.RestorePrevious:{let e=h.getImageData(s.originPoint.x,s.originPoint.y,g.width,g.height);h.drawImage(c.bitmap,c.left,c.top),a.drawImage(g,f.x,f.y),h.clearRect(s.originPoint.x,s.originPoint.y,g.width,g.height),h.putImageData(e,s.originPoint.x,s.originPoint.y)}}if(o.gifTime+=r.value,o.gifTime>c.delayTime){if(o.gifTime-=c.delayTime,++d>=l.gifData.frames.length){if(--o.gifLoopCount<=0)return;d=0,h.clearRect(s.originPoint.x,s.originPoint.y,g.width,g.height)}o.gifFrame=d}a.scale(l.gifData.width/i,l.gifData.height/i)}}async function x(e){if("gif"!==e.type)return void await (0,l.loadImage)(e);e.loading=!0;try{e.gifData=await u(e.source),e.gifLoopCount=function(e){for(let t of e.applicationExtensions)if(t.identifier+t.authenticationCode==="NETSCAPE2.0")return t.data[1]+(t.data[2]<<8);return NaN}(e.gifData),e.gifLoopCount||(e.gifLoopCount=1/0)}catch{e.error=!0}e.loading=!1}(i=n||(n={}))[i.Replace=0]="Replace",i[i.Combine=1]="Combine",i[i.RestoreBackground=2]="RestoreBackground",i[i.RestorePrevious=3]="RestorePrevious",i[i.UndefinedA=4]="UndefinedA",i[i.UndefinedB=5]="UndefinedB",i[i.UndefinedC=6]="UndefinedC",i[i.UndefinedD=7]="UndefinedD",(o=r||(r={}))[o.Extension=33]="Extension",o[o.ApplicationExtension=255]="ApplicationExtension",o[o.GraphicsControlExtension=249]="GraphicsControlExtension",o[o.PlainTextExtension=1]="PlainTextExtension",o[o.CommentExtension=254]="CommentExtension",o[o.Image=44]="Image",o[o.EndOfFile=59]="EndOfFile"}}]);
+"use strict";(this.webpackChunk_tsparticles_shape_image=this.webpackChunk_tsparticles_shape_image||[]).push([[423,763],{423(e,t,a){a.d(t,{ImageDrawer:()=>r});var i=a(303),o=a(694),n=a(763);class r{_engine;constructor(e){this._engine=e}addImage(e){this._engine.images??=[],this._engine.images.push(e)}draw(e){let{context:t,radius:a,particle:o,opacity:r}=e,l=o.image,s=l?.element;if(l){if(t.globalAlpha=r,l.gif&&l.gifData)(0,n.zS)(e,o.container.canvas.settings);else if(s){let e=l.ratio,o={x:-a,y:-a},n=a*i.double;t.drawImage(s,o.x,o.y,n,n/e)}t.globalAlpha=i.defaultAlpha}}getSidesCount(){return 12}async init(e){let t=e.actualOptions;if(t.preload&&this._engine.loadImage)for(let e of t.preload)await this._engine.loadImage(e)}loadShape(e){if(!e.shape||!o.z.includes(e.shape))return;let t=e.shapeData;!t||(this._engine.images??=[],this._engine.images.find(e=>e.name===t.name||e.source===t.src)||this.loadImageShape(t).then(()=>{this.loadShape(e)}))}particleInit(e,t){if("image"!==t.shape&&"images"!==t.shape)return;this._engine.images??=[];let a=this._engine.images,n=t.shapeData;if(!n)return;let r=t.getFillColor(),l=a.find(e=>e.name===n.name||e.source===n.src);if(!l)return;let s=n.replaceColor;l.loading?setTimeout(()=>{this.particleInit(e,t)}):(async()=>{let a;(a=l.svgData&&r?await (0,o.d)(l,n,r,t,e.hdr):{color:r,data:l,element:l.element,gif:l.gif,gifData:l.gifData,gifLoopCount:l.gifLoopCount,loaded:!0,ratio:n.width&&n.height?n.width/n.height:l.ratio??i.defaultRatio,replaceColor:s,source:n.src}).ratio||(a.ratio=1);let h=n.fill??t.shapeFill,g=n.close??t.shapeClose;t.image=a,t.shapeFill=h,t.shapeClose=g})()}loadImageShape=async e=>{if(!this._engine.loadImage)throw Error("Image shape not initialized");await this._engine.loadImage({gif:e.gif,name:e.name,replaceColor:e.replaceColor,src:e.src})}}},763(e,t,a){a.d(t,{zS:()=>w,loadGifImage:()=>x});var i,o,n,r,l=a(694),s=a(303);let h=[0,4,2,1],g=[8,8,4,2];class d{data;pos;constructor(e){this.pos=0,this.data=new Uint8ClampedArray(e)}getString(e){let t=this.data.slice(this.pos,this.pos+e);return this.pos+=t.length,t.reduce((e,t)=>e+String.fromCharCode(t),"")}nextByte(){return this.data[this.pos++]}nextTwoBytes(){return this.pos+=2,this.data[this.pos-2]+(this.data[this.pos-1]<<8)}readSubBlocks(){let e="",t=0;do{t=this.data[this.pos++];for(let a=t;--a>=0;e+=String.fromCharCode(this.data[this.pos++]));}while(0!==t)return e}readSubBlocksBin(){let e=this.data[this.pos],t=0;for(let a=0;0!==e;a+=e+1,e=this.data[this.pos+a])t+=e;let a=new Uint8Array(t);e=this.data[this.pos++];for(let t=0;0!==e;e=this.data[this.pos++])for(let i=e;--i>=0;a[t++]=this.data[this.pos++]);return a}skipSubBlocks(){for(;0!==this.data[this.pos];this.pos+=this.data[this.pos]+1);this.pos++}}function f(e,t){let a=[];for(let i=0;i<t;i++)a.push({r:e.data[e.pos],g:e.data[e.pos+1],b:e.data[e.pos+2]}),e.pos+=3;return a}function c(e,t,a){let i=t>>>3,o=7&t;return(e[i]+(e[i+1]<<8)+(e[i+2]<<16)&(1<<a)-1<<o)>>>o}async function p(e,t,a,i,o,n,r){let l=t.frames[i(!0)];l.left=e.nextTwoBytes(),l.top=e.nextTwoBytes(),l.width=e.nextTwoBytes(),l.height=e.nextTwoBytes();let s=e.nextByte(),d=(128&s)==128;l.sortFlag=(32&s)==32,l.reserved=(24&s)>>>3,d&&(l.localColorTable=f(e,1<<(7&s)+1));let p=e=>{let{r:i,g:n,b:r}=(d?l.localColorTable:t.globalColorTable)[e];return e!==o(null)?{r:i,g:n,b:r,a:255}:{r:i,g:n,b:r,a:a?Math.trunc((i+n+r)/3):0}},m=(()=>{try{return new ImageData(l.width,l.height,n)}catch(e){if(e instanceof DOMException&&"IndexSizeError"===e.name)return null;throw e}})();if(null==m)throw EvalError("GIF frame size is to large");let u=e.nextByte(),w=e.readSubBlocksBin(),x=1<<u;if((64&s)==64){for(let a=0,o=u+1,n=0,s=[[0]],d=0;d<4;d++){if(h[d]<l.height){let e=0,t=0,i=!1;for(;!i;){let r=a;if(a=c(w,n,o),n+=o+1,a===x){o=u+1,s.length=x+2;for(let e=0;e<s.length;e++)s[e]=e<x?[e]:[]}else{for(let i of(a>=s.length?s.push(s[r].concat(s[r][0])):r!==x&&s.push(s[r].concat(s[a][0])),s[a])){let{r:a,g:o,b:n,a:r}=p(i);m.data.set([a,o,n,r],h[d]*l.width+g[d]*t+e%(4*l.width)),e+=4}s.length===1<<o&&o<12&&o++}e===4*l.width*(t+1)&&(t++,h[d]+g[d]*t>=l.height&&(i=!0))}}r?.(e.pos/(e.data.length-1),i(!1)+1,m,{x:l.left,y:l.top},{width:t.width,height:t.height})}l.image=m,l.bitmap=await createImageBitmap(m)}else{let a=0,o=u+1,n=0,s=-4,h=[[0]];for(;;){let e=a;if(a=c(w,n,o),n+=o,a===x){o=u+1,h.length=x+2;for(let e=0;e<h.length;e++)h[e]=e<x?[e]:[]}else{if(a===x+1)break;for(let t of(a>=h.length?h.push(h[e].concat(h[e][0])):e!==x&&h.push(h[e].concat(h[a][0])),h[a])){let{r:e,g:a,b:i,a:o}=p(t);s+=4,m.data.set([e,a,i,o],s)}h.length>=1<<o&&o<12&&o++}}l.image=m,l.bitmap=await createImageBitmap(m),r?.((e.pos+1)/e.data.length,i(!1)+1,l.image,{x:l.left,y:l.top},{width:t.width,height:t.height})}}async function m(e,t,a,i,o,n,l){switch(e.nextByte()){case r.EndOfFile:return!0;case r.Image:await p(e,t,a,i,o,n,l);break;case r.Extension:switch(e.nextByte()){case r.GraphicsControlExtension:{let a=t.frames[i(!1)];e.pos++;let n=e.nextByte();a.GCreserved=(224&n)>>>5,a.disposalMethod=(28&n)>>>2,a.userInputDelayFlag=(2&n)==2,a.delayTime=10*e.nextTwoBytes();let r=e.nextByte();(1&n)==1&&o(r),e.pos++;break}case r.ApplicationExtension:{e.pos++;let a={identifier:e.getString(8),authenticationCode:e.getString(3),data:e.readSubBlocksBin()};t.applicationExtensions.push(a);break}case r.CommentExtension:t.comments.push([i(!1),e.readSubBlocks()]);break;case r.PlainTextExtension:if(0===t.globalColorTable.length)throw EvalError("plain text extension without global color table");e.pos++,t.frames[i(!1)].plainTextData={left:e.nextTwoBytes(),top:e.nextTwoBytes(),width:e.nextTwoBytes(),height:e.nextTwoBytes(),charSize:{width:e.nextTwoBytes(),height:e.nextTwoBytes()},foregroundColor:e.nextByte(),backgroundColor:e.nextByte(),text:e.readSubBlocks()};break;default:e.skipSubBlocks()}break;default:throw EvalError("undefined block found")}return!1}async function u(e,t,a,i){i??=!1;let o=await fetch(e);if(!o.ok&&404===o.status)throw EvalError("file not found");let r=await o.arrayBuffer(),l={width:0,height:0,totalTime:0,colorRes:0,pixelAspectRatio:0,frames:[],sortFlag:!1,globalColorTable:[],backgroundImage:new ImageData(1,1,t),comments:[],applicationExtensions:[]},s=new d(new Uint8ClampedArray(r));if("GIF89a"!==s.getString(6))throw Error("not a supported GIF file");l.width=s.nextTwoBytes(),l.height=s.nextTwoBytes();let h=s.nextByte(),g=(128&h)==128;l.colorRes=(112&h)>>>4,l.sortFlag=(8&h)==8;let c=s.nextByte();l.pixelAspectRatio=s.nextByte(),0!==l.pixelAspectRatio&&(l.pixelAspectRatio=(l.pixelAspectRatio+15)/64),g&&(l.globalColorTable=f(s,1<<(7&h)+1));let p=(()=>{try{return new ImageData(l.width,l.height,t)}catch(e){if(e instanceof DOMException&&"IndexSizeError"===e.name)return null;throw e}})();if(null==p)throw Error("GIF frame size is to large");let{r:u,g:w,b:x}=l.globalColorTable[c];p.data.set(g?[u,w,x,255]:[0,0,0,0]);for(let e=4;e<p.data.length;e*=2)p.data.copyWithin(e,0,e);l.backgroundImage=p;let y=-1,b=!0,C=-1,I=e=>(e&&(b=!0),y),B=e=>(null!=e&&(C=e),C);try{do b&&(l.frames.push({left:0,top:0,width:0,height:0,disposalMethod:n.Replace,image:new ImageData(1,1,t),plainTextData:null,userInputDelayFlag:!1,delayTime:0,sortFlag:!1,localColorTable:[],reserved:0,GCreserved:0}),y++,C=-1,b=!1);while(!await m(s,l,i,I,B,t,a))for(let e of(l.frames.length--,l.frames)){if(e.userInputDelayFlag&&0===e.delayTime){l.totalTime=1/0;break}l.totalTime+=e.delayTime}return l}catch(e){if(e instanceof EvalError)throw Error(`error while parsing frame ${y.toString()} "${e.message}"`);throw e}}function w(e,t){let{context:a,radius:i,particle:o,delta:r}=e,l=o.image;if(!l?.gifData||!l.gif)return;let h=new OffscreenCanvas(l.gifData.width,l.gifData.height),g=h.getContext("2d",t);if(!g)throw Error("could not create offscreen canvas context");g.imageSmoothingQuality="low",g.imageSmoothingEnabled=!1,g.clearRect(s.originPoint.x,s.originPoint.y,h.width,h.height),o.gifLoopCount??=l.gifLoopCount??0;let d=o.gifFrame??0,f={x:-l.gifData.width*s.half,y:-l.gifData.height*s.half},c=l.gifData.frames[d];if(o.gifTime??=0,c.bitmap){switch(a.scale(i/l.gifData.width,i/l.gifData.height),c.disposalMethod){case n.UndefinedA:case n.UndefinedB:case n.UndefinedC:case n.UndefinedD:case n.Replace:g.drawImage(c.bitmap,c.left,c.top),a.drawImage(h,f.x,f.y),g.clearRect(s.originPoint.x,s.originPoint.y,h.width,h.height);break;case n.Combine:g.drawImage(c.bitmap,c.left,c.top),a.drawImage(h,f.x,f.y);break;case n.RestoreBackground:g.drawImage(c.bitmap,c.left,c.top),a.drawImage(h,f.x,f.y),g.clearRect(s.originPoint.x,s.originPoint.y,h.width,h.height),l.gifData.globalColorTable.length?g.putImageData(l.gifData.backgroundImage,f.x,f.y):g.putImageData(l.gifData.frames[0].image,f.x+c.left,f.y+c.top);break;case n.RestorePrevious:{let e=g.getImageData(s.originPoint.x,s.originPoint.y,h.width,h.height);g.drawImage(c.bitmap,c.left,c.top),a.drawImage(h,f.x,f.y),g.clearRect(s.originPoint.x,s.originPoint.y,h.width,h.height),g.putImageData(e,s.originPoint.x,s.originPoint.y)}}if(o.gifTime+=r.value,o.gifTime>c.delayTime){if(o.gifTime-=c.delayTime,++d>=l.gifData.frames.length){if(--o.gifLoopCount<=0)return;d=0,g.clearRect(s.originPoint.x,s.originPoint.y,h.width,h.height)}o.gifFrame=d}a.scale(l.gifData.width/i,l.gifData.height/i)}}async function x(e,t){if("gif"!==e.type)return void await (0,l.loadImage)(e);e.loading=!0;try{e.gifData=await u(e.source,t),e.gifLoopCount=function(e){for(let t of e.applicationExtensions)if(t.identifier+t.authenticationCode==="NETSCAPE2.0")return t.data[1]+(t.data[2]<<8);return NaN}(e.gifData),e.gifLoopCount||(e.gifLoopCount=1/0)}catch{e.error=!0}e.loading=!1}(i=n||(n={}))[i.Replace=0]="Replace",i[i.Combine=1]="Combine",i[i.RestoreBackground=2]="RestoreBackground",i[i.RestorePrevious=3]="RestorePrevious",i[i.UndefinedA=4]="UndefinedA",i[i.UndefinedB=5]="UndefinedB",i[i.UndefinedC=6]="UndefinedC",i[i.UndefinedD=7]="UndefinedD",(o=r||(r={}))[o.Extension=33]="Extension",o[o.ApplicationExtension=255]="ApplicationExtension",o[o.GraphicsControlExtension=249]="GraphicsControlExtension",o[o.PlainTextExtension=1]="PlainTextExtension",o[o.CommentExtension=254]="CommentExtension",o[o.Image=44]="Image",o[o.EndOfFile=59]="EndOfFile"}}]);

package/763.min.js

@@ -1 +1 @@
-"use strict";(this.webpackChunk_tsparticles_shape_image=this.webpackChunk_tsparticles_shape_image||[]).push([[763],{763(t,e,a){a.d(e,{zS:()=>w,loadGifImage:()=>x});var i,o,n,r,l=a(694),s=a(303);let h=[0,4,2,1],g=[8,8,4,2];class d{data;pos;constructor(t){this.pos=0,this.data=new Uint8ClampedArray(t)}getString(t){let e=this.data.slice(this.pos,this.pos+t);return this.pos+=e.length,e.reduce((t,e)=>t+String.fromCharCode(e),"")}nextByte(){return this.data[this.pos++]}nextTwoBytes(){return this.pos+=2,this.data[this.pos-2]+(this.data[this.pos-1]<<8)}readSubBlocks(){let t="",e=0;do{e=this.data[this.pos++];for(let a=e;--a>=0;t+=String.fromCodePoint(this.data[this.pos++]));}while(0!==e)return t}readSubBlocksBin(){let t=this.data[this.pos],e=0;for(let a=0;0!==t;a+=t+1,t=this.data[this.pos+a])e+=t;let a=new Uint8Array(e);t=this.data[this.pos++];for(let e=0;0!==t;t=this.data[this.pos++])for(let i=t;--i>=0;a[e++]=this.data[this.pos++]);return a}skipSubBlocks(){for(;0!==this.data[this.pos];this.pos+=this.data[this.pos]+1);this.pos++}}function f(t,e){let a=[];for(let i=0;i<e;i++)a.push({r:t.data[t.pos],g:t.data[t.pos+1],b:t.data[t.pos+2]}),t.pos+=3;return a}function c(t,e,a){let i=e>>>3,o=7&e;return(t[i]+(t[i+1]<<8)+(t[i+2]<<16)&(1<<a)-1<<o)>>>o}async function p(t,e,a,i,o,n){let r=e.frames[i(!0)];r.left=t.nextTwoBytes(),r.top=t.nextTwoBytes(),r.width=t.nextTwoBytes(),r.height=t.nextTwoBytes();let l=t.nextByte(),s=(128&l)==128;r.sortFlag=(32&l)==32,r.reserved=(24&l)>>>3,s&&(r.localColorTable=f(t,1<<(7&l)+1));let d=t=>{let{r:i,g:n,b:l}=(s?r.localColorTable:e.globalColorTable)[t];return t!==o(null)?{r:i,g:n,b:l,a:255}:{r:i,g:n,b:l,a:a?Math.trunc((i+n+l)/3):0}},p=(()=>{try{return new ImageData(r.width,r.height,{colorSpace:"srgb"})}catch(t){if(t instanceof DOMException&&"IndexSizeError"===t.name)return null;throw t}})();if(null==p)throw EvalError("GIF frame size is to large");let u=t.nextByte(),m=t.readSubBlocksBin(),w=1<<u;if((64&l)==64){for(let a=0,o=u+1,l=0,s=[[0]],f=0;f<4;f++){if(h[f]<r.height){let t=0,e=0,i=!1;for(;!i;){let n=a;if(a=c(m,l,o),l+=o+1,a===w){o=u+1,s.length=w+2;for(let t=0;t<s.length;t++)s[t]=t<w?[t]:[]}else{for(let i of(a>=s.length?s.push(s[n].concat(s[n][0])):n!==w&&s.push(s[n].concat(s[a][0])),s[a])){let{r:a,g:o,b:n,a:l}=d(i);p.data.set([a,o,n,l],h[f]*r.width+g[f]*e+t%(4*r.width)),t+=4}s.length===1<<o&&o<12&&o++}t===4*r.width*(e+1)&&(e++,h[f]+g[f]*e>=r.height&&(i=!0))}}n?.(t.pos/(t.data.length-1),i(!1)+1,p,{x:r.left,y:r.top},{width:e.width,height:e.height})}r.image=p,r.bitmap=await createImageBitmap(p)}else{let a=0,o=u+1,l=0,s=-4,h=[[0]];for(;;){let t=a;if(a=c(m,l,o),l+=o,a===w){o=u+1,h.length=w+2;for(let t=0;t<h.length;t++)h[t]=t<w?[t]:[]}else{if(a===w+1)break;for(let e of(a>=h.length?h.push(h[t].concat(h[t][0])):t!==w&&h.push(h[t].concat(h[a][0])),h[a])){let{r:t,g:a,b:i,a:o}=d(e);p.data.set([t,a,i,o],s),s+=4}h.length>=1<<o&&o<12&&o++}}r.image=p,r.bitmap=await createImageBitmap(p),n?.((t.pos+1)/t.data.length,i(!1)+1,r.image,{x:r.left,y:r.top},{width:e.width,height:e.height})}}async function u(t,e,a,i,o,n){switch(t.nextByte()){case r.EndOfFile:return!0;case r.Image:await p(t,e,a,i,o,n);break;case r.Extension:switch(t.nextByte()){case r.GraphicsControlExtension:{let a=e.frames[i(!1)];t.pos++;let n=t.nextByte();a.GCreserved=(224&n)>>>5,a.disposalMethod=(28&n)>>>2,a.userInputDelayFlag=(2&n)==2,a.delayTime=10*t.nextTwoBytes();let r=t.nextByte();(1&n)==1&&o(r),t.pos++;break}case r.ApplicationExtension:{t.pos++;let a={identifier:t.getString(8),authenticationCode:t.getString(3),data:t.readSubBlocksBin()};e.applicationExtensions.push(a);break}case r.CommentExtension:e.comments.push([i(!1),t.readSubBlocks()]);break;case r.PlainTextExtension:if(0===e.globalColorTable.length)throw EvalError("plain text extension without global color table");t.pos++,e.frames[i(!1)].plainTextData={left:t.nextTwoBytes(),top:t.nextTwoBytes(),width:t.nextTwoBytes(),height:t.nextTwoBytes(),charSize:{width:t.nextTwoBytes(),height:t.nextTwoBytes()},foregroundColor:t.nextByte(),backgroundColor:t.nextByte(),text:t.readSubBlocks()};break;default:t.skipSubBlocks()}break;default:throw EvalError("undefined block found")}return!1}async function m(t,e,a){a??=!1;let i=await fetch(t);if(!i.ok&&404===i.status)throw EvalError("file not found");let o=await i.arrayBuffer(),r={width:0,height:0,totalTime:0,colorRes:0,pixelAspectRatio:0,frames:[],sortFlag:!1,globalColorTable:[],backgroundImage:new ImageData(1,1,{colorSpace:"srgb"}),comments:[],applicationExtensions:[]},l=new d(new Uint8ClampedArray(o));if("GIF89a"!==l.getString(6))throw Error("not a supported GIF file");r.width=l.nextTwoBytes(),r.height=l.nextTwoBytes();let s=l.nextByte(),h=(128&s)==128;r.colorRes=(112&s)>>>4,r.sortFlag=(8&s)==8;let g=l.nextByte();r.pixelAspectRatio=l.nextByte(),0!==r.pixelAspectRatio&&(r.pixelAspectRatio=(r.pixelAspectRatio+15)/64),h&&(r.globalColorTable=f(l,1<<(7&s)+1));let c=(()=>{try{return new ImageData(r.width,r.height,{colorSpace:"srgb"})}catch(t){if(t instanceof DOMException&&"IndexSizeError"===t.name)return null;throw t}})();if(null==c)throw Error("GIF frame size is to large");let{r:p,g:m,b:w}=r.globalColorTable[g];c.data.set(h?[p,m,w,255]:[0,0,0,0]);for(let t=4;t<c.data.length;t*=2)c.data.copyWithin(t,0,t);r.backgroundImage=c;let x=-1,y=!0,b=-1,B=t=>(t&&(y=!0),x),C=t=>(null!=t&&(b=t),b);try{do y&&(r.frames.push({left:0,top:0,width:0,height:0,disposalMethod:n.Replace,image:new ImageData(1,1,{colorSpace:"srgb"}),plainTextData:null,userInputDelayFlag:!1,delayTime:0,sortFlag:!1,localColorTable:[],reserved:0,GCreserved:0}),x++,b=-1,y=!1);while(!await u(l,r,a,B,C,e))for(let t of(r.frames.length--,r.frames)){if(t.userInputDelayFlag&&0===t.delayTime){r.totalTime=1/0;break}r.totalTime+=t.delayTime}return r}catch(t){if(t instanceof EvalError)throw Error(`error while parsing frame ${x.toString()} "${t.message}"`);throw t}}function w(t,e){let{context:a,radius:i,particle:o,delta:r}=t,l=o.image;if(!l?.gifData||!l.gif)return;let h=new OffscreenCanvas(l.gifData.width,l.gifData.height),g=h.getContext("2d",e);if(!g)throw Error("could not create offscreen canvas context");g.imageSmoothingQuality="low",g.imageSmoothingEnabled=!1,g.clearRect(s.originPoint.x,s.originPoint.y,h.width,h.height),o.gifLoopCount??=l.gifLoopCount??0;let d=o.gifFrame??0,f={x:-l.gifData.width*s.half,y:-l.gifData.height*s.half},c=l.gifData.frames[d];if(o.gifTime??=0,c.bitmap){switch(a.scale(i/l.gifData.width,i/l.gifData.height),c.disposalMethod){case n.UndefinedA:case n.UndefinedB:case n.UndefinedC:case n.UndefinedD:case n.Replace:g.drawImage(c.bitmap,c.left,c.top),a.drawImage(h,f.x,f.y),g.clearRect(s.originPoint.x,s.originPoint.y,h.width,h.height);break;case n.Combine:g.drawImage(c.bitmap,c.left,c.top),a.drawImage(h,f.x,f.y);break;case n.RestoreBackground:g.drawImage(c.bitmap,c.left,c.top),a.drawImage(h,f.x,f.y),g.clearRect(s.originPoint.x,s.originPoint.y,h.width,h.height),l.gifData.globalColorTable.length?g.putImageData(l.gifData.backgroundImage,f.x,f.y):g.putImageData(l.gifData.frames[0].image,f.x+c.left,f.y+c.top);break;case n.RestorePrevious:{let t=g.getImageData(s.originPoint.x,s.originPoint.y,h.width,h.height);g.drawImage(c.bitmap,c.left,c.top),a.drawImage(h,f.x,f.y),g.clearRect(s.originPoint.x,s.originPoint.y,h.width,h.height),g.putImageData(t,s.originPoint.x,s.originPoint.y)}}if(o.gifTime+=r.value,o.gifTime>c.delayTime){if(o.gifTime-=c.delayTime,++d>=l.gifData.frames.length){if(--o.gifLoopCount<=0)return;d=0,g.clearRect(s.originPoint.x,s.originPoint.y,h.width,h.height)}o.gifFrame=d}a.scale(l.gifData.width/i,l.gifData.height/i)}}async function x(t){if("gif"!==t.type)return void await (0,l.loadImage)(t);t.loading=!0;try{t.gifData=await m(t.source),t.gifLoopCount=function(t){for(let e of t.applicationExtensions)if(e.identifier+e.authenticationCode==="NETSCAPE2.0")return e.data[1]+(e.data[2]<<8);return NaN}(t.gifData),t.gifLoopCount||(t.gifLoopCount=1/0)}catch{t.error=!0}t.loading=!1}(i=n||(n={}))[i.Replace=0]="Replace",i[i.Combine=1]="Combine",i[i.RestoreBackground=2]="RestoreBackground",i[i.RestorePrevious=3]="RestorePrevious",i[i.UndefinedA=4]="UndefinedA",i[i.UndefinedB=5]="UndefinedB",i[i.UndefinedC=6]="UndefinedC",i[i.UndefinedD=7]="UndefinedD",(o=r||(r={}))[o.Extension=33]="Extension",o[o.ApplicationExtension=255]="ApplicationExtension",o[o.GraphicsControlExtension=249]="GraphicsControlExtension",o[o.PlainTextExtension=1]="PlainTextExtension",o[o.CommentExtension=254]="CommentExtension",o[o.Image=44]="Image",o[o.EndOfFile=59]="EndOfFile"}}]);
+"use strict";(this.webpackChunk_tsparticles_shape_image=this.webpackChunk_tsparticles_shape_image||[]).push([[763],{763(t,e,a){a.d(e,{zS:()=>w,loadGifImage:()=>x});var i,o,n,r,l=a(694),s=a(303);let h=[0,4,2,1],g=[8,8,4,2];class d{data;pos;constructor(t){this.pos=0,this.data=new Uint8ClampedArray(t)}getString(t){let e=this.data.slice(this.pos,this.pos+t);return this.pos+=e.length,e.reduce((t,e)=>t+String.fromCharCode(e),"")}nextByte(){return this.data[this.pos++]}nextTwoBytes(){return this.pos+=2,this.data[this.pos-2]+(this.data[this.pos-1]<<8)}readSubBlocks(){let t="",e=0;do{e=this.data[this.pos++];for(let a=e;--a>=0;t+=String.fromCharCode(this.data[this.pos++]));}while(0!==e)return t}readSubBlocksBin(){let t=this.data[this.pos],e=0;for(let a=0;0!==t;a+=t+1,t=this.data[this.pos+a])e+=t;let a=new Uint8Array(e);t=this.data[this.pos++];for(let e=0;0!==t;t=this.data[this.pos++])for(let i=t;--i>=0;a[e++]=this.data[this.pos++]);return a}skipSubBlocks(){for(;0!==this.data[this.pos];this.pos+=this.data[this.pos]+1);this.pos++}}function f(t,e){let a=[];for(let i=0;i<e;i++)a.push({r:t.data[t.pos],g:t.data[t.pos+1],b:t.data[t.pos+2]}),t.pos+=3;return a}function c(t,e,a){let i=e>>>3,o=7&e;return(t[i]+(t[i+1]<<8)+(t[i+2]<<16)&(1<<a)-1<<o)>>>o}async function p(t,e,a,i,o,n,r){let l=e.frames[i(!0)];l.left=t.nextTwoBytes(),l.top=t.nextTwoBytes(),l.width=t.nextTwoBytes(),l.height=t.nextTwoBytes();let s=t.nextByte(),d=(128&s)==128;l.sortFlag=(32&s)==32,l.reserved=(24&s)>>>3,d&&(l.localColorTable=f(t,1<<(7&s)+1));let p=t=>{let{r:i,g:n,b:r}=(d?l.localColorTable:e.globalColorTable)[t];return t!==o(null)?{r:i,g:n,b:r,a:255}:{r:i,g:n,b:r,a:a?Math.trunc((i+n+r)/3):0}},u=(()=>{try{return new ImageData(l.width,l.height,n)}catch(t){if(t instanceof DOMException&&"IndexSizeError"===t.name)return null;throw t}})();if(null==u)throw EvalError("GIF frame size is to large");let m=t.nextByte(),w=t.readSubBlocksBin(),x=1<<m;if((64&s)==64){for(let a=0,o=m+1,n=0,s=[[0]],d=0;d<4;d++){if(h[d]<l.height){let t=0,e=0,i=!1;for(;!i;){let r=a;if(a=c(w,n,o),n+=o+1,a===x){o=m+1,s.length=x+2;for(let t=0;t<s.length;t++)s[t]=t<x?[t]:[]}else{for(let i of(a>=s.length?s.push(s[r].concat(s[r][0])):r!==x&&s.push(s[r].concat(s[a][0])),s[a])){let{r:a,g:o,b:n,a:r}=p(i);u.data.set([a,o,n,r],h[d]*l.width+g[d]*e+t%(4*l.width)),t+=4}s.length===1<<o&&o<12&&o++}t===4*l.width*(e+1)&&(e++,h[d]+g[d]*e>=l.height&&(i=!0))}}r?.(t.pos/(t.data.length-1),i(!1)+1,u,{x:l.left,y:l.top},{width:e.width,height:e.height})}l.image=u,l.bitmap=await createImageBitmap(u)}else{let a=0,o=m+1,n=0,s=-4,h=[[0]];for(;;){let t=a;if(a=c(w,n,o),n+=o,a===x){o=m+1,h.length=x+2;for(let t=0;t<h.length;t++)h[t]=t<x?[t]:[]}else{if(a===x+1)break;for(let e of(a>=h.length?h.push(h[t].concat(h[t][0])):t!==x&&h.push(h[t].concat(h[a][0])),h[a])){let{r:t,g:a,b:i,a:o}=p(e);s+=4,u.data.set([t,a,i,o],s)}h.length>=1<<o&&o<12&&o++}}l.image=u,l.bitmap=await createImageBitmap(u),r?.((t.pos+1)/t.data.length,i(!1)+1,l.image,{x:l.left,y:l.top},{width:e.width,height:e.height})}}async function u(t,e,a,i,o,n,l){switch(t.nextByte()){case r.EndOfFile:return!0;case r.Image:await p(t,e,a,i,o,n,l);break;case r.Extension:switch(t.nextByte()){case r.GraphicsControlExtension:{let a=e.frames[i(!1)];t.pos++;let n=t.nextByte();a.GCreserved=(224&n)>>>5,a.disposalMethod=(28&n)>>>2,a.userInputDelayFlag=(2&n)==2,a.delayTime=10*t.nextTwoBytes();let r=t.nextByte();(1&n)==1&&o(r),t.pos++;break}case r.ApplicationExtension:{t.pos++;let a={identifier:t.getString(8),authenticationCode:t.getString(3),data:t.readSubBlocksBin()};e.applicationExtensions.push(a);break}case r.CommentExtension:e.comments.push([i(!1),t.readSubBlocks()]);break;case r.PlainTextExtension:if(0===e.globalColorTable.length)throw EvalError("plain text extension without global color table");t.pos++,e.frames[i(!1)].plainTextData={left:t.nextTwoBytes(),top:t.nextTwoBytes(),width:t.nextTwoBytes(),height:t.nextTwoBytes(),charSize:{width:t.nextTwoBytes(),height:t.nextTwoBytes()},foregroundColor:t.nextByte(),backgroundColor:t.nextByte(),text:t.readSubBlocks()};break;default:t.skipSubBlocks()}break;default:throw EvalError("undefined block found")}return!1}async function m(t,e,a,i){i??=!1;let o=await fetch(t);if(!o.ok&&404===o.status)throw EvalError("file not found");let r=await o.arrayBuffer(),l={width:0,height:0,totalTime:0,colorRes:0,pixelAspectRatio:0,frames:[],sortFlag:!1,globalColorTable:[],backgroundImage:new ImageData(1,1,e),comments:[],applicationExtensions:[]},s=new d(new Uint8ClampedArray(r));if("GIF89a"!==s.getString(6))throw Error("not a supported GIF file");l.width=s.nextTwoBytes(),l.height=s.nextTwoBytes();let h=s.nextByte(),g=(128&h)==128;l.colorRes=(112&h)>>>4,l.sortFlag=(8&h)==8;let c=s.nextByte();l.pixelAspectRatio=s.nextByte(),0!==l.pixelAspectRatio&&(l.pixelAspectRatio=(l.pixelAspectRatio+15)/64),g&&(l.globalColorTable=f(s,1<<(7&h)+1));let p=(()=>{try{return new ImageData(l.width,l.height,e)}catch(t){if(t instanceof DOMException&&"IndexSizeError"===t.name)return null;throw t}})();if(null==p)throw Error("GIF frame size is to large");let{r:m,g:w,b:x}=l.globalColorTable[c];p.data.set(g?[m,w,x,255]:[0,0,0,0]);for(let t=4;t<p.data.length;t*=2)p.data.copyWithin(t,0,t);l.backgroundImage=p;let y=-1,b=!0,B=-1,C=t=>(t&&(b=!0),y),E=t=>(null!=t&&(B=t),B);try{do b&&(l.frames.push({left:0,top:0,width:0,height:0,disposalMethod:n.Replace,image:new ImageData(1,1,e),plainTextData:null,userInputDelayFlag:!1,delayTime:0,sortFlag:!1,localColorTable:[],reserved:0,GCreserved:0}),y++,B=-1,b=!1);while(!await u(s,l,i,C,E,e,a))for(let t of(l.frames.length--,l.frames)){if(t.userInputDelayFlag&&0===t.delayTime){l.totalTime=1/0;break}l.totalTime+=t.delayTime}return l}catch(t){if(t instanceof EvalError)throw Error(`error while parsing frame ${y.toString()} "${t.message}"`);throw t}}function w(t,e){let{context:a,radius:i,particle:o,delta:r}=t,l=o.image;if(!l?.gifData||!l.gif)return;let h=new OffscreenCanvas(l.gifData.width,l.gifData.height),g=h.getContext("2d",e);if(!g)throw Error("could not create offscreen canvas context");g.imageSmoothingQuality="low",g.imageSmoothingEnabled=!1,g.clearRect(s.originPoint.x,s.originPoint.y,h.width,h.height),o.gifLoopCount??=l.gifLoopCount??0;let d=o.gifFrame??0,f={x:-l.gifData.width*s.half,y:-l.gifData.height*s.half},c=l.gifData.frames[d];if(o.gifTime??=0,c.bitmap){switch(a.scale(i/l.gifData.width,i/l.gifData.height),c.disposalMethod){case n.UndefinedA:case n.UndefinedB:case n.UndefinedC:case n.UndefinedD:case n.Replace:g.drawImage(c.bitmap,c.left,c.top),a.drawImage(h,f.x,f.y),g.clearRect(s.originPoint.x,s.originPoint.y,h.width,h.height);break;case n.Combine:g.drawImage(c.bitmap,c.left,c.top),a.drawImage(h,f.x,f.y);break;case n.RestoreBackground:g.drawImage(c.bitmap,c.left,c.top),a.drawImage(h,f.x,f.y),g.clearRect(s.originPoint.x,s.originPoint.y,h.width,h.height),l.gifData.globalColorTable.length?g.putImageData(l.gifData.backgroundImage,f.x,f.y):g.putImageData(l.gifData.frames[0].image,f.x+c.left,f.y+c.top);break;case n.RestorePrevious:{let t=g.getImageData(s.originPoint.x,s.originPoint.y,h.width,h.height);g.drawImage(c.bitmap,c.left,c.top),a.drawImage(h,f.x,f.y),g.clearRect(s.originPoint.x,s.originPoint.y,h.width,h.height),g.putImageData(t,s.originPoint.x,s.originPoint.y)}}if(o.gifTime+=r.value,o.gifTime>c.delayTime){if(o.gifTime-=c.delayTime,++d>=l.gifData.frames.length){if(--o.gifLoopCount<=0)return;d=0,g.clearRect(s.originPoint.x,s.originPoint.y,h.width,h.height)}o.gifFrame=d}a.scale(l.gifData.width/i,l.gifData.height/i)}}async function x(t,e){if("gif"!==t.type)return void await (0,l.loadImage)(t);t.loading=!0;try{t.gifData=await m(t.source,e),t.gifLoopCount=function(t){for(let e of t.applicationExtensions)if(e.identifier+e.authenticationCode==="NETSCAPE2.0")return e.data[1]+(e.data[2]<<8);return NaN}(t.gifData),t.gifLoopCount||(t.gifLoopCount=1/0)}catch{t.error=!0}t.loading=!1}(i=n||(n={}))[i.Replace=0]="Replace",i[i.Combine=1]="Combine",i[i.RestoreBackground=2]="RestoreBackground",i[i.RestorePrevious=3]="RestorePrevious",i[i.UndefinedA=4]="UndefinedA",i[i.UndefinedB=5]="UndefinedB",i[i.UndefinedC=6]="UndefinedC",i[i.UndefinedD=7]="UndefinedD",(o=r||(r={}))[o.Extension=33]="Extension",o[o.ApplicationExtension=255]="ApplicationExtension",o[o.GraphicsControlExtension=249]="GraphicsControlExtension",o[o.PlainTextExtension=1]="PlainTextExtension",o[o.CommentExtension=254]="CommentExtension",o[o.Image=44]="Image",o[o.EndOfFile=59]="EndOfFile"}}]);

package/browser/GifUtils/ByteStream.js

@@ -23,7 +23,7 @@ export class ByteStream {
         const minCount = 0, emptySize = 0;
         do {
             size = this.data[this.pos++];
-            for (let count = size; --count >= minCount; blockString += String.fromCodePoint(this.data[this.pos++])) {
+            for (let count = size; --count >= minCount; blockString += String.fromCharCode(this.data[this.pos++])) {
             }
         } while (size !== emptySize);
         return blockString;

package/browser/GifUtils/Utils.js

@@ -80,7 +80,7 @@ function readBits(imageData, pos, len) {
         (((1 << len) - 1) << bitPos)) >>>
         bitPos);
 }
-async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, progressCallback) {
+async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings, progressCallback) {
     const frame = gif.frames[getFrameIndex(true)];
     frame.left = byteStream.nextTwoBytes();
     frame.top = byteStream.nextTwoBytes();
@@ -101,7 +101,7 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
         return { r, g, b, a: avgAlpha ? Math.trunc((r + g + b) / 3) : 0 };
     }, image = (() => {
         try {
-            return new ImageData(frame.width, frame.height, { colorSpace: "srgb" });
+            return new ImageData(frame.width, frame.height, canvasSettings);
         }
         catch (error) {
             if (error instanceof DOMException && error.name === "IndexSizeError") {
@@ -186,8 +186,8 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
                 }
                 for (const item of dic[code]) {
                     const { r, g, b, a } = getColor(item);
-                    image.data.set([r, g, b, a], pixelPos);
                     pixelPos += 4;
+                    image.data.set([r, g, b, a], pixelPos);
                 }
                 if (dic.length >= 1 << size && size < 0xc) {
                     size++;
@@ -199,12 +199,12 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
         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) {
+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, progressCallback);
+            await parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings, progressCallback);
             break;
         case GIFDataHeaders.Extension:
             parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex);
@@ -223,7 +223,7 @@ export function getGIFLoopAmount(gif) {
     }
     return Number.NaN;
 }
-export async function decodeGIF(gifURL, progressCallback, avgAlpha) {
+export async function decodeGIF(gifURL, canvasSettings, progressCallback, avgAlpha) {
     avgAlpha ??= false;
     const res = await fetch(gifURL);
     if (!res.ok && res.status === 404) {
@@ -238,7 +238,7 @@ export async function decodeGIF(gifURL, progressCallback, avgAlpha) {
         frames: [],
         sortFlag: false,
         globalColorTable: [],
-        backgroundImage: new ImageData(1, 1, { colorSpace: "srgb" }),
+        backgroundImage: new ImageData(1, 1, canvasSettings),
         comments: [],
         applicationExtensions: [],
     }, byteStream = new ByteStream(new Uint8ClampedArray(buffer));
@@ -260,7 +260,7 @@ export async function decodeGIF(gifURL, progressCallback, avgAlpha) {
     }
     const backgroundImage = (() => {
         try {
-            return new ImageData(gif.width, gif.height, { colorSpace: "srgb" });
+            return new ImageData(gif.width, gif.height, canvasSettings);
         }
         catch (error) {
             if (error instanceof DOMException && error.name === "IndexSizeError") {
@@ -299,7 +299,7 @@ export async function decodeGIF(gifURL, progressCallback, avgAlpha) {
                     width: 0,
                     height: 0,
                     disposalMethod: DisposalMethod.Replace,
-                    image: new ImageData(1, 1, { colorSpace: "srgb" }),
+                    image: new ImageData(1, 1, canvasSettings),
                     plainTextData: null,
                     userInputDelayFlag: false,
                     delayTime: 0,
@@ -312,7 +312,7 @@ export async function decodeGIF(gifURL, progressCallback, avgAlpha) {
                 transparencyIndex = -1;
                 incrementFrameIndex = false;
             }
-        } while (!(await parseBlock(byteStream, gif, avgAlpha, getframeIndex, getTransparencyIndex, progressCallback)));
+        } 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) {
@@ -399,14 +399,14 @@ export function drawGif(data, canvasSettings) {
     }
     context.scale(image.gifData.width / radius, image.gifData.height / radius);
 }
-export async function loadGifImage(image) {
+export async function loadGifImage(image, canvasSettings) {
     if (image.type !== "gif") {
         await loadImage(image);
         return;
     }
     image.loading = true;
     try {
-        image.gifData = await decodeGIF(image.source);
+        image.gifData = await decodeGIF(image.source, canvasSettings);
         image.gifLoopCount = getGIFLoopAmount(image.gifData);
         if (!image.gifLoopCount) {
             image.gifLoopCount = Infinity;

package/browser/index.js

@@ -27,7 +27,7 @@ function addLoadImageToEngine(engine) {
             let imageFunc;
             if (data.gif) {
                 const { loadGifImage } = await import("./GifUtils/Utils.js");
-                imageFunc = loadGifImage;
+                imageFunc = (img) => loadGifImage(img, { colorSpace: "srgb" });
             }
             else if (data.replaceColor) {
                 const { downloadSvgImage } = await import("./Utils.js");
@@ -45,7 +45,7 @@ function addLoadImageToEngine(engine) {
     };
 }
 export async function loadImageShape(engine) {
-    engine.checkVersion("4.0.0-alpha.16");
+    engine.checkVersion("4.0.0-alpha.17");
     await engine.register(async (e) => {
         const { ImagePreloaderPlugin } = await import("./ImagePreloader.js");
         addLoadImageToEngine(e);

package/cjs/GifUtils/ByteStream.js

@@ -23,7 +23,7 @@ export class ByteStream {
         const minCount = 0, emptySize = 0;
         do {
             size = this.data[this.pos++];
-            for (let count = size; --count >= minCount; blockString += String.fromCodePoint(this.data[this.pos++])) {
+            for (let count = size; --count >= minCount; blockString += String.fromCharCode(this.data[this.pos++])) {
             }
         } while (size !== emptySize);
         return blockString;

package/cjs/GifUtils/Utils.js

@@ -80,7 +80,7 @@ function readBits(imageData, pos, len) {
         (((1 << len) - 1) << bitPos)) >>>
         bitPos);
 }
-async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, progressCallback) {
+async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings, progressCallback) {
     const frame = gif.frames[getFrameIndex(true)];
     frame.left = byteStream.nextTwoBytes();
     frame.top = byteStream.nextTwoBytes();
@@ -101,7 +101,7 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
         return { r, g, b, a: avgAlpha ? Math.trunc((r + g + b) / 3) : 0 };
     }, image = (() => {
         try {
-            return new ImageData(frame.width, frame.height, { colorSpace: "srgb" });
+            return new ImageData(frame.width, frame.height, canvasSettings);
         }
         catch (error) {
             if (error instanceof DOMException && error.name === "IndexSizeError") {
@@ -186,8 +186,8 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
                 }
                 for (const item of dic[code]) {
                     const { r, g, b, a } = getColor(item);
-                    image.data.set([r, g, b, a], pixelPos);
                     pixelPos += 4;
+                    image.data.set([r, g, b, a], pixelPos);
                 }
                 if (dic.length >= 1 << size && size < 0xc) {
                     size++;
@@ -199,12 +199,12 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
         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) {
+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, progressCallback);
+            await parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings, progressCallback);
             break;
         case GIFDataHeaders.Extension:
             parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex);
@@ -223,7 +223,7 @@ export function getGIFLoopAmount(gif) {
     }
     return Number.NaN;
 }
-export async function decodeGIF(gifURL, progressCallback, avgAlpha) {
+export async function decodeGIF(gifURL, canvasSettings, progressCallback, avgAlpha) {
     avgAlpha ??= false;
     const res = await fetch(gifURL);
     if (!res.ok && res.status === 404) {
@@ -238,7 +238,7 @@ export async function decodeGIF(gifURL, progressCallback, avgAlpha) {
         frames: [],
         sortFlag: false,
         globalColorTable: [],
-        backgroundImage: new ImageData(1, 1, { colorSpace: "srgb" }),
+        backgroundImage: new ImageData(1, 1, canvasSettings),
         comments: [],
         applicationExtensions: [],
     }, byteStream = new ByteStream(new Uint8ClampedArray(buffer));
@@ -260,7 +260,7 @@ export async function decodeGIF(gifURL, progressCallback, avgAlpha) {
     }
     const backgroundImage = (() => {
         try {
-            return new ImageData(gif.width, gif.height, { colorSpace: "srgb" });
+            return new ImageData(gif.width, gif.height, canvasSettings);
         }
         catch (error) {
             if (error instanceof DOMException && error.name === "IndexSizeError") {
@@ -299,7 +299,7 @@ export async function decodeGIF(gifURL, progressCallback, avgAlpha) {
                     width: 0,
                     height: 0,
                     disposalMethod: DisposalMethod.Replace,
-                    image: new ImageData(1, 1, { colorSpace: "srgb" }),
+                    image: new ImageData(1, 1, canvasSettings),
                     plainTextData: null,
                     userInputDelayFlag: false,
                     delayTime: 0,
@@ -312,7 +312,7 @@ export async function decodeGIF(gifURL, progressCallback, avgAlpha) {
                 transparencyIndex = -1;
                 incrementFrameIndex = false;
             }
-        } while (!(await parseBlock(byteStream, gif, avgAlpha, getframeIndex, getTransparencyIndex, progressCallback)));
+        } 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) {
@@ -399,14 +399,14 @@ export function drawGif(data, canvasSettings) {
     }
     context.scale(image.gifData.width / radius, image.gifData.height / radius);
 }
-export async function loadGifImage(image) {
+export async function loadGifImage(image, canvasSettings) {
     if (image.type !== "gif") {
         await loadImage(image);
         return;
     }
     image.loading = true;
     try {
-        image.gifData = await decodeGIF(image.source);
+        image.gifData = await decodeGIF(image.source, canvasSettings);
         image.gifLoopCount = getGIFLoopAmount(image.gifData);
         if (!image.gifLoopCount) {
             image.gifLoopCount = Infinity;

package/cjs/index.js

@@ -27,7 +27,7 @@ function addLoadImageToEngine(engine) {
             let imageFunc;
             if (data.gif) {
                 const { loadGifImage } = await import("./GifUtils/Utils.js");
-                imageFunc = loadGifImage;
+                imageFunc = (img) => loadGifImage(img, { colorSpace: "srgb" });
             }
             else if (data.replaceColor) {
                 const { downloadSvgImage } = await import("./Utils.js");
@@ -45,7 +45,7 @@ function addLoadImageToEngine(engine) {
     };
 }
 export async function loadImageShape(engine) {
-    engine.checkVersion("4.0.0-alpha.16");
+    engine.checkVersion("4.0.0-alpha.17");
     await engine.register(async (e) => {
         const { ImagePreloaderPlugin } = await import("./ImagePreloader.js");
         addLoadImageToEngine(e);

package/dist_browser_GifUtils_Utils_js.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
- * v4.0.0-alpha.16
+ * v4.0.0-alpha.17
  */
 "use strict";
 /*
@@ -23,7 +23,7 @@
   \*********************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   ByteStream: () => (/* binding */ ByteStream)\n/* harmony export */ });\nclass ByteStream {\n    data;\n    pos;\n    constructor(bytes){\n        this.pos = 0;\n        this.data = new Uint8ClampedArray(bytes);\n    }\n    getString(count) {\n        const slice = this.data.slice(this.pos, this.pos + count);\n        this.pos += slice.length;\n        return slice.reduce((acc, curr)=>acc + String.fromCharCode(curr), \"\");\n    }\n    nextByte() {\n        return this.data[this.pos++];\n    }\n    nextTwoBytes() {\n        const increment = 2, previous = 1, shift = 8;\n        this.pos += increment;\n        return this.data[this.pos - increment] + (this.data[this.pos - previous] << shift);\n    }\n    readSubBlocks() {\n        let blockString = \"\", size = 0;\n        const minCount = 0, emptySize = 0;\n        do {\n            size = this.data[this.pos++];\n            for(let count = size; --count >= minCount; blockString += String.fromCodePoint(this.data[this.pos++])){}\n        }while (size !== emptySize)\n        return blockString;\n    }\n    readSubBlocksBin() {\n        let size = this.data[this.pos], len = 0;\n        const emptySize = 0, increment = 1;\n        for(let offset = 0; size !== emptySize; offset += size + increment, size = this.data[this.pos + offset]){\n            len += size;\n        }\n        const blockData = new Uint8Array(len);\n        size = this.data[this.pos++];\n        for(let i = 0; size !== emptySize; size = this.data[this.pos++]){\n            for(let count = size; --count >= emptySize; blockData[i++] = this.data[this.pos++]){}\n        }\n        return blockData;\n    }\n    skipSubBlocks() {\n        for(const increment = 1, noData = 0; this.data[this.pos] !== noData; this.pos += this.data[this.pos] + increment){}\n        this.pos++;\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/shape-image/./dist/browser/GifUtils/ByteStream.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   ByteStream: () => (/* binding */ ByteStream)\n/* harmony export */ });\nclass ByteStream {\n    data;\n    pos;\n    constructor(bytes){\n        this.pos = 0;\n        this.data = new Uint8ClampedArray(bytes);\n    }\n    getString(count) {\n        const slice = this.data.slice(this.pos, this.pos + count);\n        this.pos += slice.length;\n        return slice.reduce((acc, curr)=>acc + String.fromCharCode(curr), \"\");\n    }\n    nextByte() {\n        return this.data[this.pos++];\n    }\n    nextTwoBytes() {\n        const increment = 2, previous = 1, shift = 8;\n        this.pos += increment;\n        return this.data[this.pos - increment] + (this.data[this.pos - previous] << shift);\n    }\n    readSubBlocks() {\n        let blockString = \"\", size = 0;\n        const minCount = 0, emptySize = 0;\n        do {\n            size = this.data[this.pos++];\n            for(let count = size; --count >= minCount; blockString += String.fromCharCode(this.data[this.pos++])){}\n        }while (size !== emptySize)\n        return blockString;\n    }\n    readSubBlocksBin() {\n        let size = this.data[this.pos], len = 0;\n        const emptySize = 0, increment = 1;\n        for(let offset = 0; size !== emptySize; offset += size + increment, size = this.data[this.pos + offset]){\n            len += size;\n        }\n        const blockData = new Uint8Array(len);\n        size = this.data[this.pos++];\n        for(let i = 0; size !== emptySize; size = this.data[this.pos++]){\n            for(let count = size; --count >= emptySize; blockData[i++] = this.data[this.pos++]){}\n        }\n        return blockData;\n    }\n    skipSubBlocks() {\n        for(const increment = 1, noData = 0; this.data[this.pos] !== noData; this.pos += this.data[this.pos] + increment){}\n        this.pos++;\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/shape-image/./dist/browser/GifUtils/ByteStream.js?\n}");
 
 /***/ },
 
@@ -63,7 +63,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
   \****************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   decodeGIF: () => (/* binding */ decodeGIF),\n/* harmony export */   drawGif: () => (/* binding */ drawGif),\n/* harmony export */   getGIFLoopAmount: () => (/* binding */ getGIFLoopAmount),\n/* harmony export */   loadGifImage: () => (/* binding */ loadGifImage)\n/* harmony export */ });\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Utils.js */ \"./dist/browser/Utils.js\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _Constants_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Constants.js */ \"./dist/browser/GifUtils/Constants.js\");\n/* harmony import */ var _ByteStream_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./ByteStream.js */ \"./dist/browser/GifUtils/ByteStream.js\");\n/* harmony import */ var _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Enums/DisposalMethod.js */ \"./dist/browser/GifUtils/Enums/DisposalMethod.js\");\n/* harmony import */ var _Types_GIFDataHeaders_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Types/GIFDataHeaders.js */ \"./dist/browser/GifUtils/Types/GIFDataHeaders.js\");\n\n\n\n\n\n\nconst defaultFrame = 0, initialTime = 0, firstIndex = 0, defaultLoopCount = 0;\nfunction parseColorTable(byteStream, count) {\n    const colors = [];\n    for(let i = 0; i < count; i++){\n        colors.push({\n            r: byteStream.data[byteStream.pos],\n            g: byteStream.data[byteStream.pos + 1],\n            b: byteStream.data[byteStream.pos + 2]\n        });\n        byteStream.pos += 3;\n    }\n    return colors;\n}\nfunction parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex) {\n    switch(byteStream.nextByte()){\n        case _Types_GIFDataHeaders_js__WEBPACK_IMPORTED_MODULE_5__.GIFDataHeaders.GraphicsControlExtension:\n            {\n                const frame = gif.frames[getFrameIndex(false)];\n                byteStream.pos++;\n                const packedByte = byteStream.nextByte();\n                frame.GCreserved = (packedByte & 0xe0) >>> 5;\n                frame.disposalMethod = (packedByte & 0x1c) >>> 2;\n                frame.userInputDelayFlag = (packedByte & 2) === 2;\n                const transparencyFlag = (packedByte & 1) === 1;\n                frame.delayTime = byteStream.nextTwoBytes() * 0xa;\n                const transparencyIndex = byteStream.nextByte();\n                if (transparencyFlag) {\n                    getTransparencyIndex(transparencyIndex);\n                }\n                byteStream.pos++;\n                break;\n            }\n        case _Types_GIFDataHeaders_js__WEBPACK_IMPORTED_MODULE_5__.GIFDataHeaders.ApplicationExtension:\n            {\n                byteStream.pos++;\n                const applicationExtension = {\n                    identifier: byteStream.getString(8),\n                    authenticationCode: byteStream.getString(3),\n                    data: byteStream.readSubBlocksBin()\n                };\n                gif.applicationExtensions.push(applicationExtension);\n                break;\n            }\n        case _Types_GIFDataHeaders_js__WEBPACK_IMPORTED_MODULE_5__.GIFDataHeaders.CommentExtension:\n            {\n                gif.comments.push([\n                    getFrameIndex(false),\n                    byteStream.readSubBlocks()\n                ]);\n                break;\n            }\n        case _Types_GIFDataHeaders_js__WEBPACK_IMPORTED_MODULE_5__.GIFDataHeaders.PlainTextExtension:\n            {\n                if (gif.globalColorTable.length === 0) {\n                    throw new EvalError(\"plain text extension without global color table\");\n                }\n                byteStream.pos++;\n                gif.frames[getFrameIndex(false)].plainTextData = {\n                    left: byteStream.nextTwoBytes(),\n                    top: byteStream.nextTwoBytes(),\n                    width: byteStream.nextTwoBytes(),\n                    height: byteStream.nextTwoBytes(),\n                    charSize: {\n                        width: byteStream.nextTwoBytes(),\n                        height: byteStream.nextTwoBytes()\n                    },\n                    foregroundColor: byteStream.nextByte(),\n                    backgroundColor: byteStream.nextByte(),\n                    text: byteStream.readSubBlocks()\n                };\n                break;\n            }\n        default:\n            byteStream.skipSubBlocks();\n            break;\n    }\n}\nfunction readBits(imageData, pos, len) {\n    const bytePos = pos >>> 3, bitPos = pos & 7;\n    return (imageData[bytePos] + (imageData[bytePos + 1] << 8) + (imageData[bytePos + 2] << 16) & (1 << len) - 1 << bitPos) >>> bitPos;\n}\nasync function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, progressCallback) {\n    const frame = gif.frames[getFrameIndex(true)];\n    frame.left = byteStream.nextTwoBytes();\n    frame.top = byteStream.nextTwoBytes();\n    frame.width = byteStream.nextTwoBytes();\n    frame.height = byteStream.nextTwoBytes();\n    const packedByte = byteStream.nextByte(), localColorTableFlag = (packedByte & 0x80) === 0x80, interlacedFlag = (packedByte & 0x40) === 0x40;\n    frame.sortFlag = (packedByte & 0x20) === 0x20;\n    frame.reserved = (packedByte & 0x18) >>> 3;\n    const localColorCount = 1 << (packedByte & 7) + 1;\n    if (localColorTableFlag) {\n        frame.localColorTable = parseColorTable(byteStream, localColorCount);\n    }\n    const getColor = (index)=>{\n        const { r, g, b } = (localColorTableFlag ? frame.localColorTable : gif.globalColorTable)[index];\n        if (index !== getTransparencyIndex(null)) {\n            return {\n                r,\n                g,\n                b,\n                a: 255\n            };\n        }\n        return {\n            r,\n            g,\n            b,\n            a: avgAlpha ? Math.trunc((r + g + b) / 3) : 0\n        };\n    }, image = (()=>{\n        try {\n            return new ImageData(frame.width, frame.height, {\n                colorSpace: \"srgb\"\n            });\n        } catch (error) {\n            if (error instanceof DOMException && error.name === \"IndexSizeError\") {\n                return null;\n            }\n            throw error;\n        }\n    })();\n    if (image == null) {\n        throw new EvalError(\"GIF frame size is to large\");\n    }\n    const minCodeSize = byteStream.nextByte(), imageData = byteStream.readSubBlocksBin(), clearCode = 1 << minCodeSize;\n    if (interlacedFlag) {\n        for(let code = 0, size = minCodeSize + 1, pos = 0, dic = [\n            [\n                0\n            ]\n        ], pass = 0; pass < 4; pass++){\n            if (_Constants_js__WEBPACK_IMPORTED_MODULE_2__.InterlaceOffsets[pass] < frame.height) {\n                let pixelPos = 0, lineIndex = 0, exit = false;\n                while(!exit){\n                    const last = code;\n                    code = readBits(imageData, pos, size);\n                    pos += size + 1;\n                    if (code === clearCode) {\n                        size = minCodeSize + 1;\n                        dic.length = clearCode + 2;\n                        for(let i = 0; i < dic.length; i++){\n                            dic[i] = i < clearCode ? [\n                                i\n                            ] : [];\n                        }\n                    } else {\n                        if (code >= dic.length) {\n                            dic.push(dic[last].concat(dic[last][0]));\n                        } else if (last !== clearCode) {\n                            dic.push(dic[last].concat(dic[code][0]));\n                        }\n                        for (const item of dic[code]){\n                            const { r, g, b, a } = getColor(item);\n                            image.data.set([\n                                r,\n                                g,\n                                b,\n                                a\n                            ], _Constants_js__WEBPACK_IMPORTED_MODULE_2__.InterlaceOffsets[pass] * frame.width + _Constants_js__WEBPACK_IMPORTED_MODULE_2__.InterlaceSteps[pass] * lineIndex + pixelPos % (frame.width * 4));\n                            pixelPos += 4;\n                        }\n                        if (dic.length === 1 << size && size < 0xc) {\n                            size++;\n                        }\n                    }\n                    if (pixelPos === frame.width * 4 * (lineIndex + 1)) {\n                        lineIndex++;\n                        if (_Constants_js__WEBPACK_IMPORTED_MODULE_2__.InterlaceOffsets[pass] + _Constants_js__WEBPACK_IMPORTED_MODULE_2__.InterlaceSteps[pass] * lineIndex >= frame.height) {\n                            exit = true;\n                        }\n                    }\n                }\n            }\n            progressCallback?.(byteStream.pos / (byteStream.data.length - 1), getFrameIndex(false) + 1, image, {\n                x: frame.left,\n                y: frame.top\n            }, {\n                width: gif.width,\n                height: gif.height\n            });\n        }\n        frame.image = image;\n        frame.bitmap = await createImageBitmap(image);\n    } else {\n        let code = 0, size = minCodeSize + 1, pos = 0, pixelPos = -4;\n        const dic = [\n            [\n                0\n            ]\n        ];\n        for(;;){\n            const last = code;\n            code = readBits(imageData, pos, size);\n            pos += size;\n            if (code === clearCode) {\n                size = minCodeSize + 1;\n                dic.length = clearCode + 2;\n                for(let i = 0; i < dic.length; i++){\n                    dic[i] = i < clearCode ? [\n                        i\n                    ] : [];\n                }\n            } else {\n                if (code === clearCode + 1) {\n                    break;\n                }\n                if (code >= dic.length) {\n                    dic.push(dic[last].concat(dic[last][0]));\n                } else if (last !== clearCode) {\n                    dic.push(dic[last].concat(dic[code][0]));\n                }\n                for (const item of dic[code]){\n                    const { r, g, b, a } = getColor(item);\n                    image.data.set([\n                        r,\n                        g,\n                        b,\n                        a\n                    ], pixelPos);\n                    pixelPos += 4;\n                }\n                if (dic.length >= 1 << size && size < 0xc) {\n                    size++;\n                }\n            }\n        }\n        frame.image = image;\n        frame.bitmap = await createImageBitmap(image);\n        progressCallback?.((byteStream.pos + 1) / byteStream.data.length, getFrameIndex(false) + 1, frame.image, {\n            x: frame.left,\n            y: frame.top\n        }, {\n            width: gif.width,\n            height: gif.height\n        });\n    }\n}\nasync function parseBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, progressCallback) {\n    switch(byteStream.nextByte()){\n        case _Types_GIFDataHeaders_js__WEBPACK_IMPORTED_MODULE_5__.GIFDataHeaders.EndOfFile:\n            return true;\n        case _Types_GIFDataHeaders_js__WEBPACK_IMPORTED_MODULE_5__.GIFDataHeaders.Image:\n            await parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, progressCallback);\n            break;\n        case _Types_GIFDataHeaders_js__WEBPACK_IMPORTED_MODULE_5__.GIFDataHeaders.Extension:\n            parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex);\n            break;\n        default:\n            throw new EvalError(\"undefined block found\");\n    }\n    return false;\n}\nfunction getGIFLoopAmount(gif) {\n    for (const extension of gif.applicationExtensions){\n        if (extension.identifier + extension.authenticationCode !== \"NETSCAPE2.0\") {\n            continue;\n        }\n        return extension.data[1] + (extension.data[2] << 8);\n    }\n    return Number.NaN;\n}\nasync function decodeGIF(gifURL, progressCallback, avgAlpha) {\n    avgAlpha ??= false;\n    const res = await fetch(gifURL);\n    if (!res.ok && res.status === 404) {\n        throw new EvalError(\"file not found\");\n    }\n    const buffer = await res.arrayBuffer(), gif = {\n        width: 0,\n        height: 0,\n        totalTime: 0,\n        colorRes: 0,\n        pixelAspectRatio: 0,\n        frames: [],\n        sortFlag: false,\n        globalColorTable: [],\n        backgroundImage: new ImageData(1, 1, {\n            colorSpace: \"srgb\"\n        }),\n        comments: [],\n        applicationExtensions: []\n    }, byteStream = new _ByteStream_js__WEBPACK_IMPORTED_MODULE_3__.ByteStream(new Uint8ClampedArray(buffer));\n    if (byteStream.getString(6) !== \"GIF89a\") {\n        throw new Error(\"not a supported GIF file\");\n    }\n    gif.width = byteStream.nextTwoBytes();\n    gif.height = byteStream.nextTwoBytes();\n    const packedByte = byteStream.nextByte(), globalColorTableFlag = (packedByte & 0x80) === 0x80;\n    gif.colorRes = (packedByte & 0x70) >>> 4;\n    gif.sortFlag = (packedByte & 8) === 8;\n    const globalColorCount = 1 << (packedByte & 7) + 1, backgroundColorIndex = byteStream.nextByte();\n    gif.pixelAspectRatio = byteStream.nextByte();\n    if (gif.pixelAspectRatio !== 0) {\n        gif.pixelAspectRatio = (gif.pixelAspectRatio + 0xf) / 0x40;\n    }\n    if (globalColorTableFlag) {\n        gif.globalColorTable = parseColorTable(byteStream, globalColorCount);\n    }\n    const backgroundImage = (()=>{\n        try {\n            return new ImageData(gif.width, gif.height, {\n                colorSpace: \"srgb\"\n            });\n        } catch (error) {\n            if (error instanceof DOMException && error.name === \"IndexSizeError\") {\n                return null;\n            }\n            throw error;\n        }\n    })();\n    if (backgroundImage == null) {\n        throw new Error(\"GIF frame size is to large\");\n    }\n    const { r, g, b } = gif.globalColorTable[backgroundColorIndex];\n    backgroundImage.data.set(globalColorTableFlag ? [\n        r,\n        g,\n        b,\n        255\n    ] : [\n        0,\n        0,\n        0,\n        0\n    ]);\n    for(let i = 4; i < backgroundImage.data.length; i *= 2){\n        backgroundImage.data.copyWithin(i, 0, i);\n    }\n    gif.backgroundImage = backgroundImage;\n    let frameIndex = -1, incrementFrameIndex = true, transparencyIndex = -1;\n    const getframeIndex = (increment)=>{\n        if (increment) {\n            incrementFrameIndex = true;\n        }\n        return frameIndex;\n    }, getTransparencyIndex = (newValue)=>{\n        if (newValue != null) {\n            transparencyIndex = newValue;\n        }\n        return transparencyIndex;\n    };\n    try {\n        do {\n            if (incrementFrameIndex) {\n                gif.frames.push({\n                    left: 0,\n                    top: 0,\n                    width: 0,\n                    height: 0,\n                    disposalMethod: _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.Replace,\n                    image: new ImageData(1, 1, {\n                        colorSpace: \"srgb\"\n                    }),\n                    plainTextData: null,\n                    userInputDelayFlag: false,\n                    delayTime: 0,\n                    sortFlag: false,\n                    localColorTable: [],\n                    reserved: 0,\n                    GCreserved: 0\n                });\n                frameIndex++;\n                transparencyIndex = -1;\n                incrementFrameIndex = false;\n            }\n        }while (!await parseBlock(byteStream, gif, avgAlpha, getframeIndex, getTransparencyIndex, progressCallback))\n        gif.frames.length--;\n        for (const frame of gif.frames){\n            if (frame.userInputDelayFlag && frame.delayTime === 0) {\n                gif.totalTime = Infinity;\n                break;\n            }\n            gif.totalTime += frame.delayTime;\n        }\n        return gif;\n    } catch (error) {\n        if (error instanceof EvalError) {\n            throw new Error(`error while parsing frame ${frameIndex.toString()} \"${error.message}\"`);\n        }\n        throw error;\n    }\n}\nfunction drawGif(data, canvasSettings) {\n    const { context, radius, particle, delta } = data, image = particle.image;\n    if (!image?.gifData || !image.gif) {\n        return;\n    }\n    const offscreenCanvas = new OffscreenCanvas(image.gifData.width, image.gifData.height), offscreenContext = offscreenCanvas.getContext(\"2d\", canvasSettings);\n    if (!offscreenContext) {\n        throw new Error(\"could not create offscreen canvas context\");\n    }\n    offscreenContext.imageSmoothingQuality = \"low\";\n    offscreenContext.imageSmoothingEnabled = false;\n    offscreenContext.clearRect(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.y, offscreenCanvas.width, offscreenCanvas.height);\n    particle.gifLoopCount ??= image.gifLoopCount ?? defaultLoopCount;\n    let frameIndex = particle.gifFrame ?? defaultFrame;\n    const pos = {\n        x: -image.gifData.width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.half,\n        y: -image.gifData.height * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.half\n    }, frame = image.gifData.frames[frameIndex];\n    particle.gifTime ??= initialTime;\n    if (!frame.bitmap) {\n        return;\n    }\n    context.scale(radius / image.gifData.width, radius / image.gifData.height);\n    switch(frame.disposalMethod){\n        case _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.UndefinedA:\n        case _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.UndefinedB:\n        case _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.UndefinedC:\n        case _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.UndefinedD:\n        case _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.Replace:\n            offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);\n            context.drawImage(offscreenCanvas, pos.x, pos.y);\n            offscreenContext.clearRect(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.y, offscreenCanvas.width, offscreenCanvas.height);\n            break;\n        case _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.Combine:\n            offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);\n            context.drawImage(offscreenCanvas, pos.x, pos.y);\n            break;\n        case _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.RestoreBackground:\n            offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);\n            context.drawImage(offscreenCanvas, pos.x, pos.y);\n            offscreenContext.clearRect(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.y, offscreenCanvas.width, offscreenCanvas.height);\n            if (!image.gifData.globalColorTable.length) {\n                offscreenContext.putImageData(image.gifData.frames[firstIndex].image, pos.x + frame.left, pos.y + frame.top);\n            } else {\n                offscreenContext.putImageData(image.gifData.backgroundImage, pos.x, pos.y);\n            }\n            break;\n        case _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.RestorePrevious:\n            {\n                const previousImageData = offscreenContext.getImageData(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.y, offscreenCanvas.width, offscreenCanvas.height);\n                offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);\n                context.drawImage(offscreenCanvas, pos.x, pos.y);\n                offscreenContext.clearRect(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.y, offscreenCanvas.width, offscreenCanvas.height);\n                offscreenContext.putImageData(previousImageData, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.y);\n            }\n            break;\n    }\n    particle.gifTime += delta.value;\n    if (particle.gifTime > frame.delayTime) {\n        particle.gifTime -= frame.delayTime;\n        if (++frameIndex >= image.gifData.frames.length) {\n            if (--particle.gifLoopCount <= defaultLoopCount) {\n                return;\n            }\n            frameIndex = firstIndex;\n            offscreenContext.clearRect(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.y, offscreenCanvas.width, offscreenCanvas.height);\n        }\n        particle.gifFrame = frameIndex;\n    }\n    context.scale(image.gifData.width / radius, image.gifData.height / radius);\n}\nasync function loadGifImage(image) {\n    if (image.type !== \"gif\") {\n        await (0,_Utils_js__WEBPACK_IMPORTED_MODULE_0__.loadImage)(image);\n        return;\n    }\n    image.loading = true;\n    try {\n        image.gifData = await decodeGIF(image.source);\n        image.gifLoopCount = getGIFLoopAmount(image.gifData);\n        if (!image.gifLoopCount) {\n            image.gifLoopCount = Infinity;\n        }\n    } catch  {\n        image.error = true;\n    }\n    image.loading = false;\n}\n\n\n//# sourceURL=webpack://@tsparticles/shape-image/./dist/browser/GifUtils/Utils.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   decodeGIF: () => (/* binding */ decodeGIF),\n/* harmony export */   drawGif: () => (/* binding */ drawGif),\n/* harmony export */   getGIFLoopAmount: () => (/* binding */ getGIFLoopAmount),\n/* harmony export */   loadGifImage: () => (/* binding */ loadGifImage)\n/* harmony export */ });\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Utils.js */ \"./dist/browser/Utils.js\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _Constants_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Constants.js */ \"./dist/browser/GifUtils/Constants.js\");\n/* harmony import */ var _ByteStream_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./ByteStream.js */ \"./dist/browser/GifUtils/ByteStream.js\");\n/* harmony import */ var _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Enums/DisposalMethod.js */ \"./dist/browser/GifUtils/Enums/DisposalMethod.js\");\n/* harmony import */ var _Types_GIFDataHeaders_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Types/GIFDataHeaders.js */ \"./dist/browser/GifUtils/Types/GIFDataHeaders.js\");\n\n\n\n\n\n\nconst defaultFrame = 0, initialTime = 0, firstIndex = 0, defaultLoopCount = 0;\nfunction parseColorTable(byteStream, count) {\n    const colors = [];\n    for(let i = 0; i < count; i++){\n        colors.push({\n            r: byteStream.data[byteStream.pos],\n            g: byteStream.data[byteStream.pos + 1],\n            b: byteStream.data[byteStream.pos + 2]\n        });\n        byteStream.pos += 3;\n    }\n    return colors;\n}\nfunction parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex) {\n    switch(byteStream.nextByte()){\n        case _Types_GIFDataHeaders_js__WEBPACK_IMPORTED_MODULE_5__.GIFDataHeaders.GraphicsControlExtension:\n            {\n                const frame = gif.frames[getFrameIndex(false)];\n                byteStream.pos++;\n                const packedByte = byteStream.nextByte();\n                frame.GCreserved = (packedByte & 0xe0) >>> 5;\n                frame.disposalMethod = (packedByte & 0x1c) >>> 2;\n                frame.userInputDelayFlag = (packedByte & 2) === 2;\n                const transparencyFlag = (packedByte & 1) === 1;\n                frame.delayTime = byteStream.nextTwoBytes() * 0xa;\n                const transparencyIndex = byteStream.nextByte();\n                if (transparencyFlag) {\n                    getTransparencyIndex(transparencyIndex);\n                }\n                byteStream.pos++;\n                break;\n            }\n        case _Types_GIFDataHeaders_js__WEBPACK_IMPORTED_MODULE_5__.GIFDataHeaders.ApplicationExtension:\n            {\n                byteStream.pos++;\n                const applicationExtension = {\n                    identifier: byteStream.getString(8),\n                    authenticationCode: byteStream.getString(3),\n                    data: byteStream.readSubBlocksBin()\n                };\n                gif.applicationExtensions.push(applicationExtension);\n                break;\n            }\n        case _Types_GIFDataHeaders_js__WEBPACK_IMPORTED_MODULE_5__.GIFDataHeaders.CommentExtension:\n            {\n                gif.comments.push([\n                    getFrameIndex(false),\n                    byteStream.readSubBlocks()\n                ]);\n                break;\n            }\n        case _Types_GIFDataHeaders_js__WEBPACK_IMPORTED_MODULE_5__.GIFDataHeaders.PlainTextExtension:\n            {\n                if (gif.globalColorTable.length === 0) {\n                    throw new EvalError(\"plain text extension without global color table\");\n                }\n                byteStream.pos++;\n                gif.frames[getFrameIndex(false)].plainTextData = {\n                    left: byteStream.nextTwoBytes(),\n                    top: byteStream.nextTwoBytes(),\n                    width: byteStream.nextTwoBytes(),\n                    height: byteStream.nextTwoBytes(),\n                    charSize: {\n                        width: byteStream.nextTwoBytes(),\n                        height: byteStream.nextTwoBytes()\n                    },\n                    foregroundColor: byteStream.nextByte(),\n                    backgroundColor: byteStream.nextByte(),\n                    text: byteStream.readSubBlocks()\n                };\n                break;\n            }\n        default:\n            byteStream.skipSubBlocks();\n            break;\n    }\n}\nfunction readBits(imageData, pos, len) {\n    const bytePos = pos >>> 3, bitPos = pos & 7;\n    return (imageData[bytePos] + (imageData[bytePos + 1] << 8) + (imageData[bytePos + 2] << 16) & (1 << len) - 1 << bitPos) >>> bitPos;\n}\nasync function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings, progressCallback) {\n    const frame = gif.frames[getFrameIndex(true)];\n    frame.left = byteStream.nextTwoBytes();\n    frame.top = byteStream.nextTwoBytes();\n    frame.width = byteStream.nextTwoBytes();\n    frame.height = byteStream.nextTwoBytes();\n    const packedByte = byteStream.nextByte(), localColorTableFlag = (packedByte & 0x80) === 0x80, interlacedFlag = (packedByte & 0x40) === 0x40;\n    frame.sortFlag = (packedByte & 0x20) === 0x20;\n    frame.reserved = (packedByte & 0x18) >>> 3;\n    const localColorCount = 1 << (packedByte & 7) + 1;\n    if (localColorTableFlag) {\n        frame.localColorTable = parseColorTable(byteStream, localColorCount);\n    }\n    const getColor = (index)=>{\n        const { r, g, b } = (localColorTableFlag ? frame.localColorTable : gif.globalColorTable)[index];\n        if (index !== getTransparencyIndex(null)) {\n            return {\n                r,\n                g,\n                b,\n                a: 255\n            };\n        }\n        return {\n            r,\n            g,\n            b,\n            a: avgAlpha ? Math.trunc((r + g + b) / 3) : 0\n        };\n    }, image = (()=>{\n        try {\n            return new ImageData(frame.width, frame.height, canvasSettings);\n        } catch (error) {\n            if (error instanceof DOMException && error.name === \"IndexSizeError\") {\n                return null;\n            }\n            throw error;\n        }\n    })();\n    if (image == null) {\n        throw new EvalError(\"GIF frame size is to large\");\n    }\n    const minCodeSize = byteStream.nextByte(), imageData = byteStream.readSubBlocksBin(), clearCode = 1 << minCodeSize;\n    if (interlacedFlag) {\n        for(let code = 0, size = minCodeSize + 1, pos = 0, dic = [\n            [\n                0\n            ]\n        ], pass = 0; pass < 4; pass++){\n            if (_Constants_js__WEBPACK_IMPORTED_MODULE_2__.InterlaceOffsets[pass] < frame.height) {\n                let pixelPos = 0, lineIndex = 0, exit = false;\n                while(!exit){\n                    const last = code;\n                    code = readBits(imageData, pos, size);\n                    pos += size + 1;\n                    if (code === clearCode) {\n                        size = minCodeSize + 1;\n                        dic.length = clearCode + 2;\n                        for(let i = 0; i < dic.length; i++){\n                            dic[i] = i < clearCode ? [\n                                i\n                            ] : [];\n                        }\n                    } else {\n                        if (code >= dic.length) {\n                            dic.push(dic[last].concat(dic[last][0]));\n                        } else if (last !== clearCode) {\n                            dic.push(dic[last].concat(dic[code][0]));\n                        }\n                        for (const item of dic[code]){\n                            const { r, g, b, a } = getColor(item);\n                            image.data.set([\n                                r,\n                                g,\n                                b,\n                                a\n                            ], _Constants_js__WEBPACK_IMPORTED_MODULE_2__.InterlaceOffsets[pass] * frame.width + _Constants_js__WEBPACK_IMPORTED_MODULE_2__.InterlaceSteps[pass] * lineIndex + pixelPos % (frame.width * 4));\n                            pixelPos += 4;\n                        }\n                        if (dic.length === 1 << size && size < 0xc) {\n                            size++;\n                        }\n                    }\n                    if (pixelPos === frame.width * 4 * (lineIndex + 1)) {\n                        lineIndex++;\n                        if (_Constants_js__WEBPACK_IMPORTED_MODULE_2__.InterlaceOffsets[pass] + _Constants_js__WEBPACK_IMPORTED_MODULE_2__.InterlaceSteps[pass] * lineIndex >= frame.height) {\n                            exit = true;\n                        }\n                    }\n                }\n            }\n            progressCallback?.(byteStream.pos / (byteStream.data.length - 1), getFrameIndex(false) + 1, image, {\n                x: frame.left,\n                y: frame.top\n            }, {\n                width: gif.width,\n                height: gif.height\n            });\n        }\n        frame.image = image;\n        frame.bitmap = await createImageBitmap(image);\n    } else {\n        let code = 0, size = minCodeSize + 1, pos = 0, pixelPos = -4;\n        const dic = [\n            [\n                0\n            ]\n        ];\n        for(;;){\n            const last = code;\n            code = readBits(imageData, pos, size);\n            pos += size;\n            if (code === clearCode) {\n                size = minCodeSize + 1;\n                dic.length = clearCode + 2;\n                for(let i = 0; i < dic.length; i++){\n                    dic[i] = i < clearCode ? [\n                        i\n                    ] : [];\n                }\n            } else {\n                if (code === clearCode + 1) {\n                    break;\n                }\n                if (code >= dic.length) {\n                    dic.push(dic[last].concat(dic[last][0]));\n                } else if (last !== clearCode) {\n                    dic.push(dic[last].concat(dic[code][0]));\n                }\n                for (const item of dic[code]){\n                    const { r, g, b, a } = getColor(item);\n                    pixelPos += 4;\n                    image.data.set([\n                        r,\n                        g,\n                        b,\n                        a\n                    ], pixelPos);\n                }\n                if (dic.length >= 1 << size && size < 0xc) {\n                    size++;\n                }\n            }\n        }\n        frame.image = image;\n        frame.bitmap = await createImageBitmap(image);\n        progressCallback?.((byteStream.pos + 1) / byteStream.data.length, getFrameIndex(false) + 1, frame.image, {\n            x: frame.left,\n            y: frame.top\n        }, {\n            width: gif.width,\n            height: gif.height\n        });\n    }\n}\nasync function parseBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings, progressCallback) {\n    switch(byteStream.nextByte()){\n        case _Types_GIFDataHeaders_js__WEBPACK_IMPORTED_MODULE_5__.GIFDataHeaders.EndOfFile:\n            return true;\n        case _Types_GIFDataHeaders_js__WEBPACK_IMPORTED_MODULE_5__.GIFDataHeaders.Image:\n            await parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings, progressCallback);\n            break;\n        case _Types_GIFDataHeaders_js__WEBPACK_IMPORTED_MODULE_5__.GIFDataHeaders.Extension:\n            parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex);\n            break;\n        default:\n            throw new EvalError(\"undefined block found\");\n    }\n    return false;\n}\nfunction getGIFLoopAmount(gif) {\n    for (const extension of gif.applicationExtensions){\n        if (extension.identifier + extension.authenticationCode !== \"NETSCAPE2.0\") {\n            continue;\n        }\n        return extension.data[1] + (extension.data[2] << 8);\n    }\n    return Number.NaN;\n}\nasync function decodeGIF(gifURL, canvasSettings, progressCallback, avgAlpha) {\n    avgAlpha ??= false;\n    const res = await fetch(gifURL);\n    if (!res.ok && res.status === 404) {\n        throw new EvalError(\"file not found\");\n    }\n    const buffer = await res.arrayBuffer(), gif = {\n        width: 0,\n        height: 0,\n        totalTime: 0,\n        colorRes: 0,\n        pixelAspectRatio: 0,\n        frames: [],\n        sortFlag: false,\n        globalColorTable: [],\n        backgroundImage: new ImageData(1, 1, canvasSettings),\n        comments: [],\n        applicationExtensions: []\n    }, byteStream = new _ByteStream_js__WEBPACK_IMPORTED_MODULE_3__.ByteStream(new Uint8ClampedArray(buffer));\n    if (byteStream.getString(6) !== \"GIF89a\") {\n        throw new Error(\"not a supported GIF file\");\n    }\n    gif.width = byteStream.nextTwoBytes();\n    gif.height = byteStream.nextTwoBytes();\n    const packedByte = byteStream.nextByte(), globalColorTableFlag = (packedByte & 0x80) === 0x80;\n    gif.colorRes = (packedByte & 0x70) >>> 4;\n    gif.sortFlag = (packedByte & 8) === 8;\n    const globalColorCount = 1 << (packedByte & 7) + 1, backgroundColorIndex = byteStream.nextByte();\n    gif.pixelAspectRatio = byteStream.nextByte();\n    if (gif.pixelAspectRatio !== 0) {\n        gif.pixelAspectRatio = (gif.pixelAspectRatio + 0xf) / 0x40;\n    }\n    if (globalColorTableFlag) {\n        gif.globalColorTable = parseColorTable(byteStream, globalColorCount);\n    }\n    const backgroundImage = (()=>{\n        try {\n            return new ImageData(gif.width, gif.height, canvasSettings);\n        } catch (error) {\n            if (error instanceof DOMException && error.name === \"IndexSizeError\") {\n                return null;\n            }\n            throw error;\n        }\n    })();\n    if (backgroundImage == null) {\n        throw new Error(\"GIF frame size is to large\");\n    }\n    const { r, g, b } = gif.globalColorTable[backgroundColorIndex];\n    backgroundImage.data.set(globalColorTableFlag ? [\n        r,\n        g,\n        b,\n        255\n    ] : [\n        0,\n        0,\n        0,\n        0\n    ]);\n    for(let i = 4; i < backgroundImage.data.length; i *= 2){\n        backgroundImage.data.copyWithin(i, 0, i);\n    }\n    gif.backgroundImage = backgroundImage;\n    let frameIndex = -1, incrementFrameIndex = true, transparencyIndex = -1;\n    const getframeIndex = (increment)=>{\n        if (increment) {\n            incrementFrameIndex = true;\n        }\n        return frameIndex;\n    }, getTransparencyIndex = (newValue)=>{\n        if (newValue != null) {\n            transparencyIndex = newValue;\n        }\n        return transparencyIndex;\n    };\n    try {\n        do {\n            if (incrementFrameIndex) {\n                gif.frames.push({\n                    left: 0,\n                    top: 0,\n                    width: 0,\n                    height: 0,\n                    disposalMethod: _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.Replace,\n                    image: new ImageData(1, 1, canvasSettings),\n                    plainTextData: null,\n                    userInputDelayFlag: false,\n                    delayTime: 0,\n                    sortFlag: false,\n                    localColorTable: [],\n                    reserved: 0,\n                    GCreserved: 0\n                });\n                frameIndex++;\n                transparencyIndex = -1;\n                incrementFrameIndex = false;\n            }\n        }while (!await parseBlock(byteStream, gif, avgAlpha, getframeIndex, getTransparencyIndex, canvasSettings, progressCallback))\n        gif.frames.length--;\n        for (const frame of gif.frames){\n            if (frame.userInputDelayFlag && frame.delayTime === 0) {\n                gif.totalTime = Infinity;\n                break;\n            }\n            gif.totalTime += frame.delayTime;\n        }\n        return gif;\n    } catch (error) {\n        if (error instanceof EvalError) {\n            throw new Error(`error while parsing frame ${frameIndex.toString()} \"${error.message}\"`);\n        }\n        throw error;\n    }\n}\nfunction drawGif(data, canvasSettings) {\n    const { context, radius, particle, delta } = data, image = particle.image;\n    if (!image?.gifData || !image.gif) {\n        return;\n    }\n    const offscreenCanvas = new OffscreenCanvas(image.gifData.width, image.gifData.height), offscreenContext = offscreenCanvas.getContext(\"2d\", canvasSettings);\n    if (!offscreenContext) {\n        throw new Error(\"could not create offscreen canvas context\");\n    }\n    offscreenContext.imageSmoothingQuality = \"low\";\n    offscreenContext.imageSmoothingEnabled = false;\n    offscreenContext.clearRect(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.y, offscreenCanvas.width, offscreenCanvas.height);\n    particle.gifLoopCount ??= image.gifLoopCount ?? defaultLoopCount;\n    let frameIndex = particle.gifFrame ?? defaultFrame;\n    const pos = {\n        x: -image.gifData.width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.half,\n        y: -image.gifData.height * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.half\n    }, frame = image.gifData.frames[frameIndex];\n    particle.gifTime ??= initialTime;\n    if (!frame.bitmap) {\n        return;\n    }\n    context.scale(radius / image.gifData.width, radius / image.gifData.height);\n    switch(frame.disposalMethod){\n        case _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.UndefinedA:\n        case _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.UndefinedB:\n        case _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.UndefinedC:\n        case _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.UndefinedD:\n        case _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.Replace:\n            offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);\n            context.drawImage(offscreenCanvas, pos.x, pos.y);\n            offscreenContext.clearRect(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.y, offscreenCanvas.width, offscreenCanvas.height);\n            break;\n        case _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.Combine:\n            offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);\n            context.drawImage(offscreenCanvas, pos.x, pos.y);\n            break;\n        case _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.RestoreBackground:\n            offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);\n            context.drawImage(offscreenCanvas, pos.x, pos.y);\n            offscreenContext.clearRect(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.y, offscreenCanvas.width, offscreenCanvas.height);\n            if (!image.gifData.globalColorTable.length) {\n                offscreenContext.putImageData(image.gifData.frames[firstIndex].image, pos.x + frame.left, pos.y + frame.top);\n            } else {\n                offscreenContext.putImageData(image.gifData.backgroundImage, pos.x, pos.y);\n            }\n            break;\n        case _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.RestorePrevious:\n            {\n                const previousImageData = offscreenContext.getImageData(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.y, offscreenCanvas.width, offscreenCanvas.height);\n                offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);\n                context.drawImage(offscreenCanvas, pos.x, pos.y);\n                offscreenContext.clearRect(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.y, offscreenCanvas.width, offscreenCanvas.height);\n                offscreenContext.putImageData(previousImageData, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.y);\n            }\n            break;\n    }\n    particle.gifTime += delta.value;\n    if (particle.gifTime > frame.delayTime) {\n        particle.gifTime -= frame.delayTime;\n        if (++frameIndex >= image.gifData.frames.length) {\n            if (--particle.gifLoopCount <= defaultLoopCount) {\n                return;\n            }\n            frameIndex = firstIndex;\n            offscreenContext.clearRect(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.y, offscreenCanvas.width, offscreenCanvas.height);\n        }\n        particle.gifFrame = frameIndex;\n    }\n    context.scale(image.gifData.width / radius, image.gifData.height / radius);\n}\nasync function loadGifImage(image, canvasSettings) {\n    if (image.type !== \"gif\") {\n        await (0,_Utils_js__WEBPACK_IMPORTED_MODULE_0__.loadImage)(image);\n        return;\n    }\n    image.loading = true;\n    try {\n        image.gifData = await decodeGIF(image.source, canvasSettings);\n        image.gifLoopCount = getGIFLoopAmount(image.gifData);\n        if (!image.gifLoopCount) {\n            image.gifLoopCount = Infinity;\n        }\n    } catch  {\n        image.error = true;\n    }\n    image.loading = false;\n}\n\n\n//# sourceURL=webpack://@tsparticles/shape-image/./dist/browser/GifUtils/Utils.js?\n}");
 
 /***/ }
 

package/dist_browser_ImageDrawer_js.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
- * v4.0.0-alpha.16
+ * v4.0.0-alpha.17
  */
 "use strict";
 /*

package/dist_browser_ImagePreloader_js.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
- * v4.0.0-alpha.16
+ * v4.0.0-alpha.17
  */
 "use strict";
 /*

package/esm/GifUtils/ByteStream.js

@@ -23,7 +23,7 @@ export class ByteStream {
         const minCount = 0, emptySize = 0;
         do {
             size = this.data[this.pos++];
-            for (let count = size; --count >= minCount; blockString += String.fromCodePoint(this.data[this.pos++])) {
+            for (let count = size; --count >= minCount; blockString += String.fromCharCode(this.data[this.pos++])) {
             }
         } while (size !== emptySize);
         return blockString;

package/esm/GifUtils/Utils.js

@@ -80,7 +80,7 @@ function readBits(imageData, pos, len) {
         (((1 << len) - 1) << bitPos)) >>>
         bitPos);
 }
-async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, progressCallback) {
+async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings, progressCallback) {
     const frame = gif.frames[getFrameIndex(true)];
     frame.left = byteStream.nextTwoBytes();
     frame.top = byteStream.nextTwoBytes();
@@ -101,7 +101,7 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
         return { r, g, b, a: avgAlpha ? Math.trunc((r + g + b) / 3) : 0 };
     }, image = (() => {
         try {
-            return new ImageData(frame.width, frame.height, { colorSpace: "srgb" });
+            return new ImageData(frame.width, frame.height, canvasSettings);
         }
         catch (error) {
             if (error instanceof DOMException && error.name === "IndexSizeError") {
@@ -186,8 +186,8 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
                 }
                 for (const item of dic[code]) {
                     const { r, g, b, a } = getColor(item);
-                    image.data.set([r, g, b, a], pixelPos);
                     pixelPos += 4;
+                    image.data.set([r, g, b, a], pixelPos);
                 }
                 if (dic.length >= 1 << size && size < 0xc) {
                     size++;
@@ -199,12 +199,12 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
         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) {
+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, progressCallback);
+            await parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings, progressCallback);
             break;
         case GIFDataHeaders.Extension:
             parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex);
@@ -223,7 +223,7 @@ export function getGIFLoopAmount(gif) {
     }
     return Number.NaN;
 }
-export async function decodeGIF(gifURL, progressCallback, avgAlpha) {
+export async function decodeGIF(gifURL, canvasSettings, progressCallback, avgAlpha) {
     avgAlpha ??= false;
     const res = await fetch(gifURL);
     if (!res.ok && res.status === 404) {
@@ -238,7 +238,7 @@ export async function decodeGIF(gifURL, progressCallback, avgAlpha) {
         frames: [],
         sortFlag: false,
         globalColorTable: [],
-        backgroundImage: new ImageData(1, 1, { colorSpace: "srgb" }),
+        backgroundImage: new ImageData(1, 1, canvasSettings),
         comments: [],
         applicationExtensions: [],
     }, byteStream = new ByteStream(new Uint8ClampedArray(buffer));
@@ -260,7 +260,7 @@ export async function decodeGIF(gifURL, progressCallback, avgAlpha) {
     }
     const backgroundImage = (() => {
         try {
-            return new ImageData(gif.width, gif.height, { colorSpace: "srgb" });
+            return new ImageData(gif.width, gif.height, canvasSettings);
         }
         catch (error) {
             if (error instanceof DOMException && error.name === "IndexSizeError") {
@@ -299,7 +299,7 @@ export async function decodeGIF(gifURL, progressCallback, avgAlpha) {
                     width: 0,
                     height: 0,
                     disposalMethod: DisposalMethod.Replace,
-                    image: new ImageData(1, 1, { colorSpace: "srgb" }),
+                    image: new ImageData(1, 1, canvasSettings),
                     plainTextData: null,
                     userInputDelayFlag: false,
                     delayTime: 0,
@@ -312,7 +312,7 @@ export async function decodeGIF(gifURL, progressCallback, avgAlpha) {
                 transparencyIndex = -1;
                 incrementFrameIndex = false;
             }
-        } while (!(await parseBlock(byteStream, gif, avgAlpha, getframeIndex, getTransparencyIndex, progressCallback)));
+        } 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) {
@@ -399,14 +399,14 @@ export function drawGif(data, canvasSettings) {
     }
     context.scale(image.gifData.width / radius, image.gifData.height / radius);
 }
-export async function loadGifImage(image) {
+export async function loadGifImage(image, canvasSettings) {
     if (image.type !== "gif") {
         await loadImage(image);
         return;
     }
     image.loading = true;
     try {
-        image.gifData = await decodeGIF(image.source);
+        image.gifData = await decodeGIF(image.source, canvasSettings);
         image.gifLoopCount = getGIFLoopAmount(image.gifData);
         if (!image.gifLoopCount) {
             image.gifLoopCount = Infinity;

package/esm/index.js

@@ -27,7 +27,7 @@ function addLoadImageToEngine(engine) {
             let imageFunc;
             if (data.gif) {
                 const { loadGifImage } = await import("./GifUtils/Utils.js");
-                imageFunc = loadGifImage;
+                imageFunc = (img) => loadGifImage(img, { colorSpace: "srgb" });
             }
             else if (data.replaceColor) {
                 const { downloadSvgImage } = await import("./Utils.js");
@@ -45,7 +45,7 @@ function addLoadImageToEngine(engine) {
     };
 }
 export async function loadImageShape(engine) {
-    engine.checkVersion("4.0.0-alpha.16");
+    engine.checkVersion("4.0.0-alpha.17");
     await engine.register(async (e) => {
         const { ImagePreloaderPlugin } = await import("./ImagePreloader.js");
         addLoadImageToEngine(e);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/shape-image",
-  "version": "4.0.0-alpha.16",
+  "version": "4.0.0-alpha.17",
   "description": "tsParticles image shape",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -59,7 +59,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/engine": "4.0.0-alpha.16"
+    "@tsparticles/engine": "4.0.0-alpha.17"
   },
   "publishConfig": {
     "access": "public"

package/report.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <title>@tsparticles/shape-image [3 Feb 2026 at 22:06]</title>
+    <title>@tsparticles/shape-image [4 Feb 2026 at 01:18]</title>
     <link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" />
 
     <script>

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
- * v4.0.0-alpha.16
+ * v4.0.0-alpha.17
  */
 /*
  * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
@@ -44,7 +44,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
   \*******************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-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    if (engine.loadImage) {\n        return;\n    }\n    engine.loadImage = async (data)=>{\n        if (!data.name && !data.src) {\n            throw new Error(\"No image source provided\");\n        }\n        engine.images ??= [];\n        if (engine.images.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            engine.images.push(image);\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 = loadGifImage;\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-alpha.16\");\n    await engine.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        const preloader = new ImagePreloaderPlugin();\n        e.addPlugin(preloader);\n        e.addShape(_Utils_js__WEBPACK_IMPORTED_MODULE_0__.shapeTypes, async ()=>{\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);\n        });\n    });\n}\n\n\n//# sourceURL=webpack://@tsparticles/shape-image/./dist/browser/index.js?\n}");
+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    if (engine.loadImage) {\n        return;\n    }\n    engine.loadImage = async (data)=>{\n        if (!data.name && !data.src) {\n            throw new Error(\"No image source provided\");\n        }\n        engine.images ??= [];\n        if (engine.images.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            engine.images.push(image);\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-alpha.17\");\n    await engine.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        const preloader = new ImagePreloaderPlugin();\n        e.addPlugin(preloader);\n        e.addShape(_Utils_js__WEBPACK_IMPORTED_MODULE_0__.shapeTypes, async ()=>{\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);\n        });\n    });\n}\n\n\n//# sourceURL=webpack://@tsparticles/shape-image/./dist/browser/index.js?\n}");
 
 /***/ },
 

package/tsparticles.shape.image.min.js

@@ -1,2 +1,2 @@
 !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,t,o,a={303(r){r.exports=e},694(e,r,t){t.d(r,{d:()=>l,downloadSvgImage:()=>s,loadImage:()=>n,z:()=>a});var o=t(303);let a=["image","images"],i=/(#(?:[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(r=>{e.loading=!0;let 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,(0,o.getLogger)().error(`Error loading image: ${e.source}`),r()}),t.src=e.source})}async function s(e){if("svg"!==e.type)return void await n(e);e.loading=!0;let r=await fetch(e.source);r.ok?e.svgData=await r.text():((0,o.getLogger)().error("Image not found"),e.error=!0),e.loading=!1}function l(e,r,t,a,s=!1){let c=function(e,r,t,a=!1){let{svgData:n}=e;if(!n)return"";let s=(0,o.getStyleFromHsl)(r,a,t);if(n.includes("fill"))return n.replaceAll(i,()=>s);let l=n.indexOf(">");return`${n.substring(0,l)} fill="${s}"${n.substring(l)}`}(e,t,a.opacity?.value??1,s),d={color:t,gif:r.gif,data:{...e,svgData:c},loaded:!1,ratio:r.width/r.height,replaceColor:r.replaceColor,source:r.src};return new Promise(r=>{let t=new Blob([c],{type:"image/svg+xml"}),o=URL.createObjectURL(t),a=new Image;a.addEventListener("load",()=>{d.loaded=!0,d.element=a,r(d),URL.revokeObjectURL(o)});let i=async()=>{URL.revokeObjectURL(o);let t={...e,error:!1,loading:!0};await n(t),d.loaded=!0,d.element=t.element,r(d)};a.addEventListener("error",()=>void i()),a.src=o})}}},i={};function n(e){var r=i[e];if(void 0!==r)return r.exports;var t=i[e]={exports:{}};return a[e](t,t.exports,n),t.exports}n.m=a,n.d=(e,r)=>{for(var t in r)n.o(r,t)&&!n.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},n.f={},n.e=e=>Promise.all(Object.keys(n.f).reduce((r,t)=>(n.f[t](e,r),r),[])),n.u=e=>""+e+".min.js",n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),s={},n.l=(e,r,t,o)=>{if(s[e])return void s[e].push(r);if(void 0!==t)for(var a,i,l=document.getElementsByTagName("script"),c=0;c<l.length;c++){var d=l[c];if(d.getAttribute("src")==e||d.getAttribute("data-webpack")=="@tsparticles/shape-image:"+t){a=d;break}}a||(i=!0,(a=document.createElement("script")).charset="utf-8",n.nc&&a.setAttribute("nonce",n.nc),a.setAttribute("data-webpack","@tsparticles/shape-image:"+t),a.src=e),s[e]=[r];var u=(r,t)=>{a.onerror=a.onload=null,clearTimeout(g);var o=s[e];if(delete s[e],a.parentNode&&a.parentNode.removeChild(a),o&&o.forEach(e=>e(t)),r)return r(t)},g=setTimeout(u.bind(null,void 0,{type:"timeout",target:a}),12e4);a.onerror=u.bind(null,a.onerror),a.onload=u.bind(null,a.onload),i&&document.head.appendChild(a)},n.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.g.importScripts&&(l=n.g.location+"");var s,l,c=n.g.document;if(!l&&c&&(c.currentScript&&"SCRIPT"===c.currentScript.tagName.toUpperCase()&&(l=c.currentScript.src),!l)){var d=c.getElementsByTagName("script");if(d.length)for(var u=d.length-1;u>-1&&(!l||!/^http(s?):/.test(l));)l=d[u--].src}if(!l)throw Error("Automatic publicPath is not supported in this browser");n.p=l=l.replace(/^blob:/,"").replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),r={999:0},n.f.j=(e,t)=>{var o=n.o(r,e)?r[e]:void 0;if(0!==o)if(o)t.push(o[2]);else{var a=new Promise((t,a)=>o=r[e]=[t,a]);t.push(o[2]=a);var i=n.p+n.u(e),s=Error();n.l(i,t=>{if(n.o(r,e)&&(0!==(o=r[e])&&(r[e]=void 0),o)){var a=t&&("load"===t.type?"missing":t.type),i=t&&t.target&&t.target.src;s.message="Loading chunk "+e+` failed.
-(`+a+": "+i+")",s.name="ChunkLoadError",s.type=a,s.request=i,o[1](s)}},"chunk-"+e,e)}},t=(e,t)=>{var o,a,[i,s,l]=t,c=0;if(i.some(e=>0!==r[e])){for(o in s)n.o(s,o)&&(n.m[o]=s[o]);l&&l(n)}for(e&&e(t);c<i.length;c++)a=i[c],n.o(r,a)&&r[a]&&r[a][0](),r[a]=0},(o=this.webpackChunk_tsparticles_shape_image=this.webpackChunk_tsparticles_shape_image||[]).forEach(t.bind(null,0)),o.push=t.bind(null,o.push.bind(o));var g={};n.r(g),n.d(g,{loadImageShape:()=>f});var p=n(694);async function f(e){e.checkVersion("4.0.0-alpha.16"),await e.register(async e=>{let{ImagePreloaderPlugin:r}=await n.e(592).then(n.bind(n,592));e.loadImage||(e.loadImage=async r=>{if(!r.name&&!r.src)throw Error("No image source provided");if(e.images??=[],!e.images.some(e=>e.name===r.name||e.source===r.src))try{let t,o={gif:r.gif,name:r.name??r.src,source:r.src,type:r.src.substring(r.src.length-3),error:!1,loading:!0,replaceColor:r.replaceColor,ratio:r.width&&r.height?r.width/r.height:void 0};if(e.images.push(o),r.gif){let{loadGifImage:e}=await n.e(763).then(n.bind(n,763));t=e}else if(r.replaceColor){let{downloadSvgImage:e}=await Promise.resolve().then(n.bind(n,694));t=e}else{let{loadImage:e}=await Promise.resolve().then(n.bind(n,694));t=e}await t(o)}catch{throw Error(`${r.name??r.src} not found`)}});let t=new r;e.addPlugin(t),e.addShape(p.z,async()=>{let{ImageDrawer:r}=await n.e(423).then(n.bind(n,423));return new r(e)})})}return g})());
+(`+a+": "+i+")",s.name="ChunkLoadError",s.type=a,s.request=i,o[1](s)}},"chunk-"+e,e)}},t=(e,t)=>{var o,a,[i,s,l]=t,c=0;if(i.some(e=>0!==r[e])){for(o in s)n.o(s,o)&&(n.m[o]=s[o]);l&&l(n)}for(e&&e(t);c<i.length;c++)a=i[c],n.o(r,a)&&r[a]&&r[a][0](),r[a]=0},(o=this.webpackChunk_tsparticles_shape_image=this.webpackChunk_tsparticles_shape_image||[]).forEach(t.bind(null,0)),o.push=t.bind(null,o.push.bind(o));var g={};n.r(g),n.d(g,{loadImageShape:()=>f});var p=n(694);async function f(e){e.checkVersion("4.0.0-alpha.17"),await e.register(async e=>{let{ImagePreloaderPlugin:r}=await n.e(592).then(n.bind(n,592));e.loadImage||(e.loadImage=async r=>{if(!r.name&&!r.src)throw Error("No image source provided");if(e.images??=[],!e.images.some(e=>e.name===r.name||e.source===r.src))try{let t,o={gif:r.gif,name:r.name??r.src,source:r.src,type:r.src.substring(r.src.length-3),error:!1,loading:!0,replaceColor:r.replaceColor,ratio:r.width&&r.height?r.width/r.height:void 0};if(e.images.push(o),r.gif){let{loadGifImage:e}=await n.e(763).then(n.bind(n,763));t=r=>e(r,{colorSpace:"srgb"})}else if(r.replaceColor){let{downloadSvgImage:e}=await Promise.resolve().then(n.bind(n,694));t=e}else{let{loadImage:e}=await Promise.resolve().then(n.bind(n,694));t=e}await t(o)}catch{throw Error(`${r.name??r.src} not found`)}});let t=new r;e.addPlugin(t),e.addShape(p.z,async()=>{let{ImageDrawer:r}=await n.e(423).then(n.bind(n,423));return new r(e)})})}return g})());

package/types/GifUtils/Utils.d.ts

@@ -3,6 +3,6 @@ import { type IShapeDrawData } from "@tsparticles/engine";
 import type { GIF } from "./Types/GIF.js";
 import type { GIFProgressCallbackFunction } from "./Types/GIFProgressCallbackFunction.js";
 export declare function getGIFLoopAmount(gif: GIF): number;
-export declare function decodeGIF(gifURL: string, progressCallback?: GIFProgressCallbackFunction, avgAlpha?: boolean): Promise<GIF>;
+export declare function decodeGIF(gifURL: string, canvasSettings: CanvasRenderingContext2DSettings, progressCallback?: GIFProgressCallbackFunction, avgAlpha?: boolean): Promise<GIF>;
 export declare function drawGif(data: IShapeDrawData<ImageParticle>, canvasSettings?: CanvasRenderingContext2DSettings): void;
-export declare function loadGifImage(image: IImage): Promise<void>;
+export declare function loadGifImage(image: IImage, canvasSettings: CanvasRenderingContext2DSettings): Promise<void>;

package/umd/GifUtils/ByteStream.js

@@ -35,7 +35,7 @@
             const minCount = 0, emptySize = 0;
             do {
                 size = this.data[this.pos++];
-                for (let count = size; --count >= minCount; blockString += String.fromCodePoint(this.data[this.pos++])) {
+                for (let count = size; --count >= minCount; blockString += String.fromCharCode(this.data[this.pos++])) {
                 }
             } while (size !== emptySize);
             return blockString;

package/umd/GifUtils/Utils.js

@@ -95,7 +95,7 @@
             (((1 << len) - 1) << bitPos)) >>>
             bitPos);
     }
-    async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, progressCallback) {
+    async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings, progressCallback) {
         const frame = gif.frames[getFrameIndex(true)];
         frame.left = byteStream.nextTwoBytes();
         frame.top = byteStream.nextTwoBytes();
@@ -116,7 +116,7 @@
             return { r, g, b, a: avgAlpha ? Math.trunc((r + g + b) / 3) : 0 };
         }, image = (() => {
             try {
-                return new ImageData(frame.width, frame.height, { colorSpace: "srgb" });
+                return new ImageData(frame.width, frame.height, canvasSettings);
             }
             catch (error) {
                 if (error instanceof DOMException && error.name === "IndexSizeError") {
@@ -201,8 +201,8 @@
                     }
                     for (const item of dic[code]) {
                         const { r, g, b, a } = getColor(item);
-                        image.data.set([r, g, b, a], pixelPos);
                         pixelPos += 4;
+                        image.data.set([r, g, b, a], pixelPos);
                     }
                     if (dic.length >= 1 << size && size < 0xc) {
                         size++;
@@ -214,12 +214,12 @@
             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) {
+    async function parseBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings, progressCallback) {
         switch (byteStream.nextByte()) {
             case GIFDataHeaders_js_1.GIFDataHeaders.EndOfFile:
                 return true;
             case GIFDataHeaders_js_1.GIFDataHeaders.Image:
-                await parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, progressCallback);
+                await parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings, progressCallback);
                 break;
             case GIFDataHeaders_js_1.GIFDataHeaders.Extension:
                 parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex);
@@ -238,7 +238,7 @@
         }
         return Number.NaN;
     }
-    async function decodeGIF(gifURL, progressCallback, avgAlpha) {
+    async function decodeGIF(gifURL, canvasSettings, progressCallback, avgAlpha) {
         avgAlpha ??= false;
         const res = await fetch(gifURL);
         if (!res.ok && res.status === 404) {
@@ -253,7 +253,7 @@
             frames: [],
             sortFlag: false,
             globalColorTable: [],
-            backgroundImage: new ImageData(1, 1, { colorSpace: "srgb" }),
+            backgroundImage: new ImageData(1, 1, canvasSettings),
             comments: [],
             applicationExtensions: [],
         }, byteStream = new ByteStream_js_1.ByteStream(new Uint8ClampedArray(buffer));
@@ -275,7 +275,7 @@
         }
         const backgroundImage = (() => {
             try {
-                return new ImageData(gif.width, gif.height, { colorSpace: "srgb" });
+                return new ImageData(gif.width, gif.height, canvasSettings);
             }
             catch (error) {
                 if (error instanceof DOMException && error.name === "IndexSizeError") {
@@ -314,7 +314,7 @@
                         width: 0,
                         height: 0,
                         disposalMethod: DisposalMethod_js_1.DisposalMethod.Replace,
-                        image: new ImageData(1, 1, { colorSpace: "srgb" }),
+                        image: new ImageData(1, 1, canvasSettings),
                         plainTextData: null,
                         userInputDelayFlag: false,
                         delayTime: 0,
@@ -327,7 +327,7 @@
                     transparencyIndex = -1;
                     incrementFrameIndex = false;
                 }
-            } while (!(await parseBlock(byteStream, gif, avgAlpha, getframeIndex, getTransparencyIndex, progressCallback)));
+            } 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) {
@@ -414,14 +414,14 @@
         }
         context.scale(image.gifData.width / radius, image.gifData.height / radius);
     }
-    async function loadGifImage(image) {
+    async function loadGifImage(image, canvasSettings) {
         if (image.type !== "gif") {
             await (0, Utils_js_1.loadImage)(image);
             return;
         }
         image.loading = true;
         try {
-            image.gifData = await decodeGIF(image.source);
+            image.gifData = await decodeGIF(image.source, canvasSettings);
             image.gifLoopCount = getGIFLoopAmount(image.gifData);
             if (!image.gifLoopCount) {
                 image.gifLoopCount = Infinity;

package/umd/index.js

@@ -73,7 +73,7 @@ var __importStar = (this && this.__importStar) || (function () {
                 let imageFunc;
                 if (data.gif) {
                     const { loadGifImage } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./GifUtils/Utils.js"))) : new Promise((resolve_1, reject_1) => { require(["./GifUtils/Utils.js"], resolve_1, reject_1); }).then(__importStar));
-                    imageFunc = loadGifImage;
+                    imageFunc = (img) => loadGifImage(img, { colorSpace: "srgb" });
                 }
                 else if (data.replaceColor) {
                     const { downloadSvgImage } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./Utils.js"))) : new Promise((resolve_2, reject_2) => { require(["./Utils.js"], resolve_2, reject_2); }).then(__importStar));
@@ -91,7 +91,7 @@ var __importStar = (this && this.__importStar) || (function () {
         };
     }
     async function loadImageShape(engine) {
-        engine.checkVersion("4.0.0-alpha.16");
+        engine.checkVersion("4.0.0-alpha.17");
         await engine.register(async (e) => {
             const { ImagePreloaderPlugin } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./ImagePreloader.js"))) : new Promise((resolve_4, reject_4) => { require(["./ImagePreloader.js"], resolve_4, reject_4); }).then(__importStar));
             addLoadImageToEngine(e);