--

src/pages/startPage/dropfavicon.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import {Box, ButtonBase, useTheme, Typography, SxProps, Theme} from "@mui/material";
 import UploadIcon from "../../assets/icons/UploadIcon";
 import { SnackbarProvider, enqueueSnackbar } from 'notistack';
@@ -13,44 +13,184 @@ interface Props {
     widthImg?: string
 }
 
+const imageFavicon = [
+    {
+        maxWidth: 16,
+        maxHeight: 16,
+        compressFormat: "PNG",
+        quality: 100,
+        rotation: 0
+    },
+    {
+        maxWidth: 32,
+        maxHeight: 32,
+        compressFormat: "PNG",
+        quality: 100,
+        rotation: 0
+    },
+    {
+        maxWidth: 48,
+        maxHeight: 48,
+        compressFormat: "PNG",
+        quality: 100,
+        rotation: 0
+    },
+    {
+        maxWidth: 76,
+        maxHeight: 76,
+        compressFormat: "PNG",
+        quality: 100,
+        rotation: 0
+    },
+    {
+        maxWidth: 96,
+        maxHeight: 96,
+        compressFormat: "PNG",
+        quality: 100,
+        rotation: 0
+    },
+    {
+        maxWidth: 120,
+        maxHeight: 120,
+        compressFormat: "PNG",
+        quality: 100,
+        rotation: 0
+    },
+    {
+        maxWidth: 128,
+        maxHeight: 128,
+        compressFormat: "PNG",
+        quality: 100,
+        rotation: 0
+    },
+    {
+        maxWidth: 144,
+        maxHeight: 144,
+        compressFormat: "PNG",
+        quality: 100,
+        rotation: 0
+    },
+    {
+        maxWidth: 152,
+        maxHeight: 152,
+        compressFormat: "PNG",
+        quality: 100,
+        rotation: 0
+    },
+    {
+        maxWidth: 167,
+        maxHeight: 167,
+        compressFormat: "PNG",
+        quality: 100,
+        rotation: 0
+    },
+    {
+        maxWidth: 180,
+        maxHeight: 180,
+        compressFormat: "PNG",
+        quality: 100,
+        rotation: 0
+    },
+    {
+        maxWidth: 192,
+        maxHeight: 192,
+        compressFormat: "PNG",
+        quality: 100,
+        rotation: 0
+    },
+    {
+        maxWidth: 196,
+        maxHeight: 196,
+        compressFormat: "PNG",
+        quality: 100,
+        rotation: 0
+    },
+    {
+        maxWidth: 228,
+        maxHeight: 288,
+        compressFormat: "PNG",
+        quality: 100,
+        rotation: 0
+    },
+    {
+        maxWidth: 256,
+        maxHeight: 256,
+        compressFormat: "PNG",
+        quality: 100,
+        rotation: 0
+    },
+    {
+        maxWidth: 300,
+        maxHeight: 300,
+        compressFormat: "PNG",
+        quality: 100,
+        rotation: 0
+    },
+    {
+        maxWidth: 384,
+        maxHeight: 384,
+        compressFormat: "PNG",
+        quality: 100,
+        rotation: 0
+    },
+    {
+        maxWidth: 512,
+        maxHeight: 512,
+        compressFormat: "PNG",
+        quality: 100,
+        rotation: 0
+    }
+]
 export default ({text, sx, heightImg, widthImg}: Props) => {
     const theme = useTheme();
-    const callback = async (uri:any) => {
+    const [favList, setFavList] = useState<string[]>([])
 
-        const zip = new JSZip();//создание зип архива
+    useEffect(() => {
+        if (favList.length === 17) {
+
+            console.log("сейчас я сработаю")
+
+
+        // const zip = new JSZip();//создание зип архива
         
-        const idx = uri.indexOf('base64,') + 'base64,'.length; //обработка строки картинки
-        const content = uri.substring(idx); //обработка строки картинки
-        zip.file("fav.jpg", content, {base64: true}); //сохранение картинки в архив с именем "fav.jpg"
+        // const idx = uri.indexOf('base64,') + 'base64,'.length; //обработка строки картинки
+        // const content = uri.substring(idx); //обработка строки картинки
+        // zip.file("fav.jpg", content, {base64: true}); //сохранение картинки в архив с именем "fav.jpg"
         
-        zip.generateAsync({type:"blob"}).then(function(content) { // скачивание архива
-            saveAs(content, "fav.zip"); // скачивание архива
-        }); // скачивание архива
-    };
-    const resizeImage = (imageFile:any) => {
-        console.log(imageFile[0])
-        try {
-            Resizer.imageFileResizer(
-                imageFile[0],
-                150,
-                150,
-                "jpg",
-                100,
-                0,
-                callback,
-            );
-        } catch (err) {
-            console.log(err);
+        // zip.generateAsync({type:"blob"}).then(function(content) { // скачивание архива
+        //     saveAs(content, "fav.zip"); // скачивание архива
+        // }); // скачивание архива
+
         }
-    }
+    }, [favList])
+
+
+    const callback = (uri:any) => {
+        setFavList( old => [...old, uri])
+    };
     
     
     const imgHC = (imgInp:any) => {
+        setFavList([])
         const [file] = imgInp.files
         if (file.size < 5242880) {
             setData(URL.createObjectURL(file))
         } else {enqueueSnackbar('Размер картинки слишком велик')}
-        resizeImage(imgInp.files)
+        imageFavicon.forEach(obj => {
+            try {
+                Resizer.imageFileResizer(
+                    [file][0],
+                    obj.maxWidth,
+                    obj.maxHeight,
+                    obj.compressFormat,
+                    obj.quality,
+                    obj.rotation,
+                    callback,
+                );
+            } catch (err) {
+                console.log(err);
+            }
+        })
     }