hexo 图片添加水印（png, jpeg, jpg, gif） | 极简前端

[coder-linx]

https://blog.jijian.link/2020-04-21/hexo-watermark/

本文折腾 hexo 图片添加水印功能，大部分代码沿用： nodejs 图片添加水印（png, jpeg, jpg, gif）

[oldgerman]

博主您好，感谢你的教程，我在next主题下配置了，但运行时报错,TypeError: deepMerge is not a function：

具体情况如下： $ hexo g ERROR Script load failed: themes\next\scripts\image_watermark.js TypeError: deepMerge is not a function at E:\ODG blog\oldgerman.github.io\themes\next\scripts\image_watermark.js:24:25 at E:\ODG blog\oldgerman.github.io\node_modules\hexo\lib\hexo\index.js:232:12 at tryCatcher (E:\ODG blog\oldgerman.github.io\node_modules\bluebird\js\release\util.js:16:23) at Promise._settlePromiseFromHandler (E:\ODG blog\oldgerman.github.io\node_modules\bluebird\js\release\promise.js:517:31) at Promise._settlePromise (E:\ODG blog\oldgerman.github.io\node_modules\bluebird\js\release\promise.js:574:18) at Promise._settlePromise0 (E:\ODG blog\oldgerman.github.io\node_modules\bluebird\js\release\promise.js:619:10) at Promise._settlePromises (E:\ODG blog\oldgerman.github.io\node_modules\bluebird\js\release\promise.js:699:18) at Promise._fulfill (E:\ODG blog\oldgerman.github.io\node_modules\bluebird\js\release\promise.js:643:18) at Promise._resolveCallback (E:\ODG blog\oldgerman.github.io\node_modules\bluebird\js\release\promise.js:437:57) at Promise._settlePromiseFromHandler (E:\ODG blog\oldgerman.github.io\node_modules\bluebird\js\release\promise.js:529:17) at Promise._settlePromise (E:\ODG blog\oldgerman.github.io\node_modules\bluebird\js\release\promise.js:574:18) at Promise._settlePromise0 (E:\ODG blog\oldgerman.github.io\node_modules\bluebird\js\release\promise.js:619:10) at Promise._settlePromises (E:\ODG blog\oldgerman.github.io\node_modules\bluebird\js\release\promise.js:699:18) at Promise._fulfill (E:\ODG blog\oldgerman.github.io\node_modules\bluebird\js\release\promise.js:643:18) at E:\ODG blog\oldgerman.github.io\node_modules\bluebird\js\release\nodeback.js:42:21 at E:\ODG blog\oldgerman.github.io\node_modules\graceful-fs\graceful-fs.js:90:16 at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3) INFO Start processing INFO Files loaded in 6.43 s INFO 0 files generated in 7.63 s

[coder-linx]

@oldgerman 博主您好，感谢你的教程，我在next主题下配置了，但运行时报错,TypeError: deepMerge is not a function：

具体情况如下： $ hexo g ERROR Script load failed: themes\next\scripts\image_watermark.js TypeError: deepMerge is not a function at E:\ODG blog\oldgerman.github.io\themes\next\scripts\image_watermark.js:24:25 at E:\ODG blog\oldgerman.github.io\node_modules\hexo\lib\hexo\index.js:232:12 at tryCatcher (E:\ODG blog\oldgerman.github.io\node_modules\bluebird\js\release\util.js:16:23) at Promise._settlePromiseFromHandler (E:\ODG blog\oldgerman.github.io\node_modules\bluebird\js\release\promise.js:517:31) at Promise._settlePromise (E:\ODG blog\oldgerman.github.io\node_modules\bluebird\js\release\promise.js:574:18) at Promise._settlePromise0 (E:\ODG blog\oldgerman.github.io\node_modules\bluebird\js\release\promise.js:619:10) at Promise._settlePromises (E:\ODG blog\oldgerman.github.io\node_modules\bluebird\js\release\promise.js:699:18) at Promise._fulfill (E:\ODG blog\oldgerman.github.io\node_modules\bluebird\js\release\promise.js:643:18) at Promise._resolveCallback (E:\ODG blog\oldgerman.github.io\node_modules\bluebird\js\release\promise.js:437:57) at Promise._settlePromiseFromHandler (E:\ODG blog\oldgerman.github.io\node_modules\bluebird\js\release\promise.js:529:17) at Promise._settlePromise (E:\ODG blog\oldgerman.github.io\node_modules\bluebird\js\release\promise.js:574:18) at Promise._settlePromise0 (E:\ODG blog\oldgerman.github.io\node_modules\bluebird\js\release\promise.js:619:10) at Promise._settlePromises (E:\ODG blog\oldgerman.github.io\node_modules\bluebird\js\release\promise.js:699:18) at Promise._fulfill (E:\ODG blog\oldgerman.github.io\node_modules\bluebird\js\release\promise.js:643:18) at E:\ODG blog\oldgerman.github.io\node_modules\bluebird\js\release\nodeback.js:42:21 at E:\ODG blog\oldgerman.github.io\node_modules\graceful-fs\graceful-fs.js:90:16 at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3) INFO Start processing INFO Files loaded in 6.43 s INFO 0 files generated in 7.63 s

应该是说你本地没有 hexo-util,你需要看看 const { deepMerge } = require('hexo-util'); 这行代码，不行的话本地安装一下 hexo-util，或者去源码里面把 deepMerge 拷贝出来。

[Myoontyee]

哥哥，我用你的code，也没报错，但是blog页面水印也没有出现哎，甚至调成1也没有

  // 图片宽度小于 100 时不加水印
  minWidth: 1,
  // 图片高度小于 100 时不加水印
  minHeight: 1,

[coder-linx]

@Myoontyee 哥哥，我用你的code，也没报错，但是blog页面水印也没有出现哎，甚至调成1也没有

  // 图片宽度小于 100 时不加水印
  minWidth: 1,
  // 图片高度小于 100 时不加水印
  minHeight: 1,

需要使用官方的引入图片资源标签才能加上水印：{% asset_img 2.jpg %}

此方法生成水印是需要执行npm run build命令， npm run server本地开发时候是不会显示水印的。

本文的hexo及插件相关版本如下：

"hexo": "^4.2.0",
"gifwrap": "^0.9.2",
"jimp": "^0.10.3",

如果版本不一致，可能需要查阅官方文档进行完善。