成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

插件開發:實現 PicGo 圖片轉 webp 格式

開發 開發工具
PicGo 的插件名稱要求必須帶有前綴:Picgo-Plugin ,否則不能識別,使用 Picgo 腳手架創建插件項目時,后面的名稱只需寫真實名稱即可,否則前綴會重復。

我寫一些文檔或者公眾號文章使用的是  Typora,如果涉及到文章中有圖片時,直接復制圖片粘貼到 Typora 中,然后使用  PicGo 上傳到圖床。

這樣不管是發布公眾號(公眾號會從圖床下載然后上傳)還是博客,圖片地址的問題就解決了。但會有另外一個問題,網上下載的圖片或者截圖的圖片通常比較大,現在我都是手動將文件轉為 webp 格式,然后重新復制到 Typora 中,非常麻煩。

后來發現  PicGo 有插件機制,一個想法就誕生了:

  • 在 Typora 點擊右鍵上傳圖片時,PicGo  插件接收到圖片地址并將圖片轉為 webp 格式,存儲到本地,返回給  PicGo  新的 webp 文件的地址;
  • PicGo 接收到新的地址進行圖床的上傳。

下面就來講解下怎樣來實現這個插件的開發。

環境

  • node:v16.18.1
  • npm:9.1.2
  • PicGo:2.3.1
  • TypeScript:5.1.6

寫代碼前的準備

1、全局安裝  picgo:

sudo npm install picgo -g

2、使用  picgo  命令創建一個插件項目:

picgo init plugin convert-to-webp

PicGo 的插件名稱要求必須帶有前綴:picgo-plugin ,否則不能識別,使用 picgo 腳手架創建插件項目時,后面的名稱只需寫真實名稱即可,否則前綴會重復。

執行上面命令后,會有命令行的向導,需要填寫一些關鍵信息,內容如下:

? Plugin name: convert-to-webp
? Plugin description: convert image to webp
? author: oec2003
? Choose modules you want to develop:
 ? uploader
 ? transformer
?? beforeTransformPlugins
 ? beforeUploadPlugins
 ? afterUploadPlugins
 
Your plugin is just used in CLI? (Y/n) n
? Use TS or JS? (Use arrow keys)
? Yes, use TS Project(recommended) 
  Yes, use JS Project 
? Your plugin has some shortcut for GUI? (Y/n) n

3、向導中推薦使用  TS  語言,我這里使用的就是默認選項,所以需要全局安裝  typescript:

npm install -g typescript

4、本插件的目的是將上傳的圖片轉為  webp  格式,需要使用  sharp 庫,安裝命令如下:

npm install -g sharp
npm install @types/sharp --save-dev

編寫代碼

使用腳手架創建的代碼只有一個 index.ts 文件,如下圖:

圖片

在根目錄中執行npm install 安裝依賴。

index.ts 代碼如下:

import path from 'path';
import sharp from 'sharp';
import { promises as fs } from 'fs';
import { PicGo } from 'picgo'

export = (ctx: PicGo) => {
  const handle = async (ctx: PicGo): Promise<PicGo> => {
    // ctx.input 是一個數組,因為都是單個文件上傳,所以取數組中第一個數據就行
    // imgPath 得到的就是文件的本地路徑
    let [imgPath] = ctx.input;
    let imgExt= path.extname(imgPath);
    //如果上傳的就是 webp 格式的文件直接返回
    if (imgExt === '.webp') {
      return ctx;
    }
    //將文件轉為 webp 格式的流
    let imgBuffer = await sharp(imgPath)
      .webp()
      .toBuffer();

    //得到 webp 文件的本地路徑
    const webpPath =path.join(path.dirname(imgPath), path.basename(imgPath, imgExt) + '.webp');
    //將 webp 文件寫入本地,我是想要在本地保留 webp 文件的備份
    // 如果不需要,也可以在 afterUploadPlugins 事件中將本地文件刪除
    await fs.writeFile(webpPath, imgBuffer);

    //將新的 webp 地址包裝為數組返回給  ctx 的 input 對象 
    ctx.input = [webpPath]

    return ctx;
  };

  const register = () => {
    //注意:此處需要使用 beforeTransformPlugins 事件
    ctx.helper.beforeTransformPlugins.register('picgo-plugin-convert-to-webp', {
      handle
    });
  }
  
  return {
    register
  }
}

執行命令 npm run build 進行打包,打包后會生成 dist 目錄,如下圖:

圖片

安裝

在 PicGo 的插件設置中,導入本地插件:

圖片

目錄選擇 dist 目錄所在的目錄:

圖片

安裝成功后如下圖:

圖片

這時可以截圖粘貼到 Typora 中,點擊右鍵上傳圖片:

圖片

上傳成功后,會發現已經變成了 webp 格式:

圖片

更新插件

如果插件的代碼有修改,修改完成后,在 package.json 文件中升級一個版本,重新打包:

圖片

卸載插件。如果不卸載直接進行插件導入,會提示成功,但實際是無效的:

圖片

重新本地導入插件。

導入成功后,需要更新插件:

圖片

更新成功后,需要重啟才能生效:

圖片

重啟后,如果看到版本變為 1.0.1 表示更新成功:

圖片

調試

在導入本地插件或者進行圖片上傳的過程中,有可能會出現錯誤,錯誤日志記錄在 picgo.log 文件中,在 Mac 系統中,該文件的路徑如下:

~/Library/Application\ Support/picgo/picgo.log

比如:我們在代碼中可以通過下面的代碼來輸出日志:

ctx.log.info('ctx.input.path'+imgPath)

在 picgo.log 中就會輸出日志:

圖片

通過這個日志文件的內容,可以進行錯誤的排查。

源碼

本插件的源碼已經上傳到 Github,地址如下:

https://github.com/oec2003/picgo-plugin-convert-to-webp。

責任編輯:姜華 來源: 不止dotNET
相關推薦

2025-04-09 01:50:00

Vite插件壓縮圖片webp

2022-05-19 09:48:07

webp瀏覽器

2021-09-05 15:55:05

WebP圖片格式瀏覽器

2023-11-22 08:21:25

Android開發場景

2010-10-12 13:57:43

GoogleWebP

2024-01-11 08:03:52

程序圖片優化

2017-05-03 13:37:22

互聯網

2021-08-09 05:21:52

微軟 Office Buil應用

2011-09-02 09:49:29

JQuery圖片滾動

2020-05-07 19:21:53

WebP圖片編輯工具開源

2018-10-07 22:59:24

Firefox 瀏覽器谷歌

2025-05-09 08:40:42

插件頁面Vite

2025-02-13 08:22:27

2020-11-16 15:00:53

谷歌應用開發

2022-07-05 21:53:26

記錄圖片WebP

2022-03-14 12:26:45

微信圖片開源

2022-11-01 16:20:56

Java圖像文件圖像文件類型

2016-10-13 13:43:04

WebPGoogleJPEG和PNG格式

2015-11-04 11:17:10

移動開發圖片格式

2011-07-08 15:08:16

iPhone 圖片
點贊
收藏

51CTO技術棧公眾號

主站蜘蛛池模板: 玖玖视频国产 | 亚洲精品成人 | 国产精品一区久久久 | 欧美极品少妇xxxxⅹ免费视频 | av香蕉 | 天堂一区二区三区 | 免费特黄视频 | 欧美日韩综合 | 国产精品毛片一区二区在线看 | 91精品国产综合久久久密闭 | 草草在线观看 | 亚洲午夜精品在线观看 | 免费观看一区二区三区毛片 | 日韩欧美视频 | 久久亚洲91| 国产欧美一区二区久久性色99 | 成人伊人 | 在线免费观看黄色av | 亚洲精品99 | 日韩区| 亚洲小视频 | 精品久久久精品 | 国产一级毛片精品完整视频版 | 日韩av一区二区在线观看 | 午夜影院操 | 成人午夜电影在线观看 | 国产精品一区视频 | 黄网站免费在线观看 | 欧美一级片在线看 | 日韩欧美视频 | 亚洲天堂男人的天堂 | 美国av片在线观看 | 91精品国产综合久久国产大片 | aaaaa毛片| 久久久久久久久久久久91 | 91福利网址| 婷婷开心激情综合五月天 | 久久久精品一区 | 九九爱这里只有精品 | 天天天天天天天干 | 国产精品不卡 |