@zhaoshijun/compress 1.0.1 → 1.0.2

package/README.md

@@ -11,6 +11,7 @@
 - ⚙️ **灵活配置**：支持配置文件 (`compress.config.js`)，可精细控制压缩参数。
 - 🛡 **安全可靠**：支持备份原文件，默认不覆盖源文件（CLI 模式输出到指定目录）。
 - 📦 **智能缓存**：Vite 插件基于内容 Hash 缓存，避免重复压缩，提升构建速度。
+- 💧 **水印功能**：支持添加文字水印，可自定义透明度、密度、颜色等参数。
 
 ## 安装
 
@@ -49,6 +50,11 @@ CLI 工具用于批量扫描并压缩本地图片文件。
 | `--backup`        |      | 启用备份模式（将原文件复制为 `.backup`）             |
 | `--dry-run`       |      | 演练模式，仅列出将要处理的文件，不进行实际压缩和写入 |
 | `--quiet`         | `-q` | 静默模式，仅输出错误信息                             |
+| `--watermark`     | `-w` | 启用水印                                             |
+| `--watermark-text <text>` | | 水印文本内容 |
+| `--watermark-opacity <opacity>` | | 水印透明度 (0-1) |
+| `--watermark-density <density>` | | 水印密度 (1-10) |
+| `--watermark-color <color>` | | 水印颜色 (hex 或 rgba) |
 | `--help`          | `-h` | 显示帮助信息                                         |
 
 ### 示例
@@ -59,8 +65,41 @@ npx @zhaoshijun/compress --dry-run
 
 # 使用指定配置文件并开启静默模式
 npx @zhaoshijun/compress -c ./config/compress.js -q
+
+# 压缩图片并添加水印
+npx @zhaoshijun/compress -w --watermark-text "Copyright 2024"
+
+# 压缩图片并添加自定义水印
+npx @zhaoshijun/compress -w --watermark-text "My Watermark" --watermark-opacity 0.3 --watermark-color "#ff0000"
+```
+
+## 水印功能
+
+### 单独添加水印
+
+如果只需要给图片添加水印而不进行压缩，可以使用 `watermark` 命令：
+
+```bash
+# 给图片添加水印（输出到 ./watermarked 目录）
+npx @zhaoshijun/compress watermark --watermark-text "Copyright 2024"
+
+# 自定义水印参数
+npx @zhaoshijun/compress watermark --watermark-text "Confidential" --watermark-opacity 0.7 --watermark-density 5 --watermark-color "rgba(255,0,0,0.5)"
+
+# 指定输出目录
+npx @zhaoshijun/compress watermark --watermark-text "Watermark" --output ./output
 ```
 
+### 水印参数说明
+
+| 参数 | 说明 | 默认值 | 范围 |
+| ---- | ---- | ------ | ---- |
+| `text` | 水印文本内容 | '' | 必填 |
+| `opacity` | 水印透明度 | 0.5 | 0-1 |
+| `density` | 水印密度（平铺数量） | 3 | 1-10 |
+| `color` | 水印颜色 | '#ffffff' | hex 或 rgba |
+| `fontSize` | 水印字体大小 | 24 | 正整数 |
+
 ## Vite 插件
 
 该插件仅在 `vite build` 生产构建模式下生效，会自动压缩项目中引用的图片资源，并替换构建产物中的引用路径。
@@ -96,6 +135,15 @@ export default defineConfig({
 
       // 4. 控制缓存
       cache: false,
+
+      // 5. 启用水印
+      watermark: {
+        text: 'Copyright 2024',
+        opacity: 0.5,
+        density: 3,
+        color: '#ffffff',
+        fontSize: 24
+      }
     }),
   ],
 });
@@ -147,6 +195,15 @@ module.exports = {
   // [CLI专用] 是否备份原文件
   backup: false,
 
+  // 水印配置
+  watermark: {
+    text: '', // 水印文本内容，留空则不添加水印
+    opacity: 0.5, // 水印透明度 (0-1)
+    density: 3, // 水印密度 (1-10)，数值越大水印越多
+    color: '#ffffff', // 水印颜色，支持 hex 或 rgba 格式
+    fontSize: 24 // 水印字体大小
+  },
+
   // [Vite插件专用] 配置
   vite: {
     cache: true, // 是否启用构建缓存，默认 true
@@ -176,3 +233,15 @@ A: 工具会自动检测并跳过损坏的图片，输出警告信息，不会
 
 **Q: Vite 插件会修改源代码中的图片吗？**
 A: 不会。Vite 插件仅在构建过程中处理资源，生成的压缩图片位于构建输出目录（如 `dist/assets`），源代码保持不变。
+
+**Q: 水印会影响图片质量吗？**
+A: 水印是在图片压缩后添加的，不会影响图片本身的压缩质量。水印的透明度可以通过 `opacity` 参数调整，建议设置为 0.3-0.7 之间以获得最佳效果。
+
+**Q: 水印密度如何设置？**
+A: 水印密度 `density` 参数控制水印的平铺数量，范围是 1-10。数值越大，水印越密集。默认值为 3，适合大多数场景。
+
+**Q: 可以只添加水印不压缩吗？**
+A: 可以。使用 `watermark` 命令可以单独给图片添加水印而不进行压缩，输出到 `./watermarked` 目录。
+
+**Q: 水印颜色支持哪些格式？**
+A: 水印颜色支持十六进制格式（如 `#ffffff`）和 RGBA 格式（如 `rgba(255,255,255,0.5)`）。

package/bin/compress.js

@@ -25,6 +25,11 @@ program
   .option('--backup', '启用备份')
   .option('--dry-run', '仅列出将处理的文件，不写入磁盘')
   .option('-q, --quiet', '静默模式，仅输出错误')
+  .option('-w, --watermark', '启用水印')
+  .option('--watermark-text <text>', '水印文本')
+  .option('--watermark-opacity <opacity>', '水印透明度 (0-1)', parseFloat)
+  .option('--watermark-density <density>', '水印密度 (1-10)', parseInt)
+  .option('--watermark-color <color>', '水印颜色 (hex 或 rgba)')
   .action(async (options) => {
     try {
       const startTime = Date.now();
@@ -35,6 +40,15 @@ program
       // 合并命令行选项
       if (options.backup !== undefined) config.backup = options.backup;
       
+      // 合并水印选项
+      if (options.watermark) {
+        config.watermark = config.watermark || {};
+        if (options.watermarkText) config.watermark.text = options.watermarkText;
+        if (options.watermarkOpacity !== undefined) config.watermark.opacity = options.watermarkOpacity;
+        if (options.watermarkDensity !== undefined) config.watermark.density = options.watermarkDensity;
+        if (options.watermarkColor) config.watermark.color = options.watermarkColor;
+      }
+      
       // 确定输入源
       // 如果 config.input 未定义，则默认为当前目录 '**/*.{jpg,jpeg,png,webp}'
       // 需要结合排除规则
@@ -187,6 +201,13 @@ program
   },
   suffix: '.min',
   backup: false,
+  watermark: {
+    text: '',
+    opacity: 0.5,
+    density: 3,
+    color: '#ffffff',
+    fontSize: 24
+  },
   vite: {
     cache: true
   }
@@ -197,3 +218,122 @@ program
   });
 
 program.parse();
+
+// Watermark command
+program
+  .command('watermark')
+  .description('给图片添加水印（不压缩）')
+  .option('-c, --config <path>', '配置文件路径')
+  .option('--watermark-text <text>', '水印文本')
+  .option('--watermark-opacity <opacity>', '水印透明度 (0-1)', parseFloat)
+  .option('--watermark-density <density>', '水印密度 (1-10)', parseInt)
+  .option('--watermark-color <color>', '水印颜色 (hex 或 rgba)')
+  .option('--output <dir>', '输出目录（默认为 ./watermarked）')
+  .action(async (options) => {
+    try {
+      const startTime = Date.now();
+      
+      // 加载配置
+      const config = await loadConfig(options.config);
+      
+      // 合并水印选项
+      if (options.watermarkText) config.watermark.text = options.watermarkText;
+      if (options.watermarkOpacity !== undefined) config.watermark.opacity = options.watermarkOpacity;
+      if (options.watermarkDensity !== undefined) config.watermark.density = options.watermarkDensity;
+      if (options.watermarkColor) config.watermark.color = options.watermarkColor;
+      
+      if (!config.watermark.text) {
+        console.error(chalk.red('Error: Watermark text is required. Use --watermark-text option or set it in config file.'));
+        process.exit(1);
+      }
+      
+      // 确定输入源
+      const inputPattern = config.input || ['**/*.{jpg,jpeg,png,webp}'];
+      const ignorePattern = [...DEFAULT_EXCLUDES];
+      
+      // 查找文件
+      const spinner = ora('Scanning files...').start();
+      const files = await fg(inputPattern, {
+        ignore: ignorePattern,
+        absolute: true,
+        onlyFiles: true
+      });
+      
+      const targetFiles = files.filter(file => isSupported(file));
+      
+      spinner.succeed(`Found ${targetFiles.length} images.`);
+      
+      if (targetFiles.length === 0) {
+        console.log(chalk.yellow('No images found to add watermark.'));
+        return;
+      }
+      
+      // 准备进度条
+      const multibar = new MultiBar({
+        clearOnComplete: false,
+        hideCursor: true,
+        format: '{bar} | {percentage}% | {value}/{total} Files | Current: {file}'
+      }, Presets.shades_classic);
+      
+      let processedCount = 0;
+      let errors = [];
+      
+      const progressBar = multibar.create(targetFiles.length, 0, { file: 'Starting...' });
+      
+      for (const file of targetFiles) {
+        try {
+          const relativePath = path.relative(process.cwd(), file);
+          progressBar.update(processedCount, { file: relativePath });
+          
+          const originalStat = await fs.stat(file);
+          const originalSize = originalStat.size;
+          
+          // 备份
+          if (config.backup) {
+            await fs.copy(file, `${file}.backup`);
+          }
+          
+          // 读取并添加水印
+          const outputDir = path.resolve(process.cwd(), options.output || './watermarked');
+          const relDir = path.dirname(relativePath);
+          const fileName = path.basename(file);
+          const outDir = path.join(outputDir, relDir);
+          const outFilePath = path.join(outDir, fileName);
+          
+          const watermarkedBuffer = await compressImage(file, config, file);
+          
+          // 写入文件
+          await fs.ensureDir(outDir);
+          await fs.writeFile(outFilePath, watermarkedBuffer);
+          
+          const newSize = watermarkedBuffer.length;
+          const sizeDiff = newSize - originalSize;
+          const sizeDiffPercent = ((sizeDiff / originalSize) * 100).toFixed(2);
+          
+          multibar.log(`${chalk.green('✔')} ${relativePath}: ${prettyBytes(originalSize)} → ${prettyBytes(newSize)} (${sizeDiff >= 0 ? '+' : ''}${prettyBytes(sizeDiff)}, ${sizeDiff >= 0 ? '+' : ''}${sizeDiffPercent}%)\n`);
+          
+          processedCount++;
+        } catch (err) {
+          errors.push({ file: path.relative(process.cwd(), file), error: err.message });
+          multibar.log(`${chalk.red('✖')} ${path.relative(process.cwd(), file)}: ${err.message}\n`);
+        }
+      }
+      
+      multibar.stop();
+      
+      const duration = ((Date.now() - startTime) / 1000).toFixed(2);
+      
+      console.log('\n' + chalk.bold('Watermark Summary:'));
+      console.log(`Total Processed: ${processedCount}/${targetFiles.length}`);
+      console.log(`Time Taken: ${duration}s`);
+      
+      if (errors.length > 0) {
+        console.log(chalk.yellow(`\nSkipped ${errors.length} files due to errors:`));
+        errors.forEach(e => console.log(`- ${e.file}: ${e.error}`));
+      }
+      
+    } catch (error) {
+      console.error(chalk.red('Error:'), error.message);
+      process.exit(1);
+    }
+  });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhaoshijun/compress",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Image compression CLI and Vite plugin",
   "type": "module",
   "bin": {

package/src/config/defaults.js

@@ -7,6 +7,13 @@ export const defaultConfig = {
   },
   suffix: '.min',
   backup: false,
+  watermark: {
+    text: '',
+    opacity: 0.5,
+    density: 3,
+    color: '#ffffff',
+    fontSize: 24
+  },
   vite: {
     cache: true
   }

package/src/config/loader.js

@@ -26,11 +26,14 @@ export async function loadConfig(configPath) {
           ...defaultConfig.pngOptions,
           ...(userConfig.pngOptions || {})
         },
+        watermark: {
+          ...defaultConfig.watermark,
+          ...(userConfig.watermark || {})
+        },
         vite: {
           ...defaultConfig.vite,
           ...(userConfig.vite || {})
         },
-        // resize 如果存在则覆盖
         resize: userConfig.resize || undefined
       };
     }

package/src/core/compressor.js

@@ -1,5 +1,6 @@
 import sharp from 'sharp';
 import path from 'path';
+import { addWatermark } from './watermark.js';
 
 /**
  * 压缩图片
@@ -61,5 +62,11 @@ export async function compressImage(input, options, filePath) {
       }
   }
 
-  return instance.toBuffer();
+  let result = await instance.toBuffer();
+
+  if (options.watermark && options.watermark.text) {
+    result = await addWatermark(result, options.watermark);
+  }
+
+  return result;
 }

package/src/core/watermark.js

@@ -0,0 +1,152 @@
+import sharp from 'sharp';
+
+/**
+ * 创建单个水印文本的 SVG
+ * @param {string} text - 水印文本
+ * @param {Object} options - 水印选项
+ * @param {number} options.opacity - 透明度 (0-1)
+ * @param {string} options.color - 颜色 (hex 或 rgba)
+ * @param {number} options.fontSize - 字体大小
+ * @returns {string} SVG 字符串
+ */
+function createWatermarkSVG(text, options) {
+  const { opacity, color, fontSize } = options;
+  const rgbaColor = convertToRGBA(color, opacity);
+  
+  return `
+    <svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
+      <text x="50%" y="50%" 
+            font-family="Arial, sans-serif" 
+            font-size="${fontSize}" 
+            font-weight="bold"
+            fill="${rgbaColor}" 
+            text-anchor="middle" 
+            dominant-baseline="middle" 
+            transform="rotate(-30, 150, 75)">
+        ${text}
+      </text>
+    </svg>
+  `;
+}
+
+/**
+ * 将颜色转换为 RGBA 格式
+ * @param {string} color - 颜色值 (hex 或 rgba)
+ * @param {number} opacity - 透明度
+ * @returns {string} RGBA 颜色字符串
+ */
+function convertToRGBA(color, opacity) {
+  if (color.startsWith('rgba')) {
+    return color.replace(/[\d.]+\)$/, `${opacity})`);
+  }
+  
+  if (color.startsWith('rgb')) {
+    return color.replace(')', `, ${opacity})`).replace('rgb', 'rgba');
+  }
+  
+  if (color.startsWith('#')) {
+    const hex = color.replace('#', '');
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+  }
+  
+  return `rgba(128, 128, 128, ${opacity})`;
+}
+
+/**
+ * 创建平铺水印层
+ * @param {number} width - 图片宽度
+ * @param {number} height - 图片高度
+ * @param {string} text - 水印文本
+ * @param {Object} options - 水印选项
+ * @returns {Promise<Buffer>} 水印层 Buffer
+ */
+async function createTiledWatermark(width, height, text, options) {
+  const { density, opacity, color, fontSize } = options;
+  
+  const watermarkSVG = createWatermarkSVG(text, { opacity, color, fontSize });
+  const watermarkBuffer = Buffer.from(watermarkSVG);
+  
+  const watermarkImage = sharp(watermarkBuffer);
+  const watermarkMeta = await watermarkImage.metadata();
+  
+  const tileSize = Math.max(watermarkMeta.width, watermarkMeta.height);
+  const spacing = Math.floor(tileSize / density);
+  
+  const cols = Math.ceil(width / spacing) + 1;
+  const rows = Math.ceil(height / spacing) + 1;
+  
+  const tiledWidth = cols * tileSize;
+  const tiledHeight = rows * tileSize;
+  
+  const composites = [];
+  for (let row = 0; row < rows; row++) {
+    for (let col = 0; col < cols; col++) {
+      composites.push({
+        input: watermarkBuffer,
+        left: col * spacing,
+        top: row * spacing
+      });
+    }
+  }
+  
+  const tiledWatermark = await sharp({
+    create: {
+      width: tiledWidth,
+      height: tiledHeight,
+      channels: 4,
+      background: { r: 0, g: 0, b: 0, alpha: 0 }
+    }
+  })
+  .composite(composites)
+  .extract({ left: 0, top: 0, width, height })
+  .png()
+  .toBuffer();
+  
+  return tiledWatermark;
+}
+
+/**
+ * 给图片添加水印
+ * @param {string|Buffer} input - 图片路径或 Buffer
+ * @param {Object} watermarkOptions - 水印配置
+ * @param {string} watermarkOptions.text - 水印文本
+ * @param {number} [watermarkOptions.opacity=0.5] - 透明度 (0-1)
+ * @param {number} [watermarkOptions.density=3] - 水印密度 (1-10)
+ * @param {string} [watermarkOptions.color='#ffffff'] - 水印颜色
+ * @param {number} [watermarkOptions.fontSize=24] - 字体大小
+ * @returns {Promise<Buffer>} 添加水印后的图片 Buffer
+ */
+export async function addWatermark(input, watermarkOptions) {
+  const { text, opacity = 0.5, density = 3, color = '#ffffff', fontSize = 24 } = watermarkOptions;
+  
+  if (!text) {
+    throw new Error('Watermark text is required');
+  }
+  
+  if (opacity < 0 || opacity > 1) {
+    throw new Error('Opacity must be between 0 and 1');
+  }
+  
+  if (density < 1 || density > 10) {
+    throw new Error('Density must be between 1 and 10');
+  }
+  
+  const image = sharp(input);
+  const metadata = await image.metadata();
+  
+  const watermarkBuffer = await createTiledWatermark(
+    metadata.width,
+    metadata.height,
+    text,
+    { opacity, density, color, fontSize }
+  );
+  
+  const result = await image
+    .composite([{ input: watermarkBuffer, blend: 'over' }])
+    .toBuffer();
+  
+  return result;
+}

package/src/utils/cache.js

@@ -4,9 +4,18 @@ import crypto from 'crypto';
 
 const CACHE_DIR = path.resolve('node_modules/.cache/@zhaoshijun/compress');
 
-export async function getCache(content) {
+export async function getCache(content, watermarkOptions) {
   const hash = crypto.createHash('sha256').update(content).digest('hex');
-  const cachePath = path.join(CACHE_DIR, hash);
+  
+  let cacheKey = hash;
+  if (watermarkOptions && watermarkOptions.text) {
+    const watermarkHash = crypto.createHash('sha256')
+      .update(JSON.stringify(watermarkOptions))
+      .digest('hex');
+    cacheKey = `${hash}-${watermarkHash}`;
+  }
+  
+  const cachePath = path.join(CACHE_DIR, cacheKey);
   
   if (await fs.pathExists(cachePath)) {
     return await fs.readFile(cachePath);
@@ -14,9 +23,18 @@ export async function getCache(content) {
   return null;
 }
 
-export async function setCache(content, compressedContent) {
+export async function setCache(content, compressedContent, watermarkOptions) {
   const hash = crypto.createHash('sha256').update(content).digest('hex');
-  const cachePath = path.join(CACHE_DIR, hash);
+  
+  let cacheKey = hash;
+  if (watermarkOptions && watermarkOptions.text) {
+    const watermarkHash = crypto.createHash('sha256')
+      .update(JSON.stringify(watermarkOptions))
+      .digest('hex');
+    cacheKey = `${hash}-${watermarkHash}`;
+  }
+  
+  const cachePath = path.join(CACHE_DIR, cacheKey);
   
   await fs.ensureDir(CACHE_DIR);
   await fs.writeFile(cachePath, compressedContent);

package/vite/index.js

@@ -36,6 +36,13 @@ export function compressVitePlugin(options = {}) {
       if (options.quality) config.quality = options.quality;
       // 如果 options 里有 cache，覆盖 config.vite.cache
       if (options.cache !== undefined) config.vite.cache = options.cache;
+      // 特殊处理：如果 options 里有 watermark，深度合并
+      if (options.watermark) {
+        config.watermark = {
+          ...fileConfig.watermark,
+          ...options.watermark
+        };
+      }
     },
 
     async generateBundle(outputOptions, bundle) {
@@ -62,7 +69,7 @@ export function compressVitePlugin(options = {}) {
 
         // 缓存检查
         if (config.vite.cache) {
-          const cached = await getCache(originalBuffer);
+          const cached = await getCache(originalBuffer, config.watermark);
           if (cached) {
             compressedBuffer = cached;
             isCached = true;
@@ -76,7 +83,7 @@ export function compressVitePlugin(options = {}) {
             
             // 写入缓存
             if (config.vite.cache) {
-              await setCache(originalBuffer, compressedBuffer);
+              await setCache(originalBuffer, compressedBuffer, config.watermark);
             }
           } catch (error) {
             console.error(chalk.red(`[compress] Failed to compress ${fileName}: ${error.message}`));