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
  • 旋轉
  • 縮放(僅限圖片)
  • 其他格式支持
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章