插件开发：实现 PicGo 图片转 webp 格式

我写一些文档或者公众号文章使用的是 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

1	sudo npm install picgo -g

2、使用 picgo 命令创建一个插件项目

1	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：

1	npm install -g typescript

4、本插件的目的需要将上传的图片转为 webp 格式，需要 sharp 库，安装命令如下：

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

编写代码

1、使用脚手架创建的代码只有一个 index.ts 文件，如下图：

2、在根目录中执行npm install 安装依赖。

3、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
  }
}