前段时间,在写技术blog的时候,突然觉得如果blog中需要包含图片,处理起来真的好麻烦。
因为我比较常用markdown,所以在blog中包含图片大概需要这么几个步骤:
- 1.使用截图工具获取截图
- 2.将截图上传到云环境
- 3.获取图片云访问地址,并转换为markdown语法
- 4.粘贴
甚至有些时候,还需要将图片先保存到本地之后才能上传到云环境。
因此,就萌生了一个想法:写一个截图工具,这个截图工具需要帮我完成将图片上传到云环境,并且支持将图片访问地址转换为markdown语法存放到剪切板中供我使用。
这样我在写blog的时候,只需要两步截图->粘贴
即可,而不用再去处理关于将图片上传到云环境的相关步骤。
因此,在这个想法的前提下,逐渐诞生了这个截图工具————JPanda Snapshot
。
-
JPanda Snapshot
支持将截图上传到多种不同的环境中。目前包括:
阿里云
,京东云
,GITHUB
,GITEE
,OSCHINA
,简书
以及本地
和不存储
。 -
JPanda Snapshot
在完成图片上传之后,允许将图片或图片地址处理成不同的数据类型。目前包括:
MARKDOWN语法
,真实访问地址
,图片本身
。 -
相对完善的图片编辑功能。 目前支持:
绘制圆形
、绘制矩形
、绘制箭头
、自由画笔
、文字
、马赛克
-
图钉功能-允许将截图固定在屏幕窗口,且允许为该截图添加简单描述。
-
辅助功能,
取色器
,获取鼠标位置
-
为了保存访问云环境的相关数据,支持启用密码。
-
失败任务列表,允许重新上传处理失败的图片。
1.获取安装程序
- 在线获取
Windows MSI
安装程序 - 本地编译获取
Windows MSI
安装程序,参见源码编译-打包成可执行文件
2.执行常规安装,选择安装目录后,一直点击下一步,直到安装完成。
使用命令java -jar jar包名称.jar
即可启动该工具
-
- 在项目根目录(
pom.xml
文件所处目录)执行命令mvn jfx:jar
将会在.\target\jfx\app
中生成一个lib
目录以及一个名为screenshot-oss-*-jfx.jar
的文件。
- 在项目根目录(
-
- 使用命令
java -jar ./jpanda/screenshot-oss-1.0-*-jfx.jar
即可启动该工具。
- 使用命令
-
在项目根目录(
pom.xml
文件所处目录)执行命令mvn jfx:jar
将会在.\target\jfx\app
中生成一个lib
目录以及一个名为screenshot-oss-*-jfx.jar
的文件。 -
在项目根目录(pom.xml文件所处目录)执行命令
mvn jfx:native
将会在.\target\jfx\native
中生成一个可执行文件(根据操作系统不同,获取到的安装包亦有不同)。
在初次启动截图工具时,将会询问用户是否设置初始密码,在本地不会持久化存储用户输入的密码,该密码仅保留在内存中,用于对云服务相关的配置信息进行加解密。
如果用户设置了密码,且进行了相关的云服务配置,第二次启用时未输入密码或输入错误的密码,因为无法解密相关云服务配置,可能会导致图片上传异常。
借助于开源项目com.1stleg.jnativehook
,JPanda Snapshot
实现了全局快捷键的功能,即允许在后台运行JPanda Snapshot
的同时,通过快捷键快速唤醒加载截图界面。
默认的全局快捷键是CTRL
+SHITF
+ALT
+J
,该值可以在主窗口中进行修改。
目前JPanda Snapshot
支持多种图片的存储方式,其中包括:
- OS-CHINA(开源**)
开源**的存储实现,依赖于
WebView
,实现原理是获取登录用户的cookie
,并携带该cookie
进行图片上传接口的调用,因为第三方的限制,该云存储方式不支持异步上传。
- GIT(支付GIT协议的所有网站)
GIT服务的实现依赖于
org.eclipse.jgit.org.eclipse.jgit
,所以理论上支持所有实现了GIT协议的网站和服务。
<dependency>
<groupId>org.eclipse.jgit</groupId>
<artifactId>org.eclipse.jgit</artifactId>
</dependency>
- 京东云存储
京东云存储的实现借助于
com.amazonaws.aws-java-sdk-s3
包来实现,因此,理论上支持所有aws3
协议的云存储服务。
<dependency>
<groupId>com.amazonaws</groupId>
<artifactId>aws-java-sdk-s3</artifactId>
<version>1.11.490</version>
</dependency>
- 阿里OSS
阿里OSS的实现,依赖了阿里提供的
com.aliyun.oss.aliyun-sdk-oss
,因此该方式仅可用于阿里OSS。
<dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun-sdk-oss</artifactId>
</dependency>
- 简书
简书的存储实现,依赖于
WebView
,实现原理是获取登录用户的cookie
,并携带该cookie
进行图片上传接口的调用,因为第三方的限制,该云存储方式不支持异步上传。
- 本地保存
将图片存储到本地
- 不保存
因为该方式不对图片进行实际物理存储,因此对应的剪切板存储内容仅限于图片本身。
目前JPanda Snapshot
支持多种剪切板内容设置,主要包括:
- MARKDOWN语法
在当前模式下,用户在上传图片后,
JPanda Snapshot
将自动将图片的访问地址包装成MARKDOWN
语法,并回填到剪切板中,待用户使用。
- 图片
在当前模式下,用户在上传图片后,
JPanda Snapshot
将自动将图片本身回填到剪切板中,待用户使用。
- 地址
在当前模式下,用户在上传图片后,
JPanda Snapshot
将自动将图片的访问地址回填到剪切板中,待用户使用。
用户可以在主窗口中,通过访问选项
-密码管理
,点击具体的子菜单完成密码的管理工作。
目前对密码支持三种管理方式:
- 启用密码
在当前用户未启用密码的场景下,
密码管理
有且仅有一个启用密码
的子菜单,该菜单用于为用户设置一个启用密码。 - 停用密码
在用户已经设定了启用密码的场景下,
密码管理
将会提供停用密码
子菜单,该菜单用于停用密码。 - 修改密码
在用户已经设定了启用密码的场景下
密码管理
将会提供修改密码
子菜单,该菜单用于修改密码。
用户可以在主窗口中,通过访问选项
-失败任务列表
来进行失败任务列表界面。
鉴于云存储环境的场景有别于本地存储的简单性,可能会因为网络或者其他原因导致图片保存失败,因此提供了
失败任务列表
来展示和处理保存失败的图片。
在拖拽模式,允许用户移动已选中的区域,拖拽不会变更已选中区域的大小。
拖拽窗口,不允许超出屏幕边界,还会受限于截图区域中已有元素的位置。
在绘制圆形模式下,用户鼠标按下时,将会以鼠标为圆心准备生成椭圆形,在鼠标移动时根据鼠标移动的x,y轴的偏移量作为半径,生成对应的椭圆。
如果在拖拽鼠标的同时按下SHIFT
按键,将会生成正圆,正圆的半径取决于x,y轴的偏移量较大的值。
需要注意的是,圆形的绘制,不超出截图区域。
在完成圆形的绘制,松开鼠标按键后,将会为圆形生成一个矩形边框,该边框可以拖拽和变更圆形的大小。
在绘制矩形模式下,用户鼠标按下时,将会以鼠标为顶点准备生成矩形,在鼠标移动时,根据鼠标当前位置,生成该顶点的对角顶点,进行矩形的绘制。
需要注意的是,矩形的绘制,不超出截图区域。
完成矩形的绘制,松开鼠标按键后,将会在矩形的边线上生成8个原点,用于变更矩形的大小和位置。
在绘制箭头模式下,用户鼠标按下时,将会以鼠标为起点准备生成箭头,在鼠标移动时,根据鼠标当前位置,生成箭头的终点,进行箭头的绘制。
需要注意的是,箭头的绘制,不超出截图区域。
在自由画笔模式下,用户鼠标按下时,将会以鼠标为起点准备绘制线条在鼠标移动时,根据鼠标当前位置和前一位置动态生成线条。
需要注意的是,自由画笔的绘制,不超出截图区域。
在添加文字模式下,用户鼠标按下时,将会以鼠标为起点生成一个透明红色边框的输入框,允许用户进行文字输入,用户完成输入后,可以拖拽输入框,移动输入框的位置,完成文字的处理后,点击截图区域的任意位置完成本次操作。
需要注意的是,添加的文字不超出截图区域。
马赛克的功能类似于自由画笔,用户鼠标按下时,将会以鼠标为起点准备绘制马赛克,在鼠标移动时,根据鼠标当前位置和前一位置动态生成马赛克。
需要注意的是,因为Windows
的荧幕字体平滑工具clearType
的原因,在对黑色文字进行马赛克标记时,可能会生成彩色的马赛克。
马赛克不会作用于JPanda Snapshot
创建的元素。
在取色器模式下,JPanda Snapshot
将会在当前鼠标的适当位置,生成一个预览区域,该区域将会展示当前鼠标的位置,以及鼠标对应像素点的色值的RGBA
和HEX
表现形式。
在该模式下,允许使用快捷键快速复制需要使用的数值,具体的快捷键,参见快捷键
-截图窗口快捷键
-取色模式快捷键
。
图钉模式,允许将当前截图区域固定到屏幕上,便于后续的操作使用。
图钉模式支持右键菜单。
图钉模式支持和快捷键,具体的快捷键参见快捷键
-图钉窗口快捷键
。
在截图过程中,我们可能会突然变更截图的云存储方式,因此该按钮允许在截图过程中,编辑图片的云存储方式。
在完成截图区域获取和截图内容的处理之后,通过该按钮,可以快速将图片上传到云环境中。
取消本次截图操作。
完成本次截图,并将获取到的图片存储到剪切板中。
在任意界面,如果当前窗口支持快捷键,都可以使用
Ctrl + /
组合快捷键唤出快捷键帮助列表。
功能 | 组合键 |
---|---|
退出截图 | ESC |
展示快捷键列表 | CTRL +/ |
撤销上一步操作 | CTRL +Z |
恢复上一步撤销操作 | CTRL +Y |
粘贴当前剪切板内容到截图区域(图片/文字) | CTRL +V |
完成截图 | ENTER |
功能 | 组合键 |
---|---|
复制当前鼠标位置 | CTRL +P |
复制当前RGBA色值 | CTRL +R |
复制当前HEX色值 | CTRL +H |
复制当前鼠标位置,RGBA色值以及HEX色值 | CTRL +A |
功能 | 组合键 |
---|---|
关闭当前窗口 | CTRL +W |
关闭当前窗口 | ESC |
置顶/取消置顶 | CTRL +O |
复制当前图片 | CTRL +C |
复制当前窗口快照 | CTRL +ALT +C |
展示/隐藏标题 | CTRL +T |
展示/隐藏边框 | CTRL +B |
图像另存为 | CTRL +S |
窗口快照另存为 | CTRL +ALT +S |
上传当前图片到云环境 | CTRL +U |
上传当前窗口快照到云环境 | CTRL +ALT +U |
展示快捷键列表 | CTRL +/ |
在执行截图工作的时候,主要流程是
- 1.获取指定屏幕当前快照,提供给用户操作。
- 2.用户完成截图,程序将用户的截图区域生成图片。
- 3.程序执行存储操作,并返回图片存储的地址。
- 4.程序将图片存储地址交由剪切板回调器使用,剪切板回调器拿到用户截图和图片存储地址,决定执行何种操作,并将结果通过剪切板的形式体现给用户。
程序简单的实现了一个容器的功能,并针对于被Component
注解的类提供了构造注入ViewContext
和Configuration
对象的能力。
程序的启动由三部分构造:
- 1.引导启动,在引导启动的过程中,主要完成了程序需要依赖的一些基础操作。
- 2.引动启动完成后置操作,该操作将在引导启动完成后,程序正式提供服务前完成。
- 3.界面上下文启动,提供服务
- 存储方式
存储方式表示截图完成之后,生成的图片保存的位置。
- 剪切板内容
用户完成截图后,存放到剪切板中的数据。
截图操作主要涉及到三步操作:截图,处理截图,处理剪切板的内容。 截图操作是独立的,但是处理截图和处理剪切板是互相关联的。 对于处理截图的操作,有两种,一种是有图片存储地址的,一种是无图片存储的地址的。 对于剪切板操作,主要有两种类型,一种是存放图片,一种是存放地址,理论上暂不支持其他的类型。 针对无图片存储地址的截图方式,处理地址的剪切板操作显然是不被允许的,因此,这里在实现上也做了限制。
针对于用户的配置,专门定义了用户数据持久化的
Persistence
顶级接口,用户的实体类只要实现了该接口,就可以通过核心类Configuration
来完成对其自动读取和存储的功能。 这里需要注意的是,针对数据存储对象专门提供了一个注解Profile
,该注解一方面用于指定用户数据持久化对象保存的配置文件名称和对象的类型,另一方面可以确保其会被PersistenceBeanRegistry
扫描到,避免发生期望之外的问题,比如:用户修改密码时,不会同步变更未添加该注解的数据配置。 这里需要注意的是,针对数据存储对象专门提供了一个注解Profile
,该注解一方面用于指定用户数据持久化对象保存的配置文件名称和对象的类型,另一方面可以确保其会被PersistenceBeanRegistry
扫描到,避免发生期望之外的问题,比如:用户修改密码时,不会同步变更未添加该注解的数据配置。
- 提供主流图床支持
- 考虑是否支持对普通文件的上传支持(待定)
- 在截图区域边角处跟随鼠标展示当前截图区域的大小
- 为图钉窗口添加隐藏标题的功能
- 为图钉窗口添加隐藏边框的功能
- 图钉窗口的图片可以直接上传到云端
-
预期拆分现有截图保存按钮的功能,拆分为两个按钮,现有的
对号
形式的按钮,默认触发不保存-图片
操作,而拆分出来的新的保存按钮,才会触发现有的配置,这样做的目的是为了避免使用该工具,误传图片。 -
为现有的截图保存操作,提供失败提醒和补偿机制,便于用户手动操作。
-
优化画笔和马赛克的撤销操作,将一次画笔和马赛克操作中的拖拽合而唯一。
-
优化:对于截图存储方式的配置的保存操作提供预校验的能力,即用于在对存储方式配置完成后,提供测试配置是否可用的能力。