From 095321afab71a6284a33302f9fc6e8951b7e6520 Mon Sep 17 00:00:00 2001 From: YuzeTT Date: Fri, 17 Nov 2023 16:30:42 +0800 Subject: [PATCH] chore: add rssg --- public/images/rssg.webp | Bin 0 -> 7444 bytes src/pages/tools/rssg.tsx | 405 +++++++++++++++++++++++++++++++++++++++ src/utils/router.ts | 7 + 3 files changed, 412 insertions(+) create mode 100644 public/images/rssg.webp create mode 100644 src/pages/tools/rssg.tsx diff --git a/public/images/rssg.webp b/public/images/rssg.webp new file mode 100644 index 0000000000000000000000000000000000000000..2ea758206d47f11811ab2f60d3e6bc1cf90d1f47 GIT binary patch literal 7444 zcmeHMX;f257A{eTZbi|iQRJXayEQf=D4T#H2hq?$7Ky}w2ndmY1Og;slO?Sph%8ZL zkwt?*M4>m3pu0e(%=3b*sKw ze!N1!VKAlj0H6-+J9OlbvC}dDzz!&9Edqqa0B&h{NKFCy1PW@hatT!Bk0as{R{J!a zoR4bCbRUxknh^LAe?l$-K-3DL5&+KjPt^Z6)wd_S2x!P?9LhvI6dZs>Cm{U2_Xiv% z!=4{-q73655tfimE`+tb|AamNghPpeM9Aiu%pM(xm*Fl5@A3Bwmc^1KS&x;xaLB`u zbb_)5AOHlg0{bBRRnr2W0eJuzPXVy_;)2dI69D=-0Mt4bbenSlP>uoM?u$SVyvO^_ zEP+Y|3w+TTO9!1tcP8z$PaTbZ9WhjO2#+UBxgKApS9QozcBI#eC5082}GEhK}x~R zv1TKN($CRkTO|QgIQG}# zPM>K(xG`OKR?UYz8D}YL#|k9ID!V49T5FCdk=}3Szcv=Rm7D=N19Aqwkbwsm+No)q z;VJ*8x0VzuRg$ig=+Al2ycnnSng54Ex)?K~{DlLOyMILnj?YMMd&NqXT`-@Rt&h`} zXs0Gw{1t=BoBBcq)FkG9nSIjQ^v~@x+05mu#7e&~j@`pmy( zP{-B1$+?PF%qj&N{D!Ug%sCH!#t<%pan}wmZF9_S} zDY~lR+J~%)+wQ-d(sn%-!@RX-vf-D|c2S_2|LtDEw0K@JtDDT*dEfKx8U1`>APZGz z-jOffQYekX##n#z+iKs^s)@r%zy53V)-3nnqL$NPA!W54 z^;JjExn}+w%c8!yoGm8J*2gtC>*itZyHN2dUfz1;9XK-jsVnEYilLQ7TvZsWfNxmAg; za=kpk-;5k~o(!v}n<4{T0%4e$;|}&b_IZ?0&DFUk+AfuS`%RN@KKwBzy1=O z#a1-er~IC2^`h~f{-)iR+28Q`m9)1+NsRTcZgB1T=YEn{ggH@}d1HCRrqQmP$7sq8 zLbK8^%)DC7v2I1(RB0_M%#HN=p1>x!jW}9Nr#`<|iYDI0PXD8_XjHu-sKep_GHkxI zjo?pz`g5Jd$=;KMJQ}WFc%te>P_Zc^c-L7pHgqy!3ME+AZGgerUhjPFbDQMbw$rP~ zo^opFux-cQd*30&_|t9iTm4(vai|mJ9iw|})Nx1b+kB{YBO9?%{h7ndhSd*NF*+EU z*?L=buED*}UnR#o^L_jq=|7u2kyUpr*HzRP2^$Lso?`SToBd*I7F9H}gLedb7MD41 zz>MCRRcuN;O>3(9(aon6@3P!V`$t9%@s(9WomU?~x(+e11z~36-MHVK9ywQDV@X!L5AuU5|bt2Up8v7H6V5>7{wvR73sJb4Tw; zd=(L)#z)fIv&+kd8N%f|D5k-YLt{*wX}M$PuxYfHsPLV){)EMlgnsZrxhn(3vOh&* z&Y!OCjAh$oIJ6}2A8(>%&g2r>hPNEIdw@dHbIg+RdN9TUM|#7}sJIrwNh{(MT~~n< z5F8sZKuOQN95U=1OCWgSUBmsAda;Cv=(faRUv+_Ap!$Sav)lG0Clh4H?(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? +
: +
+ 请上传图片 +
+ } +
+
+ +
+
+
+ +
+ ) +} diff --git a/src/utils/router.ts b/src/utils/router.ts index be47d50..6fc621c 100644 --- a/src/utils/router.ts +++ b/src/utils/router.ts @@ -11,6 +11,13 @@ const hot = ['#FEE2E2','#DC2626'] const list = { done: [ + { + name: ['人生四格', '50mm*150mm'], + logo: '/images/rssg.webp', + url: '/tools/rseg', + tag: '新上线', + tag_color: ['#dcfce7','#16a34a'] + }, { name: ['人生二格', '85mm*54mm 明信片'], logo: '/images/rslg.webp',