Text Behind Image：开源的在线图像处理工具，在图中角色背后添加文字Text Behind Image 是

❤️ 如果你也关注大模型与 AI 的发展现状，且对大模型应用开发非常感兴趣，我会快速跟你分享最新的感兴趣的 AI 应用和热点信息，也会不定期分享自己的想法和开源实例，欢迎关注我哦！

🥦 微信公众号｜搜一搜：蚝油菜花 🥦

🚀 快速阅读

Text Behind Image 是一款开源的在线工具，支持用户在图片中的角色背后添加文字，创建具有视觉冲击力的海报和社交媒体图像。
用户可以通过该工具自定义文字、字体、颜色、位置、粗细、不透明度等多种选项，并能将设计好的图片直接分享到社交媒体平台。
该工具基于 Next.js 构建，利用 React 的服务器渲染框架和前端技术实现图像处理和文字添加功能。

正文（附运行示例）

Text Behind Image 是什么

Text Behind Image 是一款开源的在线工具，支持用户在图片中的角色背后添加文字，创建具有视觉冲击力的海报和社交媒体图像。用户可以在图像中的主体背后添加自定义文本，并提供文字、字体、颜色、位置、粗细、不透明度、旋转和重复等多种自定义选项。该工具由 16 岁的开发者 Rexan Wong 推出，代码完全公开在 GitHub 上。

Text Behind Image 的主要功能

文字添加：用户在图片中的角色背后添加自定义文字。
样式定制：提供文字、字体、颜色、位置、粗细、不透明度等多种自定义选项。
社交媒体分享：支持将设计好的图片直接分享到各种社交媒体平台。
自动优化字体：用 next/font 自动优化和加载字体，提高加载速度和用户体验。

Text Behind Image 的技术原理

Next.js 框架：基于 Next.js 构建，用 React 的服务器渲染框架，构建快速、可扩展的 Web 应用。
图像处理：基于前端技术（如 Canvas 或 SVG）处理图像，实现文字的添加和定位。
CSS3 和 HTML5：用 CSS3 的高级特性（如 Flexbox 和 Grid 布局）和 HTML5 的新元素构建用户界面和实现设计效果。

如何运行 Text Behind Image

安装和运行

克隆 GitHub 仓库：

git clone https://github.com/RexanWONG/text-behind-image.git
cd text-behind-image

安装依赖：

npm install
# 或者使用 yarn
yarn install

启动开发服务器：

npm run dev
# 或者使用 yarn
yarn dev

在浏览器中打开 http://localhost:3000 查看效果。

示例代码

以下是一个简单的示例，展示如何在 app/page.tsx 中使用 Text Behind Image：

import { useState } from "react";
import Image from "next/image";

const TextBehindImage = () => {
  const [text, setText] = useState("");
  const [imageSrc, setImageSrc] = useState("/path/to/image.jpg");

  return (
    <div>
      <h1>Text Behind Image</h1>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Enter your text here"
      />
      <input
        type="file"
        onChange={(e) => {
          if (e.target.files && e.target.files[0]) {
            setImageSrc(URL.createObjectURL(e.target.files[0]));
          }
        }}
      />
      <div className="image-container">
        <Image
          src={imageSrc}
          alt="Background Image"
          layout="fill"
          objectFit="cover"
        />
        <div className="text-layer">{text}</div>
      </div>
      <style jsx>{`
        .image-container {
          position: relative;
          width: 100%;
          height: 500px;
        }
        .text-layer {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          color: white;
          font-size: 24px;
          text-align: center;
          padding: 20px;
          background: rgba(0, 0, 0, 0.5);
        }
      `}</style>
    </div>
  );
};

export default TextBehindImage;

代码解释

状态管理：使用 useState 管理输入框的文字和背景图片的路径。
文件上传：通过文件输入框选择图片，并将其路径设置为 imageSrc。
图像和文字层：使用 Image 组件显示背景图片，并在图片上添加文字层。
样式：使用内联样式和 styled-jsx 定义样式，确保文字层覆盖在图片底部，并有一定的透明度。

资源

项目官网：textbehindimage.rexanwong.xyz/
GitHub 仓库：github.com/RexanWONG/t…

🥦 微信公众号｜搜一搜：蚝油菜花 🥦