From 9efd4b41feadcdfce76cfb9f0459f5872aa20b97 Mon Sep 17 00:00:00 2001 From: YuzeTT Date: Fri, 24 Nov 2023 01:54:53 +0800 Subject: [PATCH] chore: add rssg-2 --- src/components/HighText.tsx | 56 ++- src/pages/tools/rssg-2.tsx | 635 ++++++++++++++++++++++++++++ src/utils/parseMillimetreToPixel.ts | 8 + 3 files changed, 681 insertions(+), 18 deletions(-) create mode 100644 src/pages/tools/rssg-2.tsx create mode 100644 src/utils/parseMillimetreToPixel.ts diff --git a/src/components/HighText.tsx b/src/components/HighText.tsx index 38bb789..b4c3adf 100644 --- a/src/components/HighText.tsx +++ b/src/components/HighText.tsx @@ -1,42 +1,62 @@ -import { useEffect, useState } from "react"; +import { HTMLAttributes, useEffect, useState } from "react"; -export default function HighText({text, show, eg, large, inputed, value}:{text?: string, show: boolean, eg?: string, large?: boolean, inputed?: boolean, value?: string}) { - const [quickInput , setQuickInput] = useState('') - useEffect(()=>{ - if(inputed){ - setQuickInput(eg||'') +export default function HighText({ + text, + show, + eg, + large, + inputed, + value, + ...attrs +}: { + text?: string, + show: boolean, + eg?: string, + large?: boolean, + inputed?: boolean, + value?: string +} & HTMLAttributes) { + const [quickInput, setQuickInput] = useState('') + useEffect(() => { + if (inputed) { + setQuickInput(eg || '') } }, [inputed, eg]) return ( -
-
+
+
{quickInput}{value} {/* {show?
:'' } */}
- {show? -
- {text? -
+ {show ? +
+ {text ? +
{/*
*/}
{text}
-
:'' +
: '' } - {eg? -
{setQuickInput(eg)}}> + {eg ? +
{ setQuickInput(eg) }}> {/*
*/} {/*
*/}
{eg}
- :'' + : '' }
- :'' + : '' } - {show?
:''} + {show ?
: ''}
) } diff --git a/src/pages/tools/rssg-2.tsx b/src/pages/tools/rssg-2.tsx new file mode 100644 index 0000000..b08fd07 --- /dev/null +++ b/src/pages/tools/rssg-2.tsx @@ -0,0 +1,635 @@ +import { + Button, + Switch, + Drawer, + DrawerBody, + DrawerFooter, + DrawerHeader, + DrawerOverlay, + DrawerContent, + DrawerCloseButton, + useDisclosure, +} from '@chakra-ui/react' +import Cropper, { ReactCropperElement } from "react-cropper"; +import HighText from "../../components/HighText"; +import { useOutletContext } from "react-router-dom"; +import { ChangeEvent, RefObject, useState, useRef } from "react"; +import BaseCard from "../../components/BaseCard"; + +import "cropperjs/dist/cropper.css" + +export default function Rseg() { + const cropperRef1 = useRef(null) + const cropperRef2 = useRef(null) + const cropperRef3 = useRef(null) + const cropperRef4 = useRef(null) + const { isOpen: isOpen1, onOpen: onOpen1, onClose: onClose1 } = useDisclosure() + const { isOpen: isOpen2, onOpen: onOpen2, onClose: onClose2 } = useDisclosure() + const { isOpen: isOpen3, onOpen: onOpen3, onClose: onClose3 } = useDisclosure() + const { isOpen: isOpen4, onOpen: onOpen4, onClose: onClose4 } = useDisclosure() + + const [highLight, ref]: [highLight: boolean, ref: RefObject] = useOutletContext(); + + const [image1, setImage1] = useState(''); + const [image2, setImage2] = useState(''); + const [image3, setImage3] = useState(''); + const [image4, setImage4] = useState(''); + + const [image1Size, setImage1Size] = useState(0); + const [image2Size, setImage2Size] = useState(0); + const [image3Size, setImage3Size] = useState(0); + const [image4Size, setImage4Size] = useState(0); + + const [image1Crop, setImage1Crop] = useState(''); + const [image2Crop, setImage2Crop] = useState(''); + const [image3Crop, setImage3Crop] = useState(''); + const [image4Crop, setImage4Crop] = useState(''); + + const [bleedingLine, setBleedingLine] = useState(false); + const [isSmall, setIsSmall] = useState(false); + + const handleImage1Change = (e: ChangeEvent) => { + const file = e.target.files && e.target.files[0]; + setImage1Size(file?.size || 0) + if (file) { + const reader = new FileReader(); + + reader.onloadend = () => { + setImage1(reader.result as string); + }; + + reader.readAsDataURL(file); + } + onOpen1() + } + const handleImage2Change = (e: ChangeEvent) => { + const file = e.target.files && e.target.files[0]; + setImage2Size(file?.size || 0) + if (file) { + const reader = new FileReader(); + + reader.onloadend = () => { + setImage2(reader.result as string); + }; + + reader.readAsDataURL(file); + } + onOpen2() + } + const handleImage3Change = (e: ChangeEvent) => { + const file = e.target.files && e.target.files[0]; + setImage3Size(file?.size || 0) + if (file) { + const reader = new FileReader(); + + reader.onloadend = () => { + setImage3(reader.result as string); + }; + + reader.readAsDataURL(file); + } + onOpen3() + } + const handleImage4Change = (e: ChangeEvent) => { + const file = e.target.files && e.target.files[0]; + setImage4Size(file?.size || 0) + if (file) { + const reader = new FileReader(); + + reader.onloadend = () => { + setImage4(reader.result as string); + }; + + reader.readAsDataURL(file); + } + onOpen4() + } + + const getCropData1 = () => { + if (typeof cropperRef1.current?.cropper !== "undefined") { + setImage1Crop(cropperRef1.current?.cropper.getCroppedCanvas().toDataURL()); + } + } + const getCropData2 = () => { + if (typeof cropperRef2.current?.cropper !== "undefined") { + setImage2Crop(cropperRef2.current?.cropper.getCroppedCanvas().toDataURL()); + } + } + const getCropData3 = () => { + if (typeof cropperRef3.current?.cropper !== "undefined") { + setImage3Crop(cropperRef3.current?.cropper.getCroppedCanvas().toDataURL()); + } + } + const getCropData4 = () => { + if (typeof cropperRef4.current?.cropper !== "undefined") { + setImage4Crop(cropperRef4.current?.cropper.getCroppedCanvas().toDataURL()); + } + } + + function formatBytes(bytes: number, decimals = 2) { + if (bytes === 0) return '0 Bytes'; + + const k = 1024; + const dm = decimals < 0 ? 0 : decimals; + const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; + + const i = Math.floor(Math.log(bytes) / Math.log(k)); + + return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; + } + + return ( +
+ + + + + 裁剪图片 + + +
+ 提示 + 如果此处没图片↓↓ 大概率是浏览器/格式不支持 或者尺寸太大需要稍等一会~ （微信内置浏览器可能无法加载较大的图片） +
+ + + + + {/* */} + + + + + + + + + 裁剪图片 + + +
+ 提示 + 如果此处没图片↓↓ 大概率是浏览器/格式不支持 或者尺寸太大需要稍等一会~ （微信内置浏览器可能无法加载较大的图片） +
+ + + + + {/* */} + + + + + + + + + 裁剪图片 + + +
+ 提示 + 如果此处没图片↓↓ 大概率是浏览器/格式不支持 或者尺寸太大需要稍等一会~ （微信内置浏览器可能无法加载较大的图片） +
+ + + + + {/* */} + + + + + + + + + 裁剪图片 + + +
+ 提示 + 如果此处没图片↓↓ 大概率是浏览器/格式不支持 或者尺寸太大需要稍等一会~ （微信内置浏览器可能无法加载较大的图片） +
+ + + + + {/* */} + + + + +
+ + + + +
+
+ {image1Size + image2Size + image3Size + image4Size >= 5120000 ? +
文件较大({formatBytes(image1Size + image2Size + image3Size + image4Size)}) 导出可能需要 1-3分钟
: '' + } +
+
+ + + + + + + + + + + +
3mm 出血线（印刷需打开） + { setBleedingLine(v.target.checked) }} /> +
修复模式（图像缺失需打开） + { setIsSmall(v.target.checked) }} /> +
+
+ +
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+ {image1Crop ? +
: +
+ 请上传图片 +
+ } +
+
+
+
+
+ +
+
+
+
+ {image2Crop ? +
: +
+ 请上传图片 +
+ } +
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+ {image3Crop ? +
: +
+ 请上传图片 +
+ } +
+
+
+
+
+ +
+
+
+
+ {image4Crop ? +
: +
+ 请上传图片 +
+ } +
+
+
+
+
+ +
+
+
+
+
+ {/*
*/} + {/*
+
+ +
+
+ +
+
*/} + {/*
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+
+
+
*/} + {/* {image1Crop ? +
: +
+ 请上传图片 +
+ } + {image2Crop ? +
: +
+ 请上传图片 +
+ } + {image3Crop ? +
: +
+ 请上传图片 +
+ } + {image4Crop ? +
: +
+ 请上传图片 +
+ } */} + {/*
*/} +
+ +
+
+
+ +
+ ) +} + +// const aspect = { +// width: 106, +// height: 156 +// } + +// export default function ABC() { + +// return ( + +// ) +// } \ No newline at end of file diff --git a/src/utils/parseMillimetreToPixel.ts b/src/utils/parseMillimetreToPixel.ts new file mode 100644 index 0000000..d02a8e2 --- /dev/null +++ b/src/utils/parseMillimetreToPixel.ts @@ -0,0 +1,8 @@ +const parseMillimetreToPixel = ( + millimetre: number, + scaleRange: number + ): number => { + return Math.round(millimetre*scaleRange) +} + +export default parseMillimetreToPixel