🖼️ Vue3 图片水印工具

纯前端图片水印工具，上传即加印，无需后端服务器。

✨ 功能特性

功能	说明
📷 图片上传	支持点击上传和拖拽上传，兼容 JPG / PNG / WebP / BMP
🖌️ 自动水印	上传后自动在图片上添加文字水印，立等可取
👀 实时预览	原图和水印效果左右对比，一目了然
📍 9 宫格位置	水印可置于左上、居中、右下等任意位置
🎨 样式调节	自定义文字颜色、透明度、字体大小
🔁 重复模式	支持单次、水平重复、垂直重复、全屏平铺
🔄 自由旋转	±180° 任意角度旋转水印文字
💡 阴影效果	可开关的文字阴影，让水印更立体
📤 输出格式	支持 PNG（透明背景）和 JPEG（较小体积）
💾 一键下载	处理完成后直接下载，不经过任何服务器
⚡ v-watermark 指令	封装为 Vue 自定义指令，可在任何项目中一行代码复用水印功能
📱 响应式布局	桌面和移动端都能流畅使用

🚀 快速开始

安装依赖

npm install

启动开发模式

npm run dev

浏览器访问 http://localhost:5173 即可使用。

构建生产版本

npm run build

构建产物输出到 dist/ 目录。

🎯 使用方式

1️⃣ 上传图片  →  2️⃣ 调节参数  →  3️⃣ 预览效果  →  4️⃣ 下载成品

基本流程：

1. 点击上传区域或拖拽图片到虚线框中
2. 图片上传后自动在右下角添加默认水印
3. 展开水印设置面板，按需调整文字、颜色、位置等参数
4. 右侧实时预览水印效果
5. 满意后点击「下载带水印的图片」保存到本地

🏗️ 项目结构

vue-watermark/
├── index.html                        # 入口 HTML
├── package.json                      # 依赖配置
├── vite.config.js                    # Vite 构建配置
├── tutorials/
│   ├── watermark-feature.md          # 教程①：上传图片并添加水印
│   └── custom-command.md             # 教程②：封装为 v-watermark 自定义指令
└── src/
    ├── main.js                       # Vue 应用入口（已注册 v-watermark）
    ├── App.vue                       # 根组件
    ├── components/
    │   ├── WatermarkTool.vue         # 主容器组件（总指挥）
    │   ├── ImageUploader.vue         # 图片上传组件（点击/拖拽）
    │   ├── ImagePreview.vue          # 图片预览组件（原图 vs 水印图）
    │   └── WatermarkSettings.vue     # 水印设置面板（所有可调参数）
    ├── composables/
    │   └── useWatermark.js           # 水印核心逻辑（Canvas 处理）
    ├── directives/
    │   └── vWatermark.js             # v-watermark 自定义指令（可复用于任何 Vue 3 项目）
    └── styles/
        └── base.css                  # 全局基础样式

🔧 技术栈

• Vue 3.4+ — 组合式 API（Composition API + <script setup>）
• Vite 5+ — 极速构建工具
• Canvas API — 纯浏览器端图片处理

⚙️ 水印设置详解

展开设置面板后，可调节以下参数：

设置项	默认值	说明
第一行文字	仿制呀	水印上方文字
第二行文字	www.pingping.top	水印下方文字
颜色	#ff0000（红色）	水印文字颜色
透明度	100%	水印不透明度
字体大小	24px	文字尺寸
旋转角度	0°	文字旋转（-180 ~ 180）
阴影	关闭	可配置颜色、模糊、偏移
位置	右下角	9 宫格任意位置
水平边距	20px	距左右边缘距离
垂直边距	20px	距上下边缘距离
重复模式	无重复	水平/垂直/全屏平铺
输出格式	PNG	PNG 或 JPEG

⚡ 使用 v-watermark 自定义指令

本项目还提供 v-watermark 自定义指令，可在任何 Vue 3 项目中一行代码给图片加水印。

<!-- 默认水印 -->
<img v-watermark src="photo.jpg">

<!-- 自定义文字 -->
<img v-watermark="'仿制呀'" src="photo.jpg">

<!-- 完整配置（颜色、透明度、位置、旋转等） -->
<img v-watermark="{
  text: ['仿制呀', 'www.pingping.top'],
  color: '#ff0000',
  opacity: 0.8,
  position: 'center',
  rotation: -15
}" src="photo.jpg">

在新项目中使用只需三步：

1. 复制 src/directives/vWatermark.js 到你的项目
2. 在 main.js 中 app.directive('watermark', vWatermark)
3. 模板中直接使用 v-watermark

📖 教程

章节	内容	链接
第 1 章	上传图片并添加水印——从零讲解 Canvas 绘制、预览下载到可选参数	→ 查看
第 2 章	封装为 v-watermark 自定义指令——设计思路、注册方式、在新项目中复用	→ 查看

📄 许可证

本项目仅供学习参考。