diff --git a/src/pages/startPage/dropfavicon.tsx b/src/pages/startPage/dropfavicon.tsx index 9a378c89..d13c2edc 100644 --- a/src/pages/startPage/dropfavicon.tsx +++ b/src/pages/startPage/dropfavicon.tsx @@ -2,7 +2,7 @@ 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'; -import Resizer from "react-image-file-resizer"; +import Resizer from "@ui_kit/reactImageFileResizer"; import JSZip from "jszip" import saveAs from "file-saver" @@ -183,24 +183,22 @@ export default ({text, sx, heightImg, widthImg}: Props) => { }; - const imgHC = (imgInp:any) => { + const imgHC = (imgInp:HTMLInputElement) => { + const file = imgInp.files?.[0] + if (file) { setFavList([]) - const [file] = imgInp.files if (file.size < 5242880) { setData(URL.createObjectURL(file)) imageFavicon.forEach(obj => { try { Resizer.imageFileResizer( - [file][0], + file, obj.maxWidth, - obj.maxHeight, obj.compressFormat, obj.quality, obj.rotation, callback, - // obj.outputType, - // obj.minWidth, - // obj.minHeight, + "string", ); } catch (err) { console.log(err); @@ -208,6 +206,8 @@ export default ({text, sx, heightImg, widthImg}: Props) => { }) } else {enqueueSnackbar('Размер картинки слишком велик')} + } + } diff --git a/src/stores/questions.ts b/src/stores/questions.ts index 89034003..8d7f6d36 100644 --- a/src/stores/questions.ts +++ b/src/stores/questions.ts @@ -70,8 +70,12 @@ export const questionStore = create()( state[id] = array set({listQuestions: state}); }, +<<<<<<< HEAD openedModalSettings: "", +======= + openedModalSettings: [], +>>>>>>> 12f9f82 (images from favicon) createOpenedModalSettings: (data:any) => { const oldState = get() diff --git a/src/ui_kit/reactImageFileResizer.ts b/src/ui_kit/reactImageFileResizer.ts new file mode 100644 index 00000000..0c2e8ebf --- /dev/null +++ b/src/ui_kit/reactImageFileResizer.ts @@ -0,0 +1,178 @@ +class Resizer { + + static resizeAndRotateImage( + image: CanvasImageSource, + size: number, + compressFormat = "jpeg", + quality = 100, + rotation = 0 + ) { + var qualityDecimal = quality / 100; + var canvas = document.createElement("canvas"); + + canvas.width = size; + canvas.height = size; + + var ctx = canvas.getContext("2d"); + if (ctx) { + ctx.fillStyle = "rgba(0, 0, 0, 0)"; + ctx.fillRect(0, 0, size, size); + + if (ctx.imageSmoothingEnabled && ctx.imageSmoothingQuality) { + ctx.imageSmoothingQuality = 'high'; + } + + if (rotation) { + ctx.rotate((rotation * Math.PI) / 180); + if (rotation === 90) { + ctx.translate(0, -canvas.width); + } else if (rotation === 180) { + ctx.translate(-canvas.width, -canvas.height); + } else if (rotation === 270) { + ctx.translate(-canvas.height, 0); + } else if (rotation === 0 || rotation === 360) { + ctx.translate(0, 0); + } + } + //Вставка картинки. Определяем k в который уменьшилась большая сторона и уменьшаем в него другую сторону + let width = Number(image.width); + let height = Number(image.height); + let Xoffset = 0 + let Yoffset = 0 + const larger = Math.max(width, height) + const k = Number((larger/size).toFixed(2)) + if (height > width) { + height = size + width = Math.round(width / k) + Xoffset = Math.round((size - width) / 2) + } else { + height = Math.round(width / k) + width = size + Yoffset = Math.round((size - height) / 2) + } + + console.log(height, width) + + ctx.drawImage(image, Xoffset, Yoffset, width, height); + + return canvas.toDataURL(`image/${compressFormat}`, qualityDecimal); + } else { + throw new Error + } + } + + static b64toByteArrays(b64Data:any, contentType:string) { + contentType = contentType || "image/jpeg"; + var sliceSize = 512; + + var byteCharacters = atob( + b64Data.toString().replace(/^data:image\/(png|jpeg|jpg|webp);base64,/, "") + ); + var byteArrays = []; + + for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) { + var slice = byteCharacters.slice(offset, offset + sliceSize); + + var byteNumbers = new Array(slice.length); + for (var i = 0; i < slice.length; i++) { + byteNumbers[i] = slice.charCodeAt(i); + } + + var byteArray = new Uint8Array(byteNumbers); + + byteArrays.push(byteArray); + } + return byteArrays; + } + + static b64toBlob(b64Data:any, contentType:string) { + const byteArrays = this.b64toByteArrays(b64Data, contentType); + var blob = new Blob(byteArrays, { type: contentType}); + return blob; + } + + static b64toFile(b64Data:string, fileName:string, contentType:string) { + const byteArrays = this.b64toByteArrays(b64Data, contentType); + const file = new File(byteArrays, fileName, { type: contentType}); + return file; + } + + static createResizedImage( + file: File, + size: number, + compressFormat: string, + quality: number, + rotation: number, + responseUriFunc: any, + outputType = "base64", + ) { + const reader = new FileReader(); + if (file) { + if (file.type && !file.type.includes("image")) { + throw Error("File Is NOT Image!"); + } else { + reader.readAsDataURL(file); + reader.onload = () => { + var image = new Image(); + //@ts-ignore + image.src = reader.result; + image.onload = function () { + var resizedDataUrl = Resizer.resizeAndRotateImage( + image, + size, + compressFormat, + quality, + rotation + ); + const contentType = `image/${compressFormat}`; + switch (outputType) { + case "blob": + const blob = Resizer.b64toBlob(resizedDataUrl, contentType); + responseUriFunc(blob); + break; + case "base64": + responseUriFunc(resizedDataUrl); + break; + case "file": + let fileName = file.name; + let fileNameWithoutFormat = fileName.toString().replace(/(png|jpeg|jpg|webp)$/i, ""); + let newFileName = fileNameWithoutFormat.concat(compressFormat.toString()); + const newFile = Resizer.b64toFile(resizedDataUrl, newFileName, contentType); + responseUriFunc(newFile); + break; + default: + responseUriFunc(resizedDataUrl); + } + }; + }; + reader.onerror = (error:any + ) => { + throw Error(error); + }; + } + } else { + throw Error("File Not Found!"); + } + } + } + export default { + imageFileResizer: ( + file: File, + size: number, + compressFormat: string, + quality: number, + rotation: number, + responseUriFunc: any, + outputType: string, + ) => { + return Resizer.createResizedImage( + file, + size, + compressFormat, + quality, + rotation, + responseUriFunc, + outputType, + ); + }, + }; \ No newline at end of file