big updat:

- update dependencies
- add webp support and webp conversion for profile images

node_modules/super-image-cropper/dist/index.d.ts

@@ -0,0 +1,76 @@
+import type Cropper from 'cropperjs';
+export interface CustomCropper extends Cropper {
+    url: '';
+    cropBoxData: Cropper.ImageData;
+    canvasData: Cropper.ImageData;
+    cropper?: HTMLDivElement;
+}
+export declare enum OutputType {
+    BASE64 = "base64",
+    BLOB = "blob",
+    BLOB_URL = "blobURL"
+}
+export type IOutputTypeUnion = `${OutputType}`;
+export interface ICropperOptions {
+    cropperInstance?: CustomCropper | Cropper;
+    src?: string;
+    crossOrigin?: '' | 'anonymous' | 'use-credentials';
+    cropperJsOpts?: ICropOpts;
+    gifJsOptions?: IGifOpts;
+    outputType?: IOutputTypeUnion;
+}
+export interface IGifOpts {
+    repeat?: number;
+    quality?: number;
+    workers?: number;
+    workerScript?: string;
+    background?: string;
+    width?: number;
+    height?: number;
+    transparent?: string | null;
+    dither?: boolean;
+    debug?: boolean;
+}
+export interface ICropOpts {
+    width?: number;
+    height?: number;
+    scaleX?: number;
+    scaleY?: number;
+    x?: number;
+    y?: number;
+    background?: string;
+    rotate?: number;
+    left?: number;
+    top?: number;
+}
+export interface IImageData {
+    width: number;
+    height: number;
+    naturalWidth: number;
+    naturalHeight: number;
+}
+export interface ICommonCropOptions {
+    cropperJsOpts: Required<ICropOpts>;
+    imageData: IImageData;
+    cropBoxData: Cropper.CropBoxData;
+}
+export declare class SuperImageCropper {
+    private cropperJsInstance?;
+    private parsedFrameInfo;
+    private commonCropOptions;
+    private frameCropperInstance;
+    private inputCropperOptions;
+    private imageTypeInfo;
+    crop(inputCropperOptions: ICropperOptions): Promise<string | Blob>;
+    private init;
+    private cleanUserInput;
+    private userInputValidator;
+    private normalizeRotate;
+    private imageDataFormat;
+    private decodeGIF;
+    private ensureFrameCropperExist;
+    private cropFrames;
+    private saveGif;
+    private checkIsStaticImage;
+    private handleStaticImage;
+}

node_modules/super-image-cropper/dist/index.js

@@ -0,0 +1,2 @@
+"use strict";var t,e=require("./lib/decoder.js"),r=require("./lib/synthetic-gif.js"),s=require("./lib/cropper.js"),p=require("./lib/helper.js");exports.OutputType=void 0,(t=exports.OutputType||(exports.OutputType={})).BASE64="base64",t.BLOB="blob",t.BLOB_URL="blobURL";exports.SuperImageCropper=class{cropperJsInstance;parsedFrameInfo;commonCropOptions;frameCropperInstance;inputCropperOptions;imageTypeInfo=null;async crop(t){this.userInputValidator(t),this.inputCropperOptions=this.cleanUserInput(t),await this.init(),await this.decodeGIF();const e=await this.checkIsStaticImage();if(e.isStatic)return this.handleStaticImage(e.imageInfo.imageInstance);{const t=await this.cropFrames();return this.saveGif(t,this.parsedFrameInfo?.delays||[])}}async init(){this.cropperJsInstance=this.inputCropperOptions.cropperInstance;const t=Object.assign({width:100,height:100,scaleX:1,scaleY:1,x:0,y:0,rotate:0,left:0,top:0},this.inputCropperOptions.cropperJsOpts||{},this.cropperJsInstance?.getData()||{}),e=this.cropperJsInstance?.getImageData()||await p.getImageInfo({src:this.inputCropperOptions.src,crossOrigin:this.inputCropperOptions.crossOrigin})||{};this.commonCropOptions={cropperJsOpts:this.imageDataFormat(t,e),imageData:e,cropBoxData:this.cropperJsInstance?.getCropBoxData()||t},this.commonCropOptions.cropperJsOpts.rotate=this.normalizeRotate(this.commonCropOptions.cropperJsOpts.rotate)}cleanUserInput(t){const{cropperInstance:e}=t;return e&&(delete t.cropperJsOpts,delete t.src),t}userInputValidator(t){const{cropperInstance:e,cropperJsOpts:r,src:s}=t;if(!e){if(!r)throw new Error("If cropperInstance is not specified, cropperJsOpts must be specified.");if(!s)throw new Error("If cropperInstance is not specified, src must be specified.")}}normalizeRotate(t){return t<0?360+t%360:t}imageDataFormat(t,e){return t.left=t.x,t.top=t.y,t.width=t.width||e.naturalWidth,t.height=t.height||e.naturalHeight,t}async decodeGIF(){const t=new e.Decoder(this.inputCropperOptions.src||this.cropperJsInstance?.url||""),r=await t.decompressFrames();this.parsedFrameInfo=r}ensureFrameCropperExist(){this.frameCropperInstance||(this.frameCropperInstance=new s.FrameCropper({commonCropOptions:this.commonCropOptions}))}async cropFrames(){return this.ensureFrameCropperExist(),this.frameCropperInstance.init({commonCropOptions:this.commonCropOptions}),this.frameCropperInstance.cropGif(this.parsedFrameInfo)}async saveGif(t,e){return new r.SyntheticGIF({frames:t,commonCropOptions:this.commonCropOptions,frameDelays:e,gifJsOptions:this.inputCropperOptions.gifJsOptions,outputType:this.inputCropperOptions.outputType}).bootstrap()}async checkIsStaticImage(){const t=this.cropperJsInstance?.url??this.inputCropperOptions?.src,e=await p.loadImage({src:t,crossOrigin:this.inputCropperOptions.crossOrigin});return{isStatic:"image/gif"!==e?.imageType?.mime,imageInfo:e}}async handleStaticImage(t){const e=document.createElement("canvas"),r=e.getContext("2d");e.width=t.width,e.height=t.height,r?.drawImage(t,0,0),this.ensureFrameCropperExist(),this.frameCropperInstance.init({commonCropOptions:this.commonCropOptions});const s=await this.frameCropperInstance.cropStaticImage(e);return r?.clearRect(0,0,e.width,e.height),e.width=s.width,e.height=s.height,r?.putImageData(s,0,0),new Promise(((t,r)=>{const{outputType:s=exports.OutputType.BLOB_URL}=this.inputCropperOptions;s===exports.OutputType.BASE64?t(e.toDataURL(this.imageTypeInfo?.mime)):e.toBlob((e=>{if(!e)return r(null);if(s===exports.OutputType.BLOB)t(e);else{const r=window.URL.createObjectURL(e);t(r)}}),this.imageTypeInfo?.mime)}))}};
+//# sourceMappingURL=index.js.map

node_modules/super-image-cropper/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

node_modules/super-image-cropper/dist/lib/cropper.d.ts

@@ -0,0 +1,31 @@
+import { ICommonCropOptions } from '../index';
+import type { IParsedFrameInfo } from './decoder';
+export interface IFrameCropperProps {
+    commonCropOptions: ICommonCropOptions;
+}
+export declare class FrameCropper {
+    private frames;
+    private parsedFrames;
+    private commonCropOptions;
+    private convertorCanvas;
+    private containerCanvas;
+    private convertCtx;
+    private containerCtx;
+    private cropperJsOpts;
+    private offsetX;
+    private offsetY;
+    private containerCenterX;
+    private containerCenterY;
+    private resultFrames;
+    constructor(props: IFrameCropperProps);
+    init({ commonCropOptions }: IFrameCropperProps): void;
+    cropGif(parsedFrameInfo: IParsedFrameInfo): Promise<ImageData[]>;
+    cropStaticImage(canvasImageContainer: HTMLCanvasElement): ImageData;
+    private transformFrame;
+    private drawImgDataToCanvas;
+    private ifDebugRun;
+    private renderEachFrame;
+    private setupCanvas;
+    private setCanvasWH;
+    private frameToImgData;
+}

node_modules/super-image-cropper/dist/lib/cropper.js

@@ -0,0 +1,2 @@
+"use strict";exports.FrameCropper=class{frames;parsedFrames;commonCropOptions;convertorCanvas;containerCanvas;convertCtx;containerCtx;cropperJsOpts;offsetX=0;offsetY=0;containerCenterX=0;containerCenterY=0;resultFrames=[];constructor(t){this.init(t)}init({commonCropOptions:t}){this.commonCropOptions=t,this.cropperJsOpts=t.cropperJsOpts,this.resultFrames=[],this.containerCanvas&&this.convertorCanvas||this.setupCanvas(),this.setCanvasWH()}async cropGif(t){const{frames:s,parsedFrames:e}=t;this.frames=s,this.parsedFrames=e;let a=0;for(;a<this.frames.length;){const t=this.frames[a];if(1!==this.parsedFrames[a].disposalType&&this.containerCtx.clearRect(0,0,this.containerCanvas.width,this.containerCanvas.height),this.containerCtx.globalCompositeOperation&&this.cropperJsOpts?.background&&(this.containerCtx.fillStyle=this.cropperJsOpts?.background||"",this.containerCtx.globalCompositeOperation="destination-over",this.containerCtx.fillRect(0,0,this.containerCanvas.width,this.containerCanvas.height),this.containerCtx.globalCompositeOperation="source-over"),!t)continue;const s=this.transformFrame(this.drawImgDataToCanvas(t,a));this.resultFrames.push(s),this.ifDebugRun(s,a),a++}return this.resultFrames}cropStaticImage(t){return this.transformFrame(t)}transformFrame(t){this.containerCtx.save(),this.containerCtx.translate(this.containerCenterX,this.containerCenterY),this.containerCtx.rotate(this.cropperJsOpts.rotate*Math.PI/180),this.containerCtx.scale(this.cropperJsOpts.scaleX,this.cropperJsOpts.scaleY),this.containerCtx.drawImage(t,-this.convertorCanvas.width/2,-this.convertorCanvas.height/2),this.containerCtx.restore();return this.containerCtx.getImageData(1*this.cropperJsOpts.x+this.offsetX,1*this.cropperJsOpts.y+this.offsetY,this.cropperJsOpts.width,this.cropperJsOpts.height)}drawImgDataToCanvas(t,s){const e=this.parsedFrames[s]?.dims;return this.convertCtx.clearRect(0,0,this.convertorCanvas.width,this.convertorCanvas.height),this.convertCtx.putImageData(t,e.left,e.top),this.convertorCanvas}ifDebugRun(t,s){location.search.includes("isCropDebug=true")&&s&&this.renderEachFrame(t,s)}renderEachFrame(t,s){const e=this.parsedFrames[s]?.dims,a=document.createElement("canvas");a.width=this.convertorCanvas.width,a.height=this.convertorCanvas.height;const r=a.getContext("2d");r&&(r?.putImageData(t,e.left,e.top),r.fillStyle="red",r.strokeStyle="blue",r.lineWidth=5,r.save(),r.beginPath(),r.font="70px orbitron",r.fillText(String(s),10,50),r.restore(),r.closePath(),document.body.appendChild(a))}setupCanvas(){const t=this.containerCanvas=document.createElement("canvas"),s=this.convertorCanvas=document.createElement("canvas");t.className="containerCanvas",s.className="convertorCanvas",t.style.display="none",s.style.display="none";const e=t.getContext("2d",{willReadFrequently:!0}),a=s.getContext("2d");e&&(this.containerCtx=e),a&&(this.convertCtx=a),document.body.appendChild(s),document.body.appendChild(t)}setCanvasWH(){Math.PI,this.cropperJsOpts.rotate;const t=this.commonCropOptions.imageData,s=t.naturalWidth,e=t.naturalHeight;this.offsetX=-Math.min(this.cropperJsOpts.x,0),this.offsetY=-Math.min(this.cropperJsOpts.y,0),this.containerCenterX=this.offsetX+s/2,this.containerCenterY=this.offsetY+e/2,this.containerCanvas.width=Math.max(this.offsetX+s,this.offsetX+this.cropperJsOpts.width,this.cropperJsOpts.x+this.cropperJsOpts.width),this.containerCanvas.height=Math.max(this.offsetY+e,this.offsetY+this.cropperJsOpts.height,this.cropperJsOpts.y+this.cropperJsOpts.height),this.convertorCanvas.width=t.naturalWidth,this.convertorCanvas.height=t.naturalHeight,this.containerCtx.clearRect(0,0,this.containerCanvas.width,this.containerCanvas.height),this.convertCtx.clearRect(0,0,this.convertorCanvas.width,this.convertorCanvas.height)}frameToImgData(t,s){if(!t)return;const e=s.pixels.length,a=t.createImageData(s.dims.width,s.dims.height),r=a.data;for(let t=0;t<e;t++){const e=4*t,a=s.pixels[t],n=s.colorTable[a];r[e]=n[0],r[e+1]=n[1],r[e+2]=n[2],r[e+3]=a!==s.transparentIndex?255:0}return a}};
+//# sourceMappingURL=cropper.js.map

node_modules/super-image-cropper/dist/lib/cropper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cropper.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

node_modules/super-image-cropper/dist/lib/decoder.d.ts

@@ -0,0 +1,38 @@
+import { ParsedGif, ParsedFrame } from 'gifuct-js';
+import { GetArrTypeUnion } from './helper';
+export type IFrames = Pick<ParsedGif, 'frames'>['frames'];
+export type IFrame = GetArrTypeUnion<IFrames>;
+export interface IParsedFrameInfo {
+    frames: ImageData[];
+    delays: number[];
+    parsedFrames: ParsedFrame[];
+}
+export declare class Decoder {
+    private url;
+    private parseGIF;
+    constructor(url: string);
+    decode(): Promise<ParsedGif>;
+    decompressFrames(): Promise<IParsedFrameInfo>;
+    /**
+     * Validates and fixes frames that have lost pixels.
+     * @param gif
+     */
+    private validateAndFixFrame;
+    /**
+     * Generates ImageData objects from parsed frames.
+     * @param frames
+     */
+    private generate2ImageData;
+    /**
+     * Generates ImageData objects from frames with modified pixels.
+     * @param frames
+     */
+    private generate2ImageDataWithPixelsModified;
+    /**
+     * @param {string} url
+     * @returns
+     */
+    private fetchImageData;
+    private handlePixels;
+    private putPixels;
+}

node_modules/super-image-cropper/dist/lib/decoder.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("gifuct-js");exports.Decoder=class{url;parseGIF;constructor(e){this.url=e}async decode(){const t=await this.fetchImageData(this.url);return this.parseGIF=e.parseGIF(t),this.validateAndFixFrame(this.parseGIF),this.parseGIF}async decompressFrames(){this.parseGIF||await this.decode();const t=await e.decompressFrames(this.parseGIF,!0);return{frames:this.generate2ImageData(t),delays:t.map((e=>e.delay)),parsedFrames:t}}validateAndFixFrame=e=>{let t=null;for(const r of e.frames)t=r.gce?r.gce:t,"image"in r&&!("gce"in r)&&(r.gce=t)};generate2ImageData(e){return e.map((e=>{const t=e?.dims,r=new ImageData(t.width,t.height);return r.data.set(e.patch),r}))}generate2ImageDataWithPixelsModified(e,t){return e.map(((e,r)=>{t[r];const a=this.parseGIF.lsd,s=new ImageData(a.width,a.height);return s.data.set(new Uint8ClampedArray(e)),s}))}fetchImageData(e){return new Promise(((t,r)=>{const a=new XMLHttpRequest;a.open("GET",e,!0),a.responseType="arraybuffer",a.onload=e=>{if(!(e.target instanceof XMLHttpRequest))return;if(200!==e.target.status&&304!==e.target.status)return void r("Status Error: "+e.target.status);let a=e.target.response;a.toString().indexOf("ArrayBuffer")>0&&(a=new Uint8Array(a)),t(a)},a.onerror=e=>{r(e)},a.send()}))}handlePixels(e){const t=this.parseGIF.lsd,r=t.width*t.height*4,a=[];for(let s=0;s<e.length;++s){const i=e[s],n=0===s||2===e[s-1].disposalType?new Uint8ClampedArray(r):a[s-1].slice();a.push(this.putPixels(n,i,t))}return a}putPixels(e,t,r){if(!t.dims)return e;const{width:a,height:s,top:i,left:n}=t.dims,o=i*r.width+n;for(let i=0;i<s;i++)for(let s=0;s<a;s++){const n=i*a+s,d=t.pixels[n],h=o+i*r.width+s,p=t.colorTable[d]||[0,0,0];d===t.transparentIndex?(e[4*h]=0,e[4*h+1]=0,e[4*h+2]=0,e[4*h+3]=0):(e[4*h]=p[0],e[4*h+1]=p[1],e[4*h+2]=p[2],e[4*h+3]=255)}return e}};
+//# sourceMappingURL=decoder.js.map

node_modules/super-image-cropper/dist/lib/decoder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"decoder.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

node_modules/super-image-cropper/dist/lib/helper.d.ts

@@ -0,0 +1,20 @@
+import { IImageData } from '../index';
+export type GetArrTypeUnion<T extends any[]> = T extends (infer I)[] ? I : never;
+export type IImageLoadData = {
+    imageInstance: HTMLImageElement;
+    data: Event;
+    imageType: IImageTypeInfo | null;
+};
+export interface IImageTypeInfo {
+    ext: string;
+    mime: string;
+}
+export interface IGetImageParams {
+    src?: string;
+    crossOrigin?: '' | 'anonymous' | 'use-credentials';
+}
+export declare const getImageInfo: (params: IGetImageParams) => Promise<IImageData>;
+export declare const getImageType: (imageBufferData: ArrayBuffer) => Promise<IImageTypeInfo | null>;
+export declare const loadImage: (params: IGetImageParams) => Promise<IImageLoadData>;
+export declare const transformImageData2ArrayBuffer: (image: HTMLImageElement) => ArrayBufferLike;
+export declare const getImageBufferFromRemote: (url?: string) => Promise<ArrayBuffer>;

node_modules/super-image-cropper/dist/lib/helper.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("image-type");const t=async t=>e(new Uint8Array(t)),a=async e=>{const{src:a="",crossOrigin:n}=e;return{...await new Promise(((e,t)=>{const r=new Image;void 0!==n&&(r.crossOrigin=n),r.onload=async t=>{e({imageInstance:r,data:t})},r.src=a,r.onerror=t})),imageType:await t(await r(a))}},r=(e="")=>new Promise(((t,a)=>{const r=new XMLHttpRequest;r.open("GET",e),r.responseType="arraybuffer",r.onload=()=>{t(r.response)},r.onerror=a,r.send()}));exports.getImageBufferFromRemote=r,exports.getImageInfo=async e=>{const{src:t=""}=e;if(!t)return{width:0,height:0,naturalWidth:0,naturalHeight:0};const{imageInstance:r}=await a(e);return{width:r.width,height:r.height,naturalWidth:r.naturalWidth,naturalHeight:r.naturalHeight}},exports.getImageType=t,exports.loadImage=a;
+//# sourceMappingURL=helper.js.map

node_modules/super-image-cropper/dist/lib/helper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helper.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

node_modules/super-image-cropper/dist/lib/synthetic-gif.d.ts

@@ -0,0 +1,19 @@
+import { ICommonCropOptions, ICropperOptions } from '../index';
+import { IOutputTypeUnion } from '../index';
+export interface IFrameCropperProps {
+    commonCropOptions: ICommonCropOptions;
+    frames: ImageData[];
+    frameDelays: number[];
+    gifJsOptions?: ICropperOptions['gifJsOptions'];
+    outputType?: IOutputTypeUnion;
+}
+export declare class SyntheticGIF {
+    private cropperJsOpts;
+    private frames;
+    private frameDelays;
+    private gifJsOptions;
+    private outputType;
+    constructor({ frames, commonCropOptions, frameDelays, gifJsOptions, outputType }: IFrameCropperProps);
+    bootstrap(): Promise<string | Blob>;
+    private convertBlob2Base64;
+}

node_modules/super-image-cropper/dist/lib/synthetic-gif.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("gif-build-worker-js"),t=require("gif.js"),s=require("../index.js");exports.SyntheticGIF=class{cropperJsOpts;frames;frameDelays;gifJsOptions;outputType;constructor({frames:e,commonCropOptions:t,frameDelays:s,gifJsOptions:r={},outputType:i}){this.cropperJsOpts=t.cropperJsOpts,this.frames=e,this.frameDelays=s,this.gifJsOptions=r,this.outputType=i}bootstrap(){return new Promise(((r,i)=>{const o=e.transformToUrl(),p=Object.assign({workers:2,quality:10,workerScript:o,width:this.cropperJsOpts.width,height:this.cropperJsOpts.height,transparent:"transparent"},this.gifJsOptions||{}),a=new t(p);a.on("finished",(e=>{if(this.outputType===s.OutputType.BLOB)r(e);else if(this.outputType===s.OutputType.BASE64)r(this.convertBlob2Base64(e));else{const t=window.URL.createObjectURL(e);r(t)}})),this.frames.forEach(((e,t)=>{a.addFrame(e,{delay:this.frameDelays[t],copy:!0})})),a.render()}))}convertBlob2Base64(e){return new Promise(((t,s)=>{const r=new FileReader;r.onload=function(e){t(e?.target?.result)},r.onerror=e=>{s(e)},r.readAsDataURL(e)}))}};
+//# sourceMappingURL=synthetic-gif.js.map

node_modules/super-image-cropper/dist/lib/synthetic-gif.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"synthetic-gif.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

node_modules/super-image-cropper/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export declare const renderImageData2Canvas: (imageData: ImageData) => void;