1 需求

虽然很多创作平台会自动在图片上添加水印，但是，一方面，为了不影响阅读，这些水印的位置往往在右下角一个极其卑微的角落，找他们比找我的零花钱还难；另一方面，有些平台或者网站不会自动添加水印。因此，需要一个能够自动添加图片水印的方法，而且最好只在发布到公共平台的文章里添加，本地的笔记里的图片不添加。

FYI: 你正在阅读的这篇文章里的图片已经开启了自动添加水印功能。

2 方案探索

经过探索，在PicGo上传图片时自动添加是一个最优解，因为我本地的笔记里的图片直接保存在本地，而不是图床，只有发布的文章才会使用图床。
PicGo支持插件，而插件库里恰好有两款支持watermark的插件：watermark 1.2.1和watermark-elec 1.2.13:

受到这篇文章的启发（给picgo上传的图片加个水印-腾讯云开发者社区-腾讯云），我最初也选择了watermark-elec 1.2.13.

3 解决问题

具体的配置可以参考上面提到的文章，这里不再赘述。如果你一次就成功，恭喜你个lucky boy/girl；如果你也遇到了一些问题，希望下面的内容对你有所帮助。

3.1 无法安装

这个简单，需要先安装node.js，安装完后重启PicGo，就可以安装插件了，在安装node.js时，会询问你是否安装python以及c/c++的编译工具，可以选择否。

3.2 PicGo莫名重启

哪怕我只是使用英文水印，其他的保持默认（下图），也会遇到上传图片时PicGo直接挂掉的问题。

查看picgo.log，发现每次挂掉前最后一条日志总是watermark running，100%是插件运行时遇到了问题，但是又没有更多的打印信息，我尝试了很多方法，最后都无疾而终。

2025-01-21 15:41:54 [PicGo INFO] Before transform
2025-01-21 15:41:54 [PicGo INFO] beforeTransformPlugins: watermark running

然后我换成了watermark 1.2.1插件。

3.3 格式问题

换成watermark 1.2.1之后，虽然PicGo也会崩溃，但是至少有了更多的日志可以调查：

虽然不懂JavaScript，但是猜测是在index.js第17行遇到了问题，查看index.js，第17行正好是一个throw error：

"use strict";
const util_1 = require("./util");
const text2svg_1 = require("./text2svg");
const config_1 = require("./config");
const input_1 = require("./input");
const handle = async (ctx) => {
    const input = ctx.input;
    const userConfig = ctx.getConfig("picgo-plugin-watermark");
    const [errors, { text, position = "rb", parsedFontSize, image, fontFamily, minWidth, minHeight, textColor, }] = util_1.parseAndValidate(userConfig);
    // Verify configuration
    if (errors.length) {
        ctx.emit("notification", {
            title: "watermark设置错误",
            body: errors.join("，") + "设置错误，请检查"
        });
        // To prevent the next step
        throw new Error();
    }

继续查看parseAndValidate函数，看上去是检查参数是否合法。

exports.parseAndValidate = config => {
    const { position, fontSize, minSize, textColor } = config;
    const parsedFontSize = parseInt(fontSize);
    let parsedConfig = { ...config };
    let errors = [];
    // 无效数字且不为空
    if (isNaN(parsedFontSize) && fontSize !== null) {
        errors.push("fontSize");
    }
    else {
        parsedConfig.parsedFontSize = parsedFontSize;
    }
    if (position && !PositionType[position]) {
        errors.push("position");
    }
    if (minSize) {
        let [minWidth, minHeight] = minSize.split("*").map((v) => +v);
        if (!minWidth || !minHeight) {
            errors.push("minSize");
        }
        else {
            parsedConfig.minHeight = minHeight;
            parsedConfig.minWidth = minWidth;
        }
    }
    if (textColor) {
        try {
            parsedConfig.textColor = color_1.default(textColor).hex();
        }
        catch (error) {
            errors.push('textColor');
        }
    }
    return [
        errors,
        {
            ...config,
            ...parsedConfig
        }
    ];
};

懂了，我把所有的参数都填上，最后果然成功了，附上个人的参数设置供参考：

4 结论

最后，我切回到watermark-elec 1.2.13插件，即使使用同样的参数配置，也没有work，所以最后我选择了watermark 1.2.1。
另外，配置颜色时，可以使用下面的网站颜色选择器 — HTML颜色代码

🤝如需转载，请注明出处和原始链接
😄欢迎关注我的公众号:

如何在PicGo上传的图片中添加水印