diff --git a/package.json b/package.json
index 003337c..c20c2f4 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
"compressorjs": "^1.2.1",
"cross-env": "^7.0.3",
"gh-pages": "^6.1.1",
+ "glfx": "^0.0.4",
"heic2any": "^0.0.4",
"json-diff-kit": "^1.0.29",
"lodash": "^4.17.21",
@@ -30,6 +31,7 @@
"react-i18next": "^14.1.1",
"react-json-view": "^1.21.3",
"tesseract.js": "^5.1.0",
+ "tui-image-editor": "^3.15.3",
"typescript": "^5.0.3"
}
}
diff --git a/src/.umi/core/route.tsx b/src/.umi/core/route.tsx
index 053ba0d..25fd00c 100644
--- a/src/.umi/core/route.tsx
+++ b/src/.umi/core/route.tsx
@@ -19,7 +19,7 @@ if (process.env.NODE_ENV === 'development') {
import React from 'react';
export async function getRoutes() {
- const routes = {"imageCompress/singleImageCompress":{"path":"imageCompress/singleImageCompress","id":"imageCompress/singleImageCompress","parentId":"@@/global-layout"},"imageCompress/batchImageCompress":{"path":"imageCompress/batchImageCompress","id":"imageCompress/batchImageCompress","parentId":"@@/global-layout"},"imageCompress/index":{"path":"imageCompress","id":"imageCompress/index","parentId":"@@/global-layout"},"imgFormatConversion":{"path":"imgFormatConversion","id":"imgFormatConversion","parentId":"@@/global-layout"},"colorConversion":{"path":"colorConversion","id":"colorConversion","parentId":"@@/global-layout"},"jsonFormatting":{"path":"jsonFormatting","id":"jsonFormatting","parentId":"@@/global-layout"},"imageSlicing":{"path":"imageSlicing","id":"imageSlicing","parentId":"@@/global-layout"},"jsonDiff":{"path":"jsonDiff","id":"jsonDiff","parentId":"@@/global-layout"},"imgScan":{"path":"imgScan","id":"imgScan","parentId":"@@/global-layout"},"chrono":{"path":"chrono","id":"chrono","parentId":"@@/global-layout"},"index":{"path":"/","id":"index","parentId":"@@/global-layout"},"home":{"path":"home","id":"home","parentId":"@@/global-layout"},"@@/global-layout":{"id":"@@/global-layout","path":"/","isLayout":true}} as const;
+ const routes = {"imageCompress/singleImageCompress":{"path":"imageCompress/singleImageCompress","id":"imageCompress/singleImageCompress","parentId":"@@/global-layout"},"imageCompress/batchImageCompress":{"path":"imageCompress/batchImageCompress","id":"imageCompress/batchImageCompress","parentId":"@@/global-layout"},"imageCompress/index":{"path":"imageCompress","id":"imageCompress/index","parentId":"@@/global-layout"},"imgFormatConversion":{"path":"imgFormatConversion","id":"imgFormatConversion","parentId":"@@/global-layout"},"colorConversion":{"path":"colorConversion","id":"colorConversion","parentId":"@@/global-layout"},"imgEditor/index":{"path":"imgEditor","id":"imgEditor/index","parentId":"@@/global-layout"},"imgFilter/index":{"path":"imgFilter","id":"imgFilter/index","parentId":"@@/global-layout"},"jsonFormatting":{"path":"jsonFormatting","id":"jsonFormatting","parentId":"@@/global-layout"},"imageSlicing":{"path":"imageSlicing","id":"imageSlicing","parentId":"@@/global-layout"},"jsonDiff":{"path":"jsonDiff","id":"jsonDiff","parentId":"@@/global-layout"},"imgScan":{"path":"imgScan","id":"imgScan","parentId":"@@/global-layout"},"chrono":{"path":"chrono","id":"chrono","parentId":"@@/global-layout"},"index":{"path":"/","id":"index","parentId":"@@/global-layout"},"home":{"path":"home","id":"home","parentId":"@@/global-layout"},"@@/global-layout":{"id":"@@/global-layout","path":"/","isLayout":true}} as const;
return {
routes,
routeComponents: {
@@ -28,6 +28,8 @@ export async function getRoutes() {
'imageCompress/index': React.lazy(() => import(/* webpackChunkName: "src__pages__imageCompress__index" */'../../../src/pages/imageCompress/index.tsx')),
'imgFormatConversion': React.lazy(() => import(/* webpackChunkName: "src__pages__imgFormatConversion" */'../../../src/pages/imgFormatConversion.tsx')),
'colorConversion': React.lazy(() => import(/* webpackChunkName: "src__pages__colorConversion" */'../../../src/pages/colorConversion.tsx')),
+'imgEditor/index': React.lazy(() => import(/* webpackChunkName: "src__pages__imgEditor__index" */'../../../src/pages/imgEditor/index.tsx')),
+'imgFilter/index': React.lazy(() => import(/* webpackChunkName: "src__pages__imgFilter__index" */'../../../src/pages/imgFilter/index.tsx')),
'jsonFormatting': React.lazy(() => import(/* webpackChunkName: "src__pages__jsonFormatting" */'../../../src/pages/jsonFormatting.tsx')),
'imageSlicing': React.lazy(() => import(/* webpackChunkName: "src__pages__imageSlicing" */'../../../src/pages/imageSlicing.tsx')),
'jsonDiff': React.lazy(() => import(/* webpackChunkName: "src__pages__jsonDiff" */'../../../src/pages/jsonDiff.tsx')),
diff --git a/src/assets/img/imgEdit.svg b/src/assets/img/imgEdit.svg
new file mode 100644
index 0000000..c1f1669
--- /dev/null
+++ b/src/assets/img/imgEdit.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/img/test.jpg b/src/assets/img/test.jpg
new file mode 100644
index 0000000..61cfa04
Binary files /dev/null and b/src/assets/img/test.jpg differ
diff --git a/src/layouts/menu.tsx b/src/layouts/menu.tsx
index ce0b003..fd8dc55 100644
--- a/src/layouts/menu.tsx
+++ b/src/layouts/menu.tsx
@@ -7,6 +7,7 @@ import imgScanSvg from "@/assets/img/imgScan.svg";
import imgFormatConversion from "@/assets/img/imgFormatConversion.svg";
import timeSvg from "@/assets/img/time.svg";
import colorSvg from "@/assets/img/color.svg";
+import imgEdit from "@/assets/img/imgEdit.svg";
export const NAV_MAP = [
{
@@ -26,6 +27,18 @@ export const NAV_MAP = [
icon: 
,
des:'比较两个JSON对象，并展示差异'
},
+ {
+ itemKey: "/chrono",
+ text: "计时器",
+ icon: 
,
+ des:'用于监控事物的持续时间'
+ },
+ {
+ itemKey: "/colorConversion",
+ text: "颜色转换器",
+ icon: 
,
+ des:'在不同格式之间转换颜色'
+ },
{
itemKey: "/imageSlicing",
text: "图片分割",
@@ -51,15 +64,9 @@ export const NAV_MAP = [
des:'图片格式互相转换'
},
{
- itemKey: "/chrono",
- text: "计时器",
- icon: ,
- des:'用于监控事物的持续时间'
- },
- {
- itemKey: "/colorConversion",
- text: "颜色转换器",
- icon: ,
- des:'在不同格式之间转换颜色'
+ itemKey: "/imgEditor",
+ text: "图片编辑器",
+ icon: 
,
+ des:'图片编辑器,支持裁剪、旋转、滤镜等'
},
];
\ No newline at end of file
diff --git a/src/pages/imgEditor/index.tsx b/src/pages/imgEditor/index.tsx
new file mode 100644
index 0000000..2cd7396
--- /dev/null
+++ b/src/pages/imgEditor/index.tsx
@@ -0,0 +1,44 @@
+import ImageEditor from "tui-image-editor";
+import "tui-color-picker/dist/tui-color-picker.css";
+import "tui-image-editor/dist/tui-image-editor.css";
+import { useEffect, useRef } from "react";
+import TestImg from "@/assets/img/test.jpg"
+
+export default function ImageEditorPage() {
+ const editorRef = useRef(null);
+
+ const options = {
+ includeUI: {
+ menuBarPosition: "left",
+ initMenu: "filter",
+ loadImage:{
+ path:TestImg,
+ name:'预览'
+ },
+ locale:{
+ Download: "下载",
+ Load: "上传",
+ },
+ theme:{
+ "common.bi.image": "",
+ "downloadButton.backgroundColor": "#00a9ff",
+ "downloadButton.border":"#00a9ff"
+ }
+ },
+ selectionStyle: {
+ cornerSize: 20,
+ rotatingPointOffset: 70,
+ },
+
+ };
+
+ useEffect(() => {
+ if (!editorRef.current) return;
+ new ImageEditor(editorRef.current,options);
+ }, []);
+
+ return
+
+}
\ No newline at end of file
diff --git a/src/pages/imgFilter/index.scss b/src/pages/imgFilter/index.scss
new file mode 100644
index 0000000..74b18eb
--- /dev/null
+++ b/src/pages/imgFilter/index.scss
@@ -0,0 +1,3 @@
+.filter-item{
+ padding: 16px;
+}
\ No newline at end of file
diff --git a/src/pages/imgFilter/index.tsx b/src/pages/imgFilter/index.tsx
new file mode 100644
index 0000000..bc8dd04
--- /dev/null
+++ b/src/pages/imgFilter/index.tsx
@@ -0,0 +1,140 @@
+import { InboxOutlined } from "@ant-design/icons";
+import { Slider } from "@douyinfe/semi-ui";
+import type { UploadFile } from "antd";
+import { Col, Row, Upload } from "antd";
+import { useEffect, useRef, useState } from "react";
+// @ts-ignore
+import fx from "glfx";
+import "./index.scss";
+
+const { Dragger } = Upload;
+
+export default function ImgFilter() {
+ const [fileList, setFileList] = useState>([]);
+ const [currentImg, setCurrentImg] = useState(null);
+ const [fxData, setFxData] = useState({
+ canvas: null,
+ textur: null,
+ });
+ const canvasRef = useRef(null);
+ const [filterValue, setFilterValue] = useState({
+ brightness: 0,
+ contrast: 0,
+ hue: 0,
+ saturation: 0,
+ vibrance:0,
+ denoise:25,
+ });
+
+ const filterSetting = [
+ { key: "brightness", label: "Brightness", min: -1, max: 1, step: 0.01 },
+ { key: "contrast", label: "Contrast", min: -1, max: 1, step: 0.01 },
+ { key: "hue", label: "Hue", min: -1, max: 1, step: 0.01 },
+ { key: "saturation", label: "Saturation", min: -1, max: 1, step: 0.01 },
+ { key: "vibrance", label: "Vibrance", min: -1, max: 1, step: 0.01 },
+ { key: "denoise", label: "Denoise", min: 0, max: 50, step: 1,defaultValue:25 },
+
+ ];
+
+ const filesChange = (info: any) => {
+ const hasFile = fileList.find(
+ (file: UploadFile) => info.file.name === file.name
+ );
+ if (hasFile) {
+ return;
+ } else {
+ setFileList([info.file]);
+ let reader = new FileReader();
+ reader.readAsDataURL(info.file.originFileObj);
+ const img: any = document.createElement("img");
+ reader.onload = function (e: any) {
+ img.src = e.target.result;
+ setCurrentImg(img);
+ };
+ img.onload = function () {
+ const canvas: any = canvasRef.current;
+ canvas.width = img.width;
+ canvas.height = img.height;
+ const ctx = canvas.getContext("2d");
+ ctx.drawImage(img, 0, 0);
+ };
+ }
+ };
+
+ const redrawCanvas = () => {
+ const canvas = fx.canvas();
+ const texture = canvas.texture(currentImg);
+ setFxData({
+ canvas,
+ textur: texture,
+ });
+ };
+
+ const sliderOnChange = (key: any, value: any) => {
+ setFilterValue((prev: any) => ({ ...prev, [key]: value }));
+ };
+
+ useEffect(() => {
+ if (currentImg) {
+ redrawCanvas();
+ }
+ }, [currentImg]);
+
+ useEffect(() => {
+ if (fxData.canvas) {
+ fxData.canvas
+ .draw(fxData.textur)
+ .brightnessContrast(filterValue.brightness, filterValue.contrast)
+ .hueSaturation(filterValue.hue, filterValue.saturation)
+ .vibrance(filterValue.vibrance)
+ .denoise(filterValue.denoise)
+ .update();
+ const displayCanvas: any = canvasRef.current;
+ displayCanvas.width = currentImg.width;
+ displayCanvas.height = currentImg.height;
+ const ctx = displayCanvas.getContext("2d");
+ ctx.drawImage(fxData.canvas, 0, 0);
+ }
+ }, [filterValue]);
+
+ return (
+
+
+
+ {filterSetting.map((item: any) => (
+
+
{item.label}
+
{sliderOnChange(item.key, val) }}
+ >
+
+
+
+ 点击或拖拽上传图片
+
+ )}
+
+
+