Hexo 文章圖片添加水印,不用雲處理

關於博客文章圖片添加水印,網上差很少都是再說使用某某雲儲存,能夠有免費額度,雲儲存能夠對圖片進行添加水印。html

可是你須要考慮一點,若是博客網站越弄越大,圖文並茂愈來愈多,那麼你照樣須要掏錢。git

因此,一旦你讀了這篇文章,你將會擁有一個本地構建靜態網站時,就自動生成水印圖片。github

這是一個 Hexo 插件,它能夠爲你的文章圖片添加水印。shell

Demo-Centos7 安裝須要的軟件環境-使用rpm安裝JDKnpm

插件地址-SpiritLing/hexo-images-watermarkapi

目前插件能夠直接在 hexo 官網 插件 上搜索到hexo

下面內容都是在插件的 README.md 上覆制過來的
目前個人正式版博客掛載在個人 Github 倉庫 blog,能夠在個人倉庫直接訪問到插件svg

hexo-images-watermark

Build Status npm version npm package download NPM License

一款用於 Hexo 靜態博客網站生成時對圖片添加水印。post

不對原圖產生任何影響,在網站靜態頁構建過程當中將原圖讀取,輸出添加了水印的圖片。測試

在構建的靜態網站中不會存在原圖,只存在水印圖片。

必定要閱讀最後的提示事項,包含現有版本的支持狀況和即將添加的功能

使用 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] 縮放(僅限圖片)
  • [ ] 其餘格式支持
本文做者: SpiritLing
版權聲明: 本博客全部文章除特別聲明外,均採用 BY-NC-SA 4.0 許可協議。轉載請註明出處!
SpiritLing'Blog
首發地址
插件地址
相關文章
相關標籤/搜索