typora+picgo实现本地自动转储图片base64

lunfangyu

已于 2022-05-19 16:30:43 修改

阅读量746

点赞数

分类专栏：随笔文章标签：图像处理

于 2022-05-19 16:11:28 首次发布

本文链接：https://blog.csdn.net/lunfangyu/article/details/124865418

版权

本文介绍了如何使用typora和picgo配合，将Markdown中的图片转储为base64格式，以解决图片上传不稳定和在CSDN中显示的问题。通过修改picgo的web-uploader插件，实现了本地图片自动转换并以base64形式保存，同时提供了在CSDN上正确显示Markdown图片的设置方法。

摘要由CSDN通过智能技术生成

typora+picgo实现本地自动转储图片base64

本文参考自：typora+picgo实现本地自动转储图片base64值

前言

在3月份的时候，Gitee和谐了个人图床仓库，导致很多人受到影响，我也是其中之一。然后不得不转战到github，并使用jsdelivr进行加速。但最近发现这种方式还是不好用，原因就是不稳定，有时上传不成功；另外，即使上传成功；当把文章写好后，粘贴到CSDN时，图片会出现” [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传]“ 这种问题！很头疼！！！因此想寻求一种更稳定简单的方式来保存图片。

最稳的方式莫过于图片本地保存了，但本地保存图片文件需要本地目录，管理麻烦，也不方便文档在移动端查看等。这时我发现markdown是可以展示base64的图片的，而我们写文章的一般截图文件也比较小。正好符合要求。经过一番查找，看到了上面大神的文章；然后按文章进行实践，并根据情况做了一些改动，在此记录。

软件插件版本

typora：version 0.11.18（beta）

picgo：2.3.0

web-uploader插件版本：1.1.1

web-uploader是picgo-core的上传插件，请自行安装好，网上都有教程。

魔改picgo的插件web-uploader

我的web-uploader插件安装目录为(与原文不一样)：%APPDATA%\picgo\node_modules\picgo-plugin-web-uploader\src

打开此目录，可以看到目录下有一个index.js文件，插件的主要功能代码就在这个文件中。我们需要对其进行修改，直接把原内容全部删除，然后粘贴为如下内容：

// const logger = require('@varnxy/logger')
// logger.setDirectory('/Users/zhang/Work/WorkSpaces/WebWorkSpace/picgo-plugin-web-uploader/logs')
// let log = logger('plugin')

module.exports = (ctx) => {
   
  const register = () => {
   
    ctx.helper.uploader.register('web-uploader', {
   
      handle,
      name: '自定义Web图床',
    })
  }
  const handle = async function (ctx) {
   

    try {
   
      let imgList = ctx.output
      for (let i in imgList) {
   
        let image = imgList[i].base64Image
        if (!image && imgList[i].buffer) {
   
          image = imgList[i].buffer.toString('base64')
        }
        let body = await ((ext,base64)=>{
   
          return "data:image/"+ext.substr(1)+";base64,"+base64
        })(imgList[i].extname,image)

        delete imgList[i].base64Image
        delete imgList[i].buffer
        if(body){
   
          imgList[i]['imgUrl'] = body
        }else{
   
          ctx.emit('notification', {
   
            title: '数据异常',//JSON解析失败
            body: '请检查'
          })
        }
      }
    } catch (err) {
   
      ctx.emit('notification', {
   
        title: '上传失败',
        body: JSON.stringify(err)
      })
    }
  }
  return {
   
    uploader: 'web-uploader',
    // transformer: 'web-uploader',
    // config: config,
    register
  }
}