编辑文件 astro.config.mjs
安全隐私可离线的图片水印工具
在线使用：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 完全在前端运行，图片数据不会上传到任何服务器。所有水印处理和图片导出都在您的浏览器本地完成，确保您的图片隐私安全。
本项目由 MonkeyCode-AI 智能开发平台协助构建。
About
35/F,Tencent Building,Kejizhongyi Avenue,Nanshan District,Shenzhen
