diff --git a/src/pages/startPage/dropfavicon.tsx b/src/pages/startPage/dropfavicon.tsx index 3cba1317..0e41e51f 100644 --- a/src/pages/startPage/dropfavicon.tsx +++ b/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([]) - 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); + } + }) }