From 039f733c9ca6d208007fcad94f5c738d153dac3c Mon Sep 17 00:00:00 2001 From: YuzeTT Date: Wed, 15 Nov 2023 00:35:09 +0800 Subject: [PATCH] chore: add crop --- package.json | 2 + pnpm-lock.yaml | 23 ++++ src/pages/index.tsx | 4 +- src/pages/tools/instagram.tsx | 6 +- src/pages/tools/rseg.tsx | 251 +++++++++++++++++----------------- 5 files changed, 156 insertions(+), 130 deletions(-) diff --git a/package.json b/package.json index a77aa79..8a434dc 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "antd": "^5.11.1", "antd-img-crop": "^4.17.0", "axios": "^1.6.1", + "cropperjs": "^1.6.1", "dayjs": "^1.11.10", "detect-browser": "^5.3.0", "downloadjs": "^1.4.7", @@ -27,6 +28,7 @@ "pinyin-pro": "^3.17.0", "react": "^18.2.0", "react-copy-to-clipboard": "^5.1.0", + "react-cropper": "^2.3.3", "react-dom": "^18.2.0", "react-router": "^6.18.0", "react-router-dom": "^6.18.0" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 976598a..dd7aecd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -26,6 +26,9 @@ dependencies: axios: specifier: ^1.6.1 version: 1.6.1 + cropperjs: + specifier: ^1.6.1 + version: 1.6.1 dayjs: specifier: ^1.11.10 version: 1.11.10 @@ -56,6 +59,9 @@ dependencies: react-copy-to-clipboard: specifier: ^5.1.0 version: 5.1.0(react@18.2.0) + react-cropper: + specifier: ^2.3.3 + version: 2.3.3(react@18.2.0) react-dom: specifier: ^18.2.0 version: 18.2.0(react@18.2.0) @@ -3148,6 +3154,7 @@ packages: engines: {node: '>=10'} cpu: [arm64] os: [linux] + libc: [glibc] requiresBuild: true dev: true optional: true @@ -3157,6 +3164,7 @@ packages: engines: {node: '>=10'} cpu: [arm64] os: [linux] + libc: [musl] requiresBuild: true dev: true optional: true @@ -3166,6 +3174,7 @@ packages: engines: {node: '>=10'} cpu: [x64] os: [linux] + libc: [glibc] requiresBuild: true dev: true optional: true @@ -3175,6 +3184,7 @@ packages: engines: {node: '>=10'} cpu: [x64] os: [linux] + libc: [musl] requiresBuild: true dev: true optional: true @@ -4152,6 +4162,10 @@ packages: yaml: 1.10.2 dev: false + /cropperjs@1.6.1: + resolution: {integrity: sha512-F4wsi+XkDHCOMrHMYjrTEE4QBOrsHHN5/2VsVAaRq8P7E5z7xQpT75S+f/9WikmBEailas3+yo+6zPIomW+NOA==} + dev: false + /cross-spawn@7.0.3: resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==} engines: {node: '>= 8'} @@ -6221,6 +6235,15 @@ packages: react: 18.2.0 dev: false + /react-cropper@2.3.3(react@18.2.0): + resolution: {integrity: sha512-zghiEYkUb41kqtu+2jpX2Ntigf+Jj1dF9ew4lAobPzI2adaPE31z0p+5TcWngK6TvmWQUwK3lj4G+NDh1PDQ1w==} + peerDependencies: + react: '>=17.0.2' + dependencies: + cropperjs: 1.6.1 + react: 18.2.0 + dev: false + /react-dom@18.2.0(react@18.2.0): resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==} peerDependencies: diff --git a/src/pages/index.tsx b/src/pages/index.tsx index e8fd4bd..f9503c3 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -89,7 +89,7 @@ export default function index() {
{jumpBefore(item.url)}}>
-
+
{item.tag?
{item.tag}
:'' @@ -110,7 +110,7 @@ export default function index() { {list.todo.map((item, key)=>(
-
+
{item.name[0]}
{item.name[1]}
diff --git a/src/pages/tools/instagram.tsx b/src/pages/tools/instagram.tsx index fc77b79..810215a 100644 --- a/src/pages/tools/instagram.tsx +++ b/src/pages/tools/instagram.tsx @@ -83,7 +83,7 @@ export default function Instagram() { -
+
裁剪区
@@ -143,7 +143,7 @@ export default function Instagram() {
{head? -
: +
:
}
@@ -155,7 +155,7 @@ export default function Instagram() {
{image?
-
+
:
请上传图片
} diff --git a/src/pages/tools/rseg.tsx b/src/pages/tools/rseg.tsx index 65fbb75..1ce020f 100644 --- a/src/pages/tools/rseg.tsx +++ b/src/pages/tools/rseg.tsx @@ -1,66 +1,165 @@ -import { Button, Slider, SliderFilledTrack, SliderThumb, SliderTrack, Switch, FormLabel, FormControl } from '@chakra-ui/react' +import { + Button, + Switch, + FormLabel, + FormControl, + 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 } from "react"; +import { ChangeEvent, RefObject, useState, useRef } from "react"; import BaseCard from "../../components/BaseCard"; -export default function Instagram() { +import "cropperjs/dist/cropper.css"; + +export default function Rseg() { + const cropperRef1 = useRef(null) + const cropperRef2 = useRef(null) + const { isOpen: isOpen1, onOpen: onOpen1, onClose: onClose1 } = useDisclosure() + const { isOpen: isOpen2, onOpen: onOpen2, onClose: onClose2 } = useDisclosure() + const [highLight, ref]:[highLight: boolean, ref: RefObject] = useOutletContext(); - const [image, setImage] = useState(''); - const [head, setHead] = useState(''); + const [image1, setImage1] = useState(''); + const [image2, setImage2] = useState(''); + const [image1Crop, setImage1Crop] = useState(''); + const [image2Crop, setImage2Crop] = useState(''); const [bleedingLine, setBleedingLine] = useState(false); - const [imageX , setImageX] = useState(0) - const [imageY , setImageY] = useState(0) - const [imageZoom , setImageZoom] = useState(100) - - const handleImageChange = (e: ChangeEvent) => { + const handleImage1Change = (e: ChangeEvent) => { const file = e.target.files && e.target.files[0]; if (file) { const reader = new FileReader(); reader.onloadend = () => { - setImage(reader.result as string); + setImage1(reader.result as string); }; reader.readAsDataURL(file); } - }; - - const handleHeadChange = (e: ChangeEvent) => { + onOpen1() + } + const handleImage2Change = (e: ChangeEvent) => { const file = e.target.files && e.target.files[0]; if (file) { const reader = new FileReader(); reader.onloadend = () => { - setHead(reader.result as string); + setImage2(reader.result as string); }; reader.readAsDataURL(file); } - }; + onOpen2() + } + + 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()); + } + } return (
+ + + + + 裁剪图片 + + + + + + + + + + + + + + + + 裁剪图片 + + + + + + + + + + +
-
-
- 请到「预览模式」调整图片以获得准确的比例 -
-
- - - - - - - - - - - -
-
-
-
-
裁剪区
- 		- {setImageY(v)}} orientation='vertical' minH='100px'> - - - - - -
- {setImageX(v)}}> - - - - - -
-
-
图片缩放
- {setImageZoom(v)}}> - - - - - -
详细参数
-
X:{imageX}% Y:{imageY}% Zoom:{imageZoom}%
-
-
3mm 出血线（印刷需打开） @@ -130,7 +181,7 @@ export default function Instagram() {
-
+
@@ -138,10 +189,10 @@ export default function Instagram() { @@ -156,8 +207,8 @@ export default function Instagram() { - {/* - */}
- +
- +
-
-
+
+
@@ -169,63 +220,13 @@ export default function Instagram() {
12 - +
- {/*
- logo -
- - -
-
-
-
-
-
- {head? -
: -
- } -
-
-
- -
- more -
- {image? -
-
-
: -
请上传图片
- } - -
- liked - message - send -
- collect -
-
- -
-
-
- home - search - add - video - user - -
*/}