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

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

  • [x] 文字水印

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

Hexo 文章图片添加水印,不用云处理的更多相关文章

  1. 神奇的canvas——巧用 canvas 为图片添加水印

    代码地址如下:http://www.demodashi.com/demo/11637.html 很久之前写过一篇关于 canvas 的文章,是通过 canvas 来实现一个绚丽的动画效果,不管看过没看 ...

  2. Python Windows 快捷键自动给剪贴板(复制)图片添加水印

    编写一个能在windows上使用的按下快捷键自动给剪贴板(复制)的图片添加水印的小工具.plyer.PIL.pyinstaller.pynput.win32clipboard库.记录自己踩过的坑,部分 ...

  3. Android 图片添加水印图片或者文字

    给图片添加水印的基本思路都是载入原图,添加文字或者载入水印图片,保存图片这三个部分 添加水印图片: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ...

  4. java实现给图片添加水印

    package michael.io.image; import java.awt.AlphaComposite; import java.awt.Graphics2D; import java.aw ...

  5. java.imageIo给图片添加水印

    最近项目在做一个商城项目, 项目上的图片要添加水印①,添加图片水印;②:添加文字水印; 一下提供下个方法,希望大家可以用得着: package com.blogs.image; import java ...

  6. php解决微信文章图片防盗链

    解决微信文章图片防盗链 function actionWechatImg() { header('Content-type: image/jpg'); $url = $_GET['url']; $re ...

  7. Python爬虫入门教程 26-100 知乎文章图片爬取器之二

    1. 知乎文章图片爬取器之二博客背景 昨天写了知乎文章图片爬取器的一部分代码,针对知乎问题的答案json进行了数据抓取,博客中出现了部分写死的内容,今天把那部分信息调整完毕,并且将图片下载完善到代码中 ...

  8. Python爬虫入门教程 25-100 知乎文章图片爬取器之一

    1. 知乎文章图片写在前面 今天开始尝试爬取一下知乎,看一下这个网站都有什么好玩的内容可以爬取到,可能断断续续会写几篇文章,今天首先爬取最简单的,单一文章的所有回答,爬取这个没有什么难度. 找到我们要 ...

  9. jQuery效果之封装一个文章图片弹出放大效果

    首先先搭写一个基本的格式: $.fn.popImg = function() { //your code goes here } 然后用自调用匿名函数包裹你的代码,将系统变量以变量形式传递到插件内部, ...

随机推荐

  1. 几句话总结一个算法之Policy Gradients

    强化学习与监督学习的区别在于,监督学习的每条样本都有一个独立的label,而强化学习的奖励(label)是有延后性,往往需要等这个回合结束才知道输赢 Policy Gradients(PG)计算某个状 ...

  2. 解决coursera笔记本(ipynb)打不开的问题

    最近在coursera听课,发现notebook打不开,一直显示加载中. 想到了可能被墙,苦于没有梯子.最后F12,发现有报错 Failed to load resource: net::ERR_CO ...

  3. Java基础之十六 数组

    数组:可以创建并组装它们,通过使用整型索引值访问它们的元素,并且它们的尺寸不能改变. 16.1 数组为什么特殊 数组与其他种类的容器之间的区别有三方面:效率,类型和保存基本类型的能力. 数组是一种效率 ...

  4. Python【每日一问】20

    问: [基础题]: 企业发放的奖金根据利润提成.利润(I): 低于或等于10万元时,奖金可提10%: 高于10万元,低于20万元时,低于10万元的部分按10%提成,高于10万元的部分,可提成7.5%: ...

  5. Can not issue data manipulation statements with executeQuery()的解决方案

     Can not issue data manipulation statements with executeQuery() 报错的解决方案: 把“ResultSet rs = statement. ...

  6. history 用法大全

     history 命令用于显示指定数目的指令命令,读取历史命令文件中的目录到历史命令缓冲区和将历史命令缓冲区中的目录写入命令文件.   语法 history  [options]  [file]   ...

  7. 决策树(下)-Xgboost

    参考资料(要是对于本文的理解不够透彻,必须将以下博客认知阅读,方可更加了解Xgboost): 1.对xgboost的理解(参考资料1和4是我认为对Xgboost理解总结最透彻的两篇文章,其根据作者pa ...

  8. react加入websocket

    1.首先创建一个公共的组件,封装websocket 代码如下 /** * 参数:[socketOpen|socketClose|socketMessage|socketError] = func,[s ...

  9. SQL系列(一)—— SQL简介

    在说到SQL之前需要了解一些关于数据库的概念: 数据库(database):是一个以某种有组织的方式存储的数据集合.存储数据的仓库,不过是以一定的组织方式进行存储. DBMS:数据库管理系统.经常遇到 ...

  10. Flink基本的API

    Flink使用 DataSet 和 DataStream 代表数据集.DateSet 用于批处理,代表数据是有限的:而 DataStream 用于流数据,代表数据是无界的.数据集中的数据是不可以变的, ...