feature: 新增图像压缩工具

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@react-oauth/google": "^0.12.1",
     "antd": "^5.21.6",
+    "browser-image-compression": "^2.0.2",
     "diff": "^7.0.0",
     "dompurify": "^3.1.7",
     "html2canvas": "^1.4.1",

src/App.jsx

@@ -23,6 +23,7 @@ const QuoteCard = lazy(() => import('./components/QuoteCard'));
 const LatexToImage = lazy(() => import('./components/LatexToImage'));
 const TextDiff = lazy(() => import('./components/TextDiff'));
 const SubtitleGenerator = lazy(() => import('./components/SubtitleGenerator'));
+const ImageCompressor = lazy(() => import('./components/ImageCompressor'));
 
 function App() {
   return (
@@ -52,6 +53,8 @@ function App() {
               <Route path="/latex-to-image" element={<LatexToImage />} />
               <Route path="/text-diff" element={<TextDiff />} />
               <Route path="/subtitle-to-image" element={<SubtitleGenerator />} />
+              <Route path="/image-compressor" element={<ImageCompressor />} />
+              
               <Route path="*" element={<NotFound />} />
 
             </Routes>

src/locales/en/tools.json

@@ -134,5 +134,27 @@
         "lightBlue": "Light Blue",
         "brightPink": "Bright Pink"
       }
+    },
+    "imageCompressor": {
+      "title": "Image Compressor",
+      "description": "Compress images online, supports batch processing",
+      "dropzoneText": "Click or drag images here (multiple selection supported)",
+      "quality": "Compression Quality",
+      "maxSize": "Max File Size",
+      "compress": "Start Compression",
+      "compressing": "Compressing...",
+      "download": "Download Compressed Image",
+      "original": "Original Image",
+      "compressed": "Compressed Image",
+      "originalSize": "Original Size",
+      "compressedSize": "Compressed Size",
+      "savedSpace": "Space Saved",
+      "filename": "Filename",
+      "qualityTooltip": "Set the compression quality. Higher values give better image quality but larger file size.",
+      "maxSizeTooltip": "Set the maximum file size after compression. If exceeded, the compression parameters will be adjusted automatically.",
+      "downloadAll": "Download All",
+      "clearAll": "Clear All",
+      "maxImagesError": "You can upload up to 10 images",
+      "maxImagesHint": "Up to 10 images can be uploaded"
     }
 }
\ No newline at end of file

src/locales/ja/tools.json

@@ -134,5 +134,27 @@
         "lightBlue": "ライトブルー",
         "brightPink": "ブライトピンク"
       }
+    },
+    "imageCompressor": {
+      "title": "画像圧縮",
+      "description": "オンラインで画像を圧縮、バッチ処理対応",
+      "dropzoneText": "ここに画像をクリックまたはドラッグ（複数選択対応）",
+      "quality": "圧縮品質",
+      "maxSize": "最大ファイルサイズ",
+      "compress": "圧縮開始",
+      "compressing": "圧縮中...",
+      "download": "圧縮後の画像をダウンロード",
+      "original": "元の画像",
+      "compressed": "圧縮された画像",
+      "originalSize": "元のサイズ",
+      "compressedSize": "圧縮後のサイズ",
+      "savedSpace": "節約したスペース",
+      "filename": "ファイル名",
+      "qualityTooltip": "圧縮品質を設定します。数値が高いほど画像品質が良くなりますが、ファイルサイズも大きくなります。",
+      "maxSizeTooltip": "圧縮後の最大ファイルサイズを設定します。このサイズを超えると、圧縮パラメータが自動調整されます。",
+      "downloadAll": "すべてダウンロード",
+      "clearAll": "すべてクリア",
+      "maxImagesError": "最大10枚の画像をアップロードできます",
+      "maxImagesHint": "最大10枚の画像がアップロード可能です"
     }
 }
\ No newline at end of file

src/locales/ko/tools.json

@@ -135,5 +135,27 @@
         "lightBlue": "라이트 블루",
         "brightPink": "브라이트 핑크"
       }
+    },
+   "imageCompressor": {
+      "title": "이미지 압축",
+      "description": "온라인으로 이미지 압축, 일괄 처리 지원",
+      "dropzoneText": "여기에 이미지를 클릭하거나 드래그하세요 (다중 선택 지원)",
+      "quality": "압축 품질",
+      "maxSize": "최대 파일 크기",
+      "compress": "압축 시작",
+      "compressing": "압축 중...",
+      "download": "압축된 이미지 다운로드",
+      "original": "원본 이미지",
+      "compressed": "압축된 이미지",
+      "originalSize": "원본 크기",
+      "compressedSize": "압축 후 크기",
+      "savedSpace": "절약된 공간",
+      "filename": "파일명",
+      "qualityTooltip": "압축 품질을 설정합니다. 값이 높을수록 이미지 품질이 좋아지지만, 파일 크기가 커집니다.",
+      "maxSizeTooltip": "압축 후 최대 파일 크기를 설정합니다. 이 크기를 초과하면 자동으로 압축 매개변수가 조정됩니다.",
+      "downloadAll": "전체 다운로드",
+      "clearAll": "모두 삭제",
+      "maxImagesError": "최대 10개의 이미지를 업로드할 수 있습니다",
+      "maxImagesHint": "최대 10개의 이미지를 업로드할 수 있습니다"
     }
 }
\ No newline at end of file

src/locales/zh/tools.json

@@ -133,5 +133,27 @@
         "lightBlue": "浅蓝",
           "brightPink": "亮粉"
         }
+    },
+    "imageCompressor": {
+      "title": "图片压缩",
+      "description": "在线压缩图片，支持批量处理",
+      "dropzoneText": "点击或拖拽图片到此处（支持多选）",
+      "quality": "压缩质量",
+      "maxSize": "最大文件大小",
+      "compress": "开始压缩",
+      "compressing": "压缩中...",
+      "download": "下载压缩后的图片",
+      "original": "原图",
+      "compressed": "压缩后",
+      "originalSize": "原始大小",
+      "compressedSize": "压缩后大小",
+      "savedSpace": "节省空间",
+      "filename": "文件名",
+      "qualityTooltip": "设置压缩质量，数值越高图片质量越好，文件也越大",
+      "maxSizeTooltip": "设置压缩后的最大文件大小，超过此大小会自动调整压缩参数",
+      "downloadAll": "下载全部",
+      "clearAll": "清除全部",
+      "maxImagesError": "最多只能上传 10 张图片",
+      "maxImagesHint": "最多可上传 10 张图片"
     }
 }

src/pages/Home.jsx

@@ -8,6 +8,7 @@ const tools = [
   { id: 'quoteCard', icon: '/assets/icon/quotecard.png', path: '/quote-card' },
   { id: 'markdown2image', icon: '/assets/icon/markdown2image.png', path: '/markdown-to-image' },
   { id: 'subtitleGenerator', icon: '/assets/icon/subtitle2image.png', path: '/subtitle-to-image' },
+  { id: 'imageCompressor', icon: '/assets/icon/image-compressor.png', path: '/image-compressor' },
   
   { id: 'latex2image', icon: '/assets/icon/latex2image.png', path: '/latex-to-image' },
   { id: 'jsonFormatter', icon: '/assets/icon/json-format.png', path: '/json-formatter' },

src/pages/ImageTools.jsx

@@ -9,6 +9,7 @@ const tools = [
   { id: 'markdown2image', icon: '/assets/icon/markdown2image.png', path: '/markdown-to-image' },
   { id: 'latex2image', icon: '/assets/icon/latex2image.png', path: '/latex-to-image' },
   { id: 'subtitleGenerator', icon: '/assets/icon/subtitle2image.png', path: '/subtitle-to-image' },
+  { id: 'imageCompressor', icon: '/assets/icon/image-compressor.png', path: '/image-compressor' },
   
  ];