查看: 4847|回復: 0

[JavaScript/JQuery] Atom插件開發-使用自己的Chevereto圖床API

發表于 2018-5-12 08:00:02
Atom插件開發-使用自己的Chevereto圖床API

最近一直在用 Atom 寫寫markdown,但無奈上傳圖片真實太麻煩了。找了好幾個插件都是要用到 七牛 的賬號,由于之前被七牛坑過一次,就沒再想用他的打算了。一度放棄后使用在線的markdown,例如簡書 掘金 這些,可感覺用起來還是不太舒服,最終還是折騰起atom插件了。

正好之前有建了個圖床站還順帶出了個iOS的App 米米圖床 (我是奸商我收費)

也寫過一篇相關的文章 ios開發-RAC+MVVM練手項目 圖床App

項目簡介

由于自己有圖床 目前使用的是 Chevereto,
本文所涉及到內容都是根據 此API文檔

所以這款插件只為解決幾個問題

使用自己圖床的API 上傳圖片獲得URL 功能分析

功能灰常簡單

獲取剪切板圖片數據 通過post上傳至圖床API獲得回調數據 生成markdown圖片內容

根據API文檔 我們用 Postman 測一下API 看看回調

嗯 回調的內容很多,我們就挑一個display_url這個字段吧,夠用就行。

代碼實現

用的是coffeescript代碼

第三方依賴 request

  1. module.exports =
  2. # setting 中的全局變量
  3. config:
  4. Api:
  5. title: "Your api url"
  6. description: "Input your api url like `https://xxx.com/api/1/upload`"
  7. type: 'string'
  8. default: "https://imgurl.xyz/api/1/upload"
  9. ApiKey:
  10. title: "ApiKey"
  11. description: "Input your api key, you can find it in your dashboard, default is my key ,Do not mark sure always available"
  12. type: 'string'
  13. default: "a7bb2b091e3f2961e59551a8cf6e05b2"
  14. activate: (state) ->
  15. @attachEvent()
  16. attachEvent: ->
  17. workspaceElement = atom.views.getView(atom.workspace)
  18. workspaceElement.addEventListener 'keydown', (e) =>
  19. # cmd + paste
  20. if (e.metaKey && e.keyCode == 86)
  21. # clipboard readImage
  22. clipboard = require('clipboard')
  23. img = clipboard.readImage()
  24. return if img.isEmpty()
  25. clipboard.writeText('')
  26. # insert loading text
  27. editor = atom.workspace.getActiveTextEditor()
  28. range = editor.insertText('uploading...');
  29. @postToImgur img, (imgUrl) ->
  30. # replace loading text to markdown img format
  31. markdown = "![](#{imgUrl})"
  32. editor.setTextInBufferRange(range[0], markdown)
  33. postToImgur: (img, callback) ->
  34. req = require('request')
  35. options = {
  36. uri: atom.config.get('image-copy-chevereto.Api')
  37. formData: {
  38. action : 'upload'
  39. key : atom.config.get('image-copy-chevereto.ApiKey')
  40. source : img.toPNG().toString('base64')
  41. }
  42. json: true
  43. }
  44. req.post options, (error, response, body) ->
  45. if (!error && response.statusCode == 200)
  46. callback(body.image.display_url) if callback && body.image.display_url
  47. else
  48. 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

歡迎點贊~



回復

使用道具 舉報