打造一个上传图片到图床利器的插件(Mac版 开源)(2018-06-24 19:44)

更新于2018年2月

做了以下改动:

1.修复了一个bug,把服务器区域做成可配:

七牛有华北,华东,华南以及美国三个服务器区域,根据自己的情况进行相应的选择即可。

2.把插件打包进了exe安装包中,下载链接:

链接: 密码: 1749
因此不要再使用本文的替换方法进行安装了,直接安装即可,七牛插件是默认安装的。

对应文章更新:

重新打包用户量过亿的开源截图软件——加入图片自动上传到图床的功能(2018-02-09 07:04)

如何使用:

除了正确配置Zone之外,其余配置查阅本文的6.2节。

1. 背景

写博客有一个自己的图床是不错的选择,如果不借助工具,在markdown博客中添加图片的步骤如下:

  • 截取图片,保存到本地(得来回点对话框,选择保存路径,选择文件类型,输入文件名)。
  • 上传到图床服务器(打开网页,跳转到上传页面,点击browse,选择本地文件,upload...)
  • 获取图片链接(为了确保无误,可以在浏览器中打开图片,并复制link)
  • 将链接添加到markdown博客中(Ctrl+v 复制到博客中)

还是很繁琐的,那么可不可以自己实现一个工具来做这些繁琐的事情呢?

2. 分析

首先要确定使用哪家的图床服务,网上搜了一下,都说七牛云比较靠谱(这里不是打广告。。),提供的SDK也比较全,我们这里就用七牛云,接下来确定该如何实现一个截图工具来实现截图+图片upload功能,从头实现一个工具不太现实,找一个开源的截图工具比较靠谱,博主目前正在用的是greenshot,发现这正好是一个开源的工具,好了,就是它了。

3. 需求

为greenshot添加一个插件,初步实现以下功能:

  • 针对七牛云SDK接口,添加配置对话框,可以配置accesskey,secretkey,scope,default domain来支持上传,并能将这些配置保存到本地(为了简单,将access key和secret key保存成明文)
  • 可以为图片名字添加前缀
  • 支持选择文件类型,支持bmp,gif,png,jpg等格式
  • 上传文件后可以自动将图床中的文件link复制到剪贴板

4. 准备

  • 开发工具 visual Studio 2017
  • 原材料 七牛云SDK源码+greenshot源码
  • 其它 申请一个七牛云账号,开通图床服务(可以百度或者google...)

5. 实现

过程省略,实现比较简单,大部分时间花在熟悉greenshot代码架构和代码调试上,直接上源码:
https://github.com/harlanc/greenshot

6. Demo

6.1 安装


  • 首先安装GreenShot:http://getgreenshot.org/
  • 如果不想重新编译源码,直接到下面的网盘链接下载插件(2017-12-12,又改了下代码,保存在七牛云上的图片只能保留一天时间,把这个限制去掉了,自己重新编译一下源码吧):
    链接: https://pan.baidu.com/s/1sloCA53 密码: 2pv5

    压缩包中包含5个文件,一个gsp插件,两个xml语言文件,两个DLL,拷贝到对应的目录下:

6.2 配置

打开GreenShot,首先我们验证一下插件是否加载成功,邮件单击GreenShot图标,单击Preference...

如果看到插件列在了Plugins中,说明加在成功:

打开配置主界面:

序号1到4必须填正确,这些都该填写什么呢?

见下图,登陆七牛云,点击个人中心->密钥管理,即可看到AK和SK:

序号3对应着存储空间名称,你可以新建存储空间,把对应的名字填写到Scope里:

序号4对应着域名,这个域名是用于拼写复制到剪贴板的图片link的,不知道有没有更好的方法。目前楼主用的是测试域名:

序号5是图片格式,序号6为图片名字前缀,方便管理图片。
好了,配置好之后,点击OK,这些配置信息都会保存到本地的配置文件中,注意AK和SK在这里是明文保存,小心不要泄露。。

6.3 使用

看一下如何使用,右键单击GreenShot图标,点击Capture region,或者其他的截图方式:

如果需要编辑图片,你可以选择Open in image editor,如果你想直接上传,单击Upload to Qiniu即可。

编辑完图片之后,单击七牛图标。

最后一步,Ctrl+V ,将剪贴板中的图片链接拷贝到你的博客中,大功告成!如果有任何问题,请告知楼主,谢谢。

7. 总结

通过使用GreenShot插件,上传图片到七牛云只需要点击4下鼠标即可,节省了时间。

写markdown博客如何将截图快速上传到图床——记一个工具插件的实现(windows版 开源)的更多相关文章

  1. 写markdown博客如何截图并快速上传到图床——记一个工具插件的实现

    1. 背景 写博客有一个自己的图床是不错的选择,如果不借助工具,在markdown博客中添加图片的步骤如下: 截取图片,保存到本地(得来回点对话框,选择保存路径,选择文件类型,输入文件名). 上传到图 ...

  2. 基于SpringBoot从零构建博客网站 - 设计可扩展上传模块和开发修改头像密码功能

    上传模块在web开发中是很常见的功能也是很重要的功能,在web应用中需要上传的可以是图片.pdf.压缩包等其它类型的文件,同时对于图片可能需要回显,对于其它文件要能够支持下载等.在守望博客系统中对于上 ...

  3. hexo博客部署到github无法上传的问题

    博客生成之后,按照网上别人的教程,讲项目部署到github上,修改_config.yaml中的deploy部分如下所示: deploy: type: git repository: https://g ...

  4. 【技术博客】Laravel5.1文件上传单元测试

    Laravel5.1文件上传单元测试 作者:ZGJ 在软工第三阶段中,我彻底解决了上一阶段一直困扰我的文件上传单元测试问题,在这里做一个总结. 注:下文介绍中,方法一方法二实现简单但有一定的限制条件( ...

  5. Django 博客项目02 Form验证+ 上传头像(预览)+Ajax用户注册

    头像预览 $("#avatar_file").change(function(){ // 获取上传的文件对象 var file=$(this)[0].files[0]; // 读取 ...

  6. 写Markdown博客时遇到的一些问题

    成对的美元符号$,无法转义 相同的文本,就因为成对的$(美元符号),上面显示成了公式(Math)-而且还无法转义!下面用单行代码(``)-键盘"1"左侧的键,显示就正常了 下图方法 ...

  7. 万里长征第二步——django个人博客(第七步 ——上传文件)

    在项目目录下新建一个 ‘uploads’文件夹以保存上传的文件 配置setting.py文件 MEDIA_URL = '/uploads/' MEDIA_ROOT = os.path.join(BAS ...

  8. 前端react+redux+koa写的博客推荐

    React-Node搭建的博客 曾经用的php+mysql+js写的博客,现在看来已经很low了,所以用目前最火的react+koa框架重构一下.先上地址吧:目前线上版本http://www.liuw ...

  9. Dropplets – 极简的 Markdown 博客平台

    Dropplets 是一个简单的博客平台,专注于提供正是你在博客解决方案中需要的.当涉及到基础的博客功能,你真正想要做的是写和发表,而这就是 Dropplets 的过人之处.Dropplets 是一个 ...

随机推荐

  1. HDU 6400(括号组合 ~)

    题意是说在 h 行 w 列的矩阵中,通过设计使得尽可能多的行或列能满足题中的平衡条件. 如果行数(列数)是奇数,那么每一列(行)一定不能平衡,就要按照满足每一行(列)平衡,输出“ () “:若行数和列 ...

  2. MVC实用架构设计(三)——EF-Code First(1):Repository,UnitOfWork,DbContext

    前言 终于到EF了,实在不好意思,最近有点忙,本篇离上一篇发布已经一个多星期了,工作中的小迭代告一段落,终于有点时间来继续我们的架构设计了,在这里先对大家表示歉意. 其实这段时间我并不是把这个系列给忘 ...

  3. Spark源码剖析 - SparkContext的初始化(五)_创建任务调度器TaskScheduler

    5. 创建任务调度器TaskScheduler TaskScheduler也是SparkContext的重要组成部分,负责任务的提交,并且请求集群管理器对任务调度.TaskScheduler也可以看作 ...

  4. Bootstrap Web框架

    Bootstrap 一.简介 Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML.CSS.JavaScript 开发的简洁.直观.强悍的 ...

  5. Django ORM操作的几个细节

    1. __gte: 大于等于 Book.objects.filter(price__gt=100) # 查询price大于等于100的记录 2. __range: 顾头也顾尾,相当于between.. ...

  6. MySQL数据库基本命令-1

    第一章:数据库概述1.数据(data) 数据库(DB) 数据库管理系统(DBMS) 数据库系统(DBS)2.数据库管理系统提供的功能: (1)数据定义语言:DDL (2)数据操作语言:DML 基本的数 ...

  7. Newtonsoft.Json序列化Enum类型

    [JsonConverter(typeof(StringEnumConverter))] public StringAlignment TextAlign { get => textAlign; ...

  8. ASP.NET MVC 5 笔记

    1.   MVC 的常用特性 1)   System.Web.Mvc.ActionNameAttribute Ø  该特性用于将当前 Action 名称,改为一个指定的 Action 名称,路由匹配时 ...

  9. luogu P3721 [AH2017/HNOI2017]单旋

    传送门 \(Spaly:\)??? 考虑在暴力模拟的基础上优化 如果要插入一个数,那么根据二叉查找树的性质,这个点一定插在他的前驱的右子树或者是后继的左子树,可以利用set维护当前树里面的数,方便查找 ...

  10. NoClassDefFoundError与ClassNOtFoundException的区别

    NoClassDefFoundError是一个错误(Error),而ClassNOtFoundException是一个异常,在Java中对于错误和异常的处理是不同的,我们可以从异常中恢复程序但却不应该 ...