安全隐私可离线的图片水印工具

在线使用：https://imgmarker.hex.ac.cn

ImageMarker 是一款纯前端图片水印工具，支持平铺文字水印处理。所有操作均在浏览器端完成，无需上传图片到服务器，保护您的数据安全。

• 图片上传：支持拖拽或点击上传，兼容 JPG、PNG、GIF、WebP 格式
• 水印配置：
  • 自定义水印文字内容
  • 10 种系统字体选择
  • 颜色选择器 + 十六进制输入
  • 透明度调节（0-100%）
  • 角度调节（-180° 到 180°）
  • 间距调节（10-500px）
  • 字体大小调节（10-200px）
• 实时预览：Canvas 渲染，参数修改即时生效
• 导出下载：支持 PNG / JPEG 格式输出，JPEG 质量可调
• 国际化：自动检测浏览器语言，支持简体中文、繁體中文、English
• 安全隐私：纯前端处理，图片不离开本地

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

src/
├── components/                # Astro 页面组件
├── i18n/
│   ├── index.js               # 国际化核心逻辑
│   └── locales/
│       ├── zh-CN.json         # 简体中文
│       ├── zh-TW.json         # 繁體中文
│       └── en.json            # English
├── layouts/Layout.astro       # 页面布局
├── pages/index.astro          # 主页面
├── scripts/
│   ├── app.js                 # 应用入口与事件绑定
│   ├── state.js               # 状态管理器
│   └── renderer.js            # Canvas 渲染引擎与水印计算
└── styles/global.css           # 全局样式

• 框架：Astro 6.x
• 渲染：HTML5 Canvas API
• 语言：JavaScript (ES Modules)
• 国际化：客户端 i18n 方案（动态 fetch JSON）

命令	说明
npm install	安装依赖
npm run dev	启动开发服务器（localhost:4321）
npm run build	构建生产版本到 ./dist/ 目录
npm run preview	本地预览构建产物

ImageMarker 完全在前端运行，图片数据不会上传到任何服务器。所有水印处理和图片导出都在您的浏览器本地完成，确保您的图片隐私安全。

• txisfine

本项目由 MonkeyCode-AI 智能开发平台协助构建。