Atom插件开发-使用自己的Chevereto图床API

最近一直在用 Atom 写写markdown，但无奈上传图片真实太麻烦了。找了好几个插件都是要用到 七牛 的账号，由于之前被七牛坑过一次，就没再想用他的打算了。一度放弃后使用在线的markdown，例如 掘金 这些，可感觉用起来还是不太舒服，最终还是折腾起atom插件了。

正好之前有建了个图床站还顺带出了个iOS的App 米米图床 （我是奸商我收费）

也写过一篇相关的文章 iOS开发-RAC+MVVM练手项目 图床App

项目简介

由于自己有图床 目前使用的是 Chevereto，
本文所涉及到内容都是根据 此API文档

所以这款插件只为解决几个问题

• 使用自己图床的API
• 上传图片获得URL

功能分析

功能灰常简单

• 获取剪切板图片数据
• 通过post上传至图床API获得回调数据
• 生成markdown图片内容

image

根据API文档 我们用 Postman 测一下API 看看回调

image

嗯 回调的内容很多，我们就挑一个display_url这个字段吧，够用就行。

代码实现

用的是coffeescript代码

第三方依赖 request

image

module.exports =
  # setting 中的全局变量
  config:
    Api:
      title: "Your api url"
      description: "Input your api url like `https://xxx.com/api/1/upload`"
      type: 'string'
      default: "https://imgurl.xyz/api/1/upload"
    ApiKey:
      title: "ApiKey"
      description: "Input your api key, you can find it in your dashboard, default is my key ,Do not mark sure always available"
      type: 'string'
      default: "a7bb2b091e3f2961e59551a8cf6e05b2"

  activate: (state) ->
    @attachEvent()

  attachEvent: ->
    workspaceElement = atom.views.getView(atom.workspace)
    workspaceElement.addEventListener 'keydown', (e) =>
      # cmd + paste
      if (e.metaKey && e.keyCode == 86)
        # clipboard readImage
        clipboard = require('clipboard')
        img = clipboard.readImage()
        return if img.isEmpty()

        clipboard.writeText('')

        # insert loading text
        editor = atom.workspace.getActiveTextEditor()
        range = editor.insertText('uploading...');

        @postToImgur img, (imgUrl) ->
          # replace loading text to markdown img format
          markdown = "![](#{imgUrl})"
          editor.setTextInBufferRange(range[0], markdown)

  postToImgur: (img, callback) ->

    req = require('request')
    options = {
      uri: atom.config.get('image-copy-chevereto.Api')
      formData: {
        action : 'upload'
        key : atom.config.get('image-copy-chevereto.ApiKey')
        source : img.toPNG().toString('base64')
      }
      json: true
    }
    req.post options, (error, response, body) ->
      if (!error && response.statusCode == 200)
        callback(body.image.display_url) if callback && body.image.display_url
      else
        callback('error ')

项目地址

插件中默认使用的apiurl和key都是自己的 不保证会完全变，有条件的建议还是使用自己的apiurl和key 还有。。。暂不支持gif

插件安装：直接Atom perference->install 中搜索 image-copy-chevereto即可

插件地址：https://atom.io/packages/image-copy-chevereto

gayhub地址: https://github.com/gongxiaokai/image-copy-chevereto

欢迎点赞~

image