給picgo上傳的圖片加個水印

flydean發表於2024-04-16
PicGo

之前給大家介紹了picgo和免費的圖床神器。我們本可以開開心心的進行markdown寫作了。

但是總是會有那麼一些爬蟲網站過來爬你的文章，還把你的文章標明是他們的原著。咋辦呢？這裡有一個好的辦法就是把markdown中上傳的圖片加上自己的水印不就行了。

說幹就幹。接下來我會介紹如何在picgo中進行配置，給上傳的圖片加上水印。

picgo水印外掛

當然要給picgo新增功能，第一首選就是去找找有沒有對應的外掛。

我們在picgo的外掛設定中搜尋：水印,然後點選。

很遺憾，你什麼都找不到。那麼是不是picgo沒有水印外掛呢？

當然不是。我們換個英文來搜尋一下：watermark。 好了，一下出來了兩個。

image-20240410135940772

那麼我們到底應該裝哪個呢？

別急，我們先點選兩個外掛的標題，會自動跳轉到外掛的主頁。

他們的地址分別是： https://github.com/terwer/picgo-plugin-watermark-elec 和 https://github.com/fhyoga/picgo-plugin-watermark

經過對比，我們可以看到picgo-plugin-watermark-elec是從picgo-plugin-watermark fork過來的。原始的picgo-plugin-watermark已經有3年沒有更新了。

基於：最新的就是最好的這一基本原則。我們就選擇picgo-plugin-watermark-elec來使用吧。

回到PicGo中，我們點選安裝，進行外掛的安裝。

安裝需要點時間，我們多等一等。

安裝好之後，我們進入他的配置頁面：

image-20240410151428537

可以看到有字型檔案路徑，水印文字，水印文字顏色，字型大小，水印圖片路徑，水印位置和最小尺寸這幾個選項需要填寫。

  1. 字型檔案路徑。E.g./Users/fonts/Arial-Unicode-MS.ttf。

​ 預設只支援英文水印，中文支援需要自行匯入中文字型檔案。

  1. 水印文字。E.g.hello world

  2. 水印文字的顏色，支援rgb和hex格式。E.g.rgb(178,178,178)、#b2b2b2

  3. 字型大小，預設14

  4. 水印圖片路徑。E.g./Users/watermark.png，優先順序大於文字

  5. 位置，預設rb

    export enum PositionType {
  lt = "left-top",
  ct = "center-top",
  rt = "right-top",
  lm = "left-middle",
  cm = "center-middle",
  rm = "right-middle",
  lb = "left-bottom",
  cb = "center-bottom",
  rb = "right-bottom"
}

  6. 原圖最小尺寸，小於這一尺寸不新增水印。E.g.200*200。

​ 高度或寬度任何一個小於限制，都會觸發。

按照你自己的習慣，我們可以設定好這些屬性。

字型的話，最好設定一箇中文字型，這樣我們可以新增中文水印。

如果你是mac電腦，那麼字型檔案的路徑在：/System/Library/Fonts/下面。

這裡我選擇的是這個字型： /System/Library/Fonts/Hiragino Sans GB.ttc

有人說，那麼字型顏色在哪裡選啊？

給大家推薦一個官方的顏色選擇網站：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Color_picker_tool

等等，就在我配置好之後，再次上傳圖片的時候，發現了一個了不得的結論：圖片上傳居然失敗了.....

沒辦法只好去檢查一下日誌：

[PicGo INFO] beforeTransformPlugins: watermark running
[PicGo INFO] [PicGo Server] get the request {"list":["/Users/test/Library/Application Support/typora-user-images/image-20240410252432593.png"]}
[PicGo INFO] [PicGo Server] upload files in list
[PicGo INFO] Before transform
[PicGo INFO] beforeTransformPlugins: watermark running
[PicGo INFO] [PicGo Server] upload result

------Error Stack Begin------
Error: Unsupported OpenType signature ttcf
at parseBuffer (/Users/test/Library/Application Support/picgo/node_modules/opentype.js/src/opentype.js:204:15)
at Object.loadSync (/Users/test/Library/Application Support/picgo/node_modules/opentype.js/src/opentype.js:380:12)
at Function.Text2svg.loadSync (/Users/test/Library/Application Support/picgo/node_modules/text2svg/index.js:61:23)
at new Text2svg (/Users/test/Library/Application Support/picgo/node_modules/text2svg/index.js:18:23)
at Object.exports.generate (/Users/test/Library/Application Support/picgo/node_modules/logo.svg/lib/index.js:25:16)
at getSvg (/Users/test/Library/Application Support/picgo/node_modules/picgo-plugin-watermark-elec/lib/text2svg.js:34:22)
at Object.handle (/Users/test/Library/Application Support/picgo/node_modules/picgo-plugin-watermark-elec/lib/index.js:34:49)
at /Applications/PicGo.app/Contents/Resources/app.asar/node_modules/picgo/dist/index.cjs.js:1:20521
at Array.map ()
at je.handlePlugins (/Applications/PicGo.app/Contents/Resources/app.asar/node_modules/picgo/dist/index.cjs.js:1:20455)

好像是沒有上傳成功.

從錯誤看來是ttcf也就是我們的字型檔案有問題。

直覺是因為我的字型檔案帶了空格。換一個沒有空格的，或者把字型改個名字。

再試一次，還是不行.....

然後研究一下了字型檔案。發現其實是有兩種格式的，一種是TTF，一種是TTC。

我們換成TTF再試一下，這次成功啦。

image-20240410152432593

看看水印是不是出來了？

總結

好了，現在我們已經成功的給Picgo加上水印了。那麼朋友們，大家能從這個故事中學到什麼呢？

當然是遇到問題的解決方法啦！事實上，如果上面的嘗試都不成功的話，我的下一步計劃是把外掛切換到最開始fork之前的版本再試試。

點我檢視更多精彩內容:www.flydean.com

相關文章