diff --git a/package.json b/package.json index 9a3cab0..3ac3652 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@types/react": "^18.0.33", "@types/react-dom": "^18.0.11", "antd": "^5.16.4", + "compressorjs": "^1.2.1", "gh-pages": "^6.1.1", "react-draggable": "^4.4.6", "react-i18next": "^14.1.1", diff --git a/src/.umi/core/polyfill.ts b/src/.umi/core/polyfill.ts index 40d9143..841ca61 100644 --- a/src/.umi/core/polyfill.ts +++ b/src/.umi/core/polyfill.ts @@ -216,5 +216,5 @@ import "/Users/xutaotao/Documents/s/XTools/node_modules/core-js/modules/web.url. import "/Users/xutaotao/Documents/s/XTools/node_modules/core-js/modules/web.url-search-params.delete.js"; import "/Users/xutaotao/Documents/s/XTools/node_modules/core-js/modules/web.url-search-params.has.js"; import "/Users/xutaotao/Documents/s/XTools/node_modules/core-js/modules/web.url-search-params.size.js"; -import '/Users/xutaotao/Documents/s/XTools/node_modules/regenerator-runtime/runtime.js'; +import '/Users/xutaotao/Documents/s/XTools/node_modules/@umijs/preset-umi/node_modules/regenerator-runtime/runtime.js'; export {}; diff --git a/src/.umi/core/route.tsx b/src/.umi/core/route.tsx index 1d38d75..4c23f8c 100644 --- a/src/.umi/core/route.tsx +++ b/src/.umi/core/route.tsx @@ -19,11 +19,12 @@ if (process.env.NODE_ENV === 'development') { import React from 'react'; export async function getRoutes() { - const routes = {"jsonFormatting":{"path":"jsonFormatting","id":"jsonFormatting","parentId":"@@/global-layout"},"imageSlicing":{"path":"imageSlicing","id":"imageSlicing","parentId":"@@/global-layout"},"index":{"path":"/","id":"index","parentId":"@@/global-layout"},"docs":{"path":"docs","id":"docs","parentId":"@@/global-layout"},"home":{"path":"home","id":"home","parentId":"@@/global-layout"},"@@/global-layout":{"id":"@@/global-layout","path":"/","isLayout":true}} as const; + const routes = {"jsonFormatting":{"path":"jsonFormatting","id":"jsonFormatting","parentId":"@@/global-layout"},"imageCompress":{"path":"imageCompress","id":"imageCompress","parentId":"@@/global-layout"},"imageSlicing":{"path":"imageSlicing","id":"imageSlicing","parentId":"@@/global-layout"},"index":{"path":"/","id":"index","parentId":"@@/global-layout"},"docs":{"path":"docs","id":"docs","parentId":"@@/global-layout"},"home":{"path":"home","id":"home","parentId":"@@/global-layout"},"@@/global-layout":{"id":"@@/global-layout","path":"/","isLayout":true}} as const; return { routes, routeComponents: { 'jsonFormatting': React.lazy(() => import(/* webpackChunkName: "src__pages__jsonFormatting" */'../../../src/pages/jsonFormatting.tsx')), +'imageCompress': React.lazy(() => import(/* webpackChunkName: "src__pages__imageCompress" */'../../../src/pages/imageCompress.tsx')), 'imageSlicing': React.lazy(() => import(/* webpackChunkName: "src__pages__imageSlicing" */'../../../src/pages/imageSlicing.tsx')), 'index': React.lazy(() => import(/* webpackChunkName: "src__pages__index" */'../../../src/pages/index.tsx')), 'docs': React.lazy(() => import(/* webpackChunkName: "src__pages__docs" */'../../../src/pages/docs.tsx')), diff --git a/src/assets/img/imageCompress.svg b/src/assets/img/imageCompress.svg new file mode 100644 index 0000000..4a9b1c6 --- /dev/null +++ b/src/assets/img/imageCompress.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index f1c4442..a00309e 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -9,6 +9,7 @@ import { Outlet, useLocation, history } from "umi"; import { OnSelectedData } from "@douyinfe/semi-ui/lib/es/navigation"; import Logo from "@/assets/img/XTools.svg"; import JsonSvg from "@/assets/img/json.svg"; +import ImageCompressSvg from "@/assets/img/imageCompress.svg"; const { Content } = Layout; @@ -18,6 +19,7 @@ const NavMap = [ {itemKey: "/home", text: "首页", icon: , className: styles.navItem}, {itemKey: "/imageSlicing", text: "图片分割", icon: , className: styles.navItem1}, {itemKey: "/jsonFormatting", text: "JSON格式化", icon: , className: styles.navItem1}, + {itemKey: "/imageCompress", text: "图片压缩", icon: , className: styles.navItem1}, ] const XLayout = () => { diff --git a/src/pages/imageCompress.tsx b/src/pages/imageCompress.tsx new file mode 100644 index 0000000..498dcbe --- /dev/null +++ b/src/pages/imageCompress.tsx @@ -0,0 +1,173 @@ +import { InboxOutlined } from "@ant-design/icons"; +import { Form,Button,Image } from "@douyinfe/semi-ui"; +import { Card, Col, Row, Upload } from "antd"; +import Compressor from "compressorjs"; +import { useRef, useState } from "react"; + +const { Dragger } = Upload; + +export default function ImageCompress() { + const [fileList, setFileList] = useState>([]); + const [currentImg, setCurrentImg] = useState(""); + const [compressingImg, setCompressingImg] = useState(""); + const [file, setFile] = useState(); + const [compressingFile, setCompressingFile] = useState(); + const api = useRef(); + + const filesChange = (info: any) => { + setFile(info.file); + let reader = new FileReader(); + reader.readAsDataURL(info.file.originFileObj); + reader.onload = function (e: any) { + setCurrentImg(e.target.result); + }; + const options = api.current.getValues(); + new Compressor(info.file.originFileObj, { + ...options, + success: (result) => { + console.log(result); + setCompressingFile(result); + let reader = new FileReader(); + reader.readAsDataURL(result); + reader.onload = function (e: any) { + setCompressingImg(e.target.result); + }; + }, + }); + }; + + const formOnValueChange = (value: any) => { + console.log(value); + new Compressor(file.originFileObj, { + ...value, + success: (result) => { + console.log(result); + setCompressingFile(result); + let reader = new FileReader(); + reader.readAsDataURL(result); + reader.onload = function (e: any) { + setCompressingImg(e.target.result); + }; + }, + }); + }; + + const downLoadCompressing = () => { + if (compressingFile) { + const a = document.createElement("a"); + a.href = URL.createObjectURL(compressingFile); // 创建对象超链接 + a.download = `${compressingFile.name}.jpg`; // 下载后文件名 + a.click(); // 点击下载 + } + } + + const resetImg = () => { + setFileList([]); + setCurrentImg(""); + setCompressingImg(""); + setFile(undefined); + } + + return ( + + + +
(api.current = formApi)} + labelPosition="left" + onValueChange={formOnValueChange} + > + + + + + + + + + + + 自动 + 覆盖 + 包含 + + +
+ + + + {currentImg ? ( +
+ 重新上传图片} + > + preview + + 下载} + > + preview + +
+ ) : ( + {}} + showUploadList={false} + > +

+ +

+

点击或拖拽上传图片

+ + )} + + + ); +} diff --git a/src/pages/jsonFormatting.tsx b/src/pages/jsonFormatting.tsx index 824634f..149204c 100644 --- a/src/pages/jsonFormatting.tsx +++ b/src/pages/jsonFormatting.tsx @@ -19,7 +19,7 @@ const JsonFormatting = () => { return -