feature: 新增text behind image 功能

package.json

@@ -8,6 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@imgly/background-removal": "^1.5.5",
     "@react-oauth/google": "^0.12.1",
     "antd": "^5.21.6",
     "browser-image-compression": "^2.0.2",

src/App.jsx

@@ -25,6 +25,7 @@ const TextDiff = lazy(() => import('./components/TextDiff'));
 const SubtitleGenerator = lazy(() => import('./components/SubtitleGenerator'));
 const ImageCompressor = lazy(() => import('./components/ImageCompressor'));
 const ImageWatermark = lazy(() => import('./components/ImageWatermark'));
+const TextBehindImage = lazy(() => import('./components/TextBehindImage'));
 
 function App() {
   return (
@@ -56,7 +57,7 @@ function App() {
               <Route path="/subtitle-to-image" element={<SubtitleGenerator />} />
               <Route path="/image-compressor" element={<ImageCompressor />} />
               <Route path="/image-watermark" element={<ImageWatermark />} />
-              
+              <Route path="/text-behind-image" element={<TextBehindImage />} />
               <Route path="*" element={<NotFound />} />
 
             </Routes>

src/locales/en/tools.json

@@ -189,5 +189,25 @@
     "imageBackgroundRemover": {
       "title": "Image Background Remover",
       "description": "Remove image background"
+    },
+    "textBehindImage": {
+      "title": "Text Behind Image",
+      "description": "Add text between the main subject and background of the image to create a 3D effect",
+      "imageUpload": "Image Upload",
+      "uploadPrompt": "Click or drag to upload an image",
+      "textSettings": "Text Settings",
+      "text": "Text Content",
+      "textPlaceholder": "Enter text",
+      "characters": "characters",
+      "fontSize": "Font Size",
+      "fontWeight": "Font Weight",
+      "rotation": "Rotation Angle",
+      "color": "Color",
+      "opacity": "Opacity",
+      "positionX": "Horizontal Position",
+      "positionY": "Vertical Position",
+      "download": "Download Image",
+      "processing": "Processing...",
+      "noImage": "Please upload an image first"
     }
 }

src/locales/ja/tools.json

@@ -189,5 +189,25 @@
     "imageBackgroundRemover": {
       "title": "画像背景の削除",
       "description": "画像の背景を削除"
+    },
+    "textBehindImage": {
+      "title": "画像の後ろの文字",
+      "description": "画像のメイン主体と背景の間に文字を追加し、3D効果を作成します",
+      "imageUpload": "画像アップロード",
+      "uploadPrompt": "クリックまたはドラッグして画像をアップロード",
+      "textSettings": "文字設定",
+      "text": "文字内容",
+      "textPlaceholder": "文字を入力してください",
+      "characters": "文字数",
+      "fontSize": "フォントサイズ",
+      "fontWeight": "フォントの太さ",
+      "rotation": "回転角度",
+      "color": "色",
+      "opacity": "不透明度",
+      "positionX": "水平位置",
+      "positionY": "垂直位置",
+      "download": "画像をダウンロード",
+      "processing": "処理中...",
+      "noImage": "最初に画像をアップロードしてください"
     }
 }

src/locales/ko/tools.json

@@ -190,5 +190,25 @@
   "imageBackgroundRemover": {
     "title": "이미지 배경 제거",
     "description": "이미지 배경 제거"
+  },
+  "textBehindImage": {
+    "title": "이미지 뒤의 텍스트",
+    "description": "이미지의 주요 객체와 배경 사이에 텍스트를 추가하여 3D 효과를 만듭니다",
+    "imageUpload": "이미지 업로드",
+    "uploadPrompt": "클릭하거나 드래그하여 이미지를 업로드하세요",
+    "textSettings": "텍스트 설정",
+    "text": "텍스트 내용",
+    "textPlaceholder": "텍스트를 입력하세요",
+    "characters": "문자 수",
+    "fontSize": "글자 크기",
+    "fontWeight": "글자 굵기",
+    "rotation": "회전 각도",
+    "color": "색상",
+    "opacity": "불투명도",
+    "positionX": "수평 위치",
+    "positionY": "수직 위치",
+    "download": "이미지 다운로드",
+    "processing": "처리 중...",
+    "noImage": "먼저 이미지를 업로드하세요"
   }
 }

src/locales/zh/tools.json

@@ -188,5 +188,25 @@
     "imageBackgroundRemover": {
       "title": "图片背景去除",
       "description": "去除图片背景"
+    },
+    "textBehindImage": {
+      "title": "文字穿越图片",
+      "description": "在图片主体与背景之间添加文字，创造3D效果",
+      "imageUpload": "图片上传",
+      "uploadPrompt": "点击或拖拽上传图片",
+      "textSettings": "文字设置",
+      "text": "文字内容",
+      "textPlaceholder": "请输入文字",
+      "characters": "个字符",
+      "fontSize": "字体大小",
+      "fontWeight": "字体粗细",
+      "rotation": "旋转角度",
+      "color": "颜色",
+      "opacity": "透明度",
+      "positionX": "水平位置",
+      "positionY": "垂直位置",
+      "download": "下载图片",
+      "processing": "正在处理...",
+      "noImage": "请先上传图片"
     }
 }

src/pages/Home.jsx

@@ -11,6 +11,7 @@ const tools = [
   { id: 'imageCompressor', icon: '/assets/icon/image-compressor.png', path: '/image-compressor' },
   { id: 'imageWatermark', icon: '/assets/icon/image-watermark.png', path: '/image-watermark' },
   { id: 'imageBackgroundRemover', icon: '/assets/icon/image-background-remover.png', path: 'https://huggingface.co/spaces/briaai/BRIA-RMBG-2.0', external: true },
+  { id: 'textBehindImage', icon: '/assets/icon/text-behind-image.png', path: '/text-behind-image' },
   
   { 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

@@ -12,6 +12,7 @@ const tools = [
   { id: 'imageCompressor', icon: '/assets/icon/image-compressor.png', path: '/image-compressor' },
   { id: 'imageWatermark', icon: '/assets/icon/image-watermark.png', path: '/image-watermark' },
   { id: 'imageBackgroundRemover', icon: '/assets/icon/image-background-remover.png', path: 'https://huggingface.co/spaces/briaai/BRIA-RMBG-2.0', external: true },
+  { id: 'textBehindImage', icon: '/assets/icon/text-behind-image.png', path: '/text-behind-image' },
  ];
 
  const ImageTools = () => {

src/styles/fonts.css

+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
+/* 可以添加其他粗重的字体作为备选 */
+@font-face {
+  font-family: 'Inter';
+  src: url('https://fonts.googleapis.com/css2?family=Inter:wght@800&display=swap');
+  font-weight: 800;
+  font-style: normal;
+}
+
+/* 添加其他粗重字体选项 */
+@font-face {
+  font-family: 'Noto Sans';
+  src: url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700;800;900&display=swap');
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&display=swap');
+} 
\ No newline at end of file