一个INFJ的碎碎念，关于技术、生活、学习等等
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颜色代码🤝如需转载，请注明出处和原始链接😄欢迎关注我的公众号:
如果您看到这篇文章,表示您的 blog 已经安装成功.