专栏首页SpiritLingHexo 文章图片添加水印,不用云处理

Hexo 文章图片添加水印,不用云处理

由于网上找到的都是借用第三方云处理添加水印,但是我不太想用,所以自己开发了一个插件

Hexo 图片添加水印Github地址

目前插件可以直接在 hexo 官网上搜索到

下面内容都是在 Github 上复制过来的,我的正式版博客目前挂载在我的 Github 仓库 blog

一款用于 Hexo 静态博客网站生成时对图片添加水印。

不对原图产生任何影响,在网站静态页构建过程中将原图读取,输出添加了水印的图片。

在构建的静态网站中不会存在原图,只存在水印图片。

一定要阅读最后的提示事项,包含现有版本的支持情况和即将添加的功能

使用 npm 安装插件

npm install hexo-images-watermark

在站点配置文件 _config.yml 中进行如下配置:

watermark:
    enable: true
    textEnable: true
    rotate: -45
    gravity: centre

hexo generate 运行时会自动为你的 _post 目录下的图片添加水印,新的图片将会放到 public 目录中对应的位置。

必备配置参数

enable

默认值:无

说明true 将会执行图片添加水印,false 将会不执行添加

textEnable

默认值:false

说明:是否使用文本来添加水印(❌警告:目前不支持文本和图片同时添加水印)

imageEnable

默认值:false

说明:是否使用图片来添加水印(❌警告:目前不支持文本和图片同时添加水印)

其他参数

text

默认值:使用配置文件中的url,一旦url不存在直接显示作者名字(SpiritLing)

说明:当你使用的文字过长时,一旦转为图片后大于待加水印的图片尺寸,则会出现错误。

fontPath

默认值:undefined,使用 text-to-svg 自带字体

说明:自己加载需要的字体,支持单个字体文件,不区分中英文;如果纯中文,请只加载中文字体,例:需要加载 source/static/font/custom.ttf 字体直接将其写入到配置文件中即可

color

默认值:rgb(169,169,167)

说明:颜色可以使用 rgb,rgba,#xxxxxx以及red名字式的。⚠️只对text有效

gravity

默认值:southeast

说明:设置水印位置处于什么方向,以 上北下南左东右西 来确定

参数可用值:

类型

说明

备注

centre

中央

图片正中间

north

上方中间

west

左边中间

south

下边中间

east

西

右边中间

northwest

东北

左上角

southwest

东南

左下角

southeast

西南

右下角

northeast

西北

右上角

fontSize

默认值:18

说明:文本字体大小,⚠️只对text有效

watermarkImage

默认值:watermark.png

说明:水印图片,放置在source文件根路径的图片名称;⚠️大小不要超过任何一张文章中的图片,否则会出错,可以搭配缩放进行使用

width

默认值:50

说明:对图片进行缩放。⚠️只对image有效

height

默认值:50

说明:对图片进行缩放。⚠️只对image有效

rotate

默认值:0

说明:旋转角度,如45代表逆时针45度,-45代表顺时针45度

background

默认值:transparent

说明:配合text和rotate使用,指的是文字转成的图片一旦旋转会出现多余空白,设置这些地方的颜色,一般透明色即可

使用注意事项⚠️⚠️⚠️

  1. 文字不要过长过大,水印图片不要过大(太大可以使用缩放,⚠️但是缩放是全局性的),否则都会出现错误,终止生成静态页面
  2. 暂不支持图片和文字共同添加
  3. 目前只支持 *.jpg,*.jpeg*.png 两种格式图片,并且只支持source/_posts文件夹下的图片,也就是文章本地图片;同时也不支持远程图片
  4. 水印图片也不支持远程和非soucre根路径下的文件,也是只支持 *.jpg,*.jpeg*.png 两种格式图片
  5. 不支持循环满图添加水印
  6. 请使用 1.1.x 以上版本, 1.0.x 是进行Hexo api相关测试时使用的,版本杂乱无章,使用 1.0.x 版本出现任何问题,概不理会

TODO LIST

  • 文字水印
    • 自定义文字,颜色,大小
    • 自定义字体 - 2019-12-24 Done
    • 支持循环添加
    • 超限处理
  • 图片水印
    • 自定义水印图片
    • 远程水印图片
    • 支持循环添加
    • 超限处理
  • 位置
    • 固定位置:九个方位
    • 自定义 top,left
  • 旋转
  • 缩放(仅限图片)
  • 其他格式支持

本文作者: SpiritLing 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 4.0 许可协议。转载请注明出处! 原文地址:https://blog.spiritling.cn/posts/72dc68b0/

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:https://www.cnblogs.com/spirit-ling/复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • Hexo -4- 向文章添加图片的方法

    这种相对路径的图片显示方法在博文详情页面显示没有问题,但是在首页预览页面图片将显示不出来。如果希望图片在文章和首页中同时显示,可以使用标签插件语法。

    为为为什么
  • PHP图像处理 imagestring添加图片水印与文字水印操作示例

    本文实例讲述了PHP图像处理 imagestring添加图片水印与文字水印操作。分享给大家供大家参考,具体如下:

    砸漏
  • Python基础模块:图像处理模块@PIL(批量分类处理图片及添加水印)

    最近接到一个需求,把一批照片按照分辨率进行分类存储,再将其中指定宽高比的照片设置为特定的分辨率且添加水印。

    可以叫我才哥
  • 丝滑的博客:基于COS/CDN/CI/Hexo/DNS

    作者介绍 羽瀚尘:研究生在读,喜欢互联网技术,善于使用公有云服务满足现实需求。 目前搭建博客有哪些选择呢? 动态博客:WordPress... 静态博客...

    云存储
  • 借助数据万象(原万象优图),让 hexo 也用上 webp

    我的博客目前是使用 hexo + Next 主题搭建在 GitHub Pages 上的,使用 git 管理,并接入了 Travis-CI 自动发布。一直以来,对...

    edsion
  • 【玩转腾讯云】用COS+CDN+CI+Hexo+Next+VsCode+智能DNS搭建丝滑的博客

    对于一般的内容而言,使用动态博客较为复杂,需要数据库、运行环境的配合。动态博客的代码也较为复杂,修改代码进行个性化难度较高。

    羽翰尘
  • 一文教你把 Hexo 博客搭建在云端

    本教程依赖Node.js(不低于 10.13,建议使用 Node.js 12.0 及以上版本),Git,Vscode环境,Coding,腾讯云,Lean Clo...

    Yorkyu
  • 腾讯云对象存储COS + 数据万象CI = 完善的图片解决方案

    PHP工程师,开源爱好者,WordPress插件Sync QCloud COS 作者,GitHub@sy-records

    云存储
  • 【玩转腾讯云】腾讯云对象存储COS + 数据万象CI = 完善的图片解决方案

    在日常开发当中,我们必然会遇到一些图片存储问题,例如用户头像、聊天发生的图片等,而这些图片资源存储是个问题,普遍做法都是直接落在服务器上进行存储,而我推荐的是图...

    沈唁
  • 从WordPress到hexo的必经之路

    本来不打算写关于hexo教程的,Google上关于hexo的文章到处都有,重复造轮子的事情本身意义不大。之前的博客一直使用的是WordPress,朋友说用Wor...

    零式的天空
  • 99.999999%人看不出来的水印,专治各种盗图

    一个专业摄影师辛苦拍摄的照片,因为没打水印,被别人大肆盗用牟利。就算加了水印,也会被巧妙地裁切或者P掉。

    云存储
  • 提高网站响应速度 全网最全的免费图床使用介绍

    经常写文章的小伙伴可能会头疼,图片需要一张一张的上传,费劲也耗时,今日就引荐几款超简略的图床东西。图床便是一个在网络上存储图片的地方,意图是为了节约本地服务器空...

    梦溪
  • 不会用PS如何去水印?教你如何一键无痕去水印

    说起去水印,大部分人首先想到的就是Photoshop,也就是我们通常所说的PS软件。

    用户6256495
  • 【玩转Lighthouse】搭建Hexo博客并将Lighthouse作为网站发布平台和图床

    相信很多人选择搭建自己的博客,会选择现有的博客系统方案,比如:Wordpress、Hexo和Halo等。

    Mintimate
  • Hexo部署远程仓库(Conding、Gitee、Github)

    Git可以有效、高速的处理各种项目版本管理。也就是用来管理你的hexo博客文章,上传到GitHub的工具。

    咕咕星
  • Hexo + github 打造个人博客

    前两年开始用 wordpress 搭了一个网站,但服务器是在 Linode 上,之所以要放在 Linode 上,要从买的域名说起,因为我买的域名是 fengzh...

    古时的风筝
  • 使用Hexo+Github+腾讯云+Netlify搭建个人博客

    要使用Hexo必须先安装Git和Node.js。本文是在Ubuntu20环境下进行操作的。使用其它系统也可以将下面的操作作为参考。

    首飞

扫码关注腾讯云开发者

领取腾讯云代金券