文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-11-30 09:57

关注

我写一些文档或者公众号文章使用的是  Typora,如果涉及到文章中有图片时,直接复制图片粘贴到 Typora 中,然后使用  PicGo 上传到图床。

这样不管是发布公众号(公众号会从图床下载然后上传)还是博客,图片地址的问题就解决了。但会有另外一个问题,网上下载的图片或者截图的图片通常比较大,现在我都是手动将文件转为 webp 格式,然后重新复制到 Typora 中,非常麻烦。

后来发现  PicGo 有插件机制,一个想法就诞生了:

下面就来讲解下怎样来实现这个插件的开发。

环境

写代码前的准备

全局安装  picgo:

sudo npm install picgo -g

使用  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

向导中推荐使用  TS  语言,我这里使用的就是默认选项,所以需要全局安装  typescript:

npm install -g typescript

本插件的目的是将上传的图片转为  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 => {
    // 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内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯