专栏首页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/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [原创] 利用前端+php批量生成html文件,传入新文本,输出新的html文件

    本人因为要想自己写个小说网站练练手,在其中遇到的一些问题,将其解决方法总结出来,例如: 1:小说网站存储了大量的小说,每个小说主页都很相似,url不同,不是使用...

    SpiritLing
  • 自己写的加密网页,与百度网盘私密很相似,需要密码才能访问(原创)

    题记: 马上就要招聘了,所以我打算放置简历在自己的网页上,但是又不想给除了招聘的人,或者我指定的人外看,所以我需要对网页页面加密 我找了许多资料,查看了许多所谓...

    SpiritLing
  • HTTP 协议相关

    SpiritLing
  • 用树莓派做一个人脸识别开锁应用

    ? 作者:eckygao,腾讯 CSIG 云产品部 1.案例概述 1.1 背景 实现一个人脸识别进行开锁的功能,用在他的真人实景游戏业务中。总的来说,需求...

    腾讯技术工程官方号
  • 200行代码落地人脸识别开锁应用

    2019年国庆,帮朋友实现了一个人脸识别进行开锁的功能,用在他的真人实景游戏业务中。几个月来运行稳定,体验良好,借着这个春节宅家的时间,整理一下这个应用的实现过...

    高树磊
  • 爬虫极滑块验证思路

    给大家获取图片的提示,一般他图片前端页面都已经渲染出来了,可能就是display:none或者透明度0进行隐藏

    小小咸鱼YwY
  • C++核心准则ES.75: 避免使用do语句

    Readability, avoidance of errors. The termination condition is at the end (where...

    面向对象思考
  • React Native应用部署/马甲包热更新-CodePush最新集成总结(2018年最新)

    React Native支持大家用React Native技术开发APP,并打包生成一个APP。在动态更新方面React Native只是提供了动态更新的基础,...

    jiang chen
  • 安装ansible以及简单使用

    ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet、cfengine、chef、func、fabric)的优点,实现...

    端碗吹水
  • React Native应用部署/热更新-CodePush最新集成总结(新)

    React Native应用部署/热更新-CodePush最新集成总结(新) ---- 更新说明: 此次博文更新适配了最新版的CodePush v1.17....

    CrazyCodeBoy

扫码关注云+社区

领取腾讯云代金券