游客无体验权限,请先登录。
授权微博登录
授权Github登录
···

在线图像标注工具

已开放源代码

项目源代码仓库:goma-label源代码在Github的仓库地址
项目名称:GOMA Label
授权许可协议:MIT License

在线体验作品

在线体验入口:Canvas标注多边形区域与切割图像的实验项目入口

多边形标注与图像切割的演示

创作背景

在线图像区域标注工具最初是受一款python开发的为机器图像识别的软件LabelMe的启发,于是我就使用前端技术实现了相同的图像标注功能。

在线图像标注工具项目源代码已经在GitHub开源,该在线图像标注工具基于前端canvas技术实现像素级别的图像操作。通过连续点按图像绘制多个点,然后点练成线,最后线汇成多边形面。该多边形面所覆盖的图像区域就是标注区域。基于该多边形标注区域可以提炼出多维度数据:

  1. 各个标注区域对应的图像裁切后的base64编码;
  2. 各个标注区域在图像上的的位置坐标数据;
  3. 各个标注区域上每一个标注点的位置坐标数据。

如下图所示。将图像导入到在线图像标注工具后,就可以对图像进行标注。我没有限制对一张图像的标注数量,所以一张图像上可以标注的区域有♾个。每一个标注区域相互独立互相不受影响,也就是说,在我还没有给工具添加显示/隐藏已经标注的区域之前,可以在已经绘制的标注区域之上继续绘制,虽然这可能看起来会很乱。

在线图像区域标注工具 - 陈帅华开源项目

上图是非常标准的图像标注示例。上图中包含3个标注区域,1号标注区域共有6个标注点,2号标注区域共有5个标注点,3号标注区域共有6个标注点。每一块标注区域上的每一个标注点相对于图像的位置坐标数据都可以导出,在线图像标注工具可以将每一块标注区域对应的图像切割下来并导出为base64编码数据。

剪纸风格 - 陈帅华开源项目

与其给它起一个叫在线图像标注工具的死板名称,不如叫它艺术裁纸刀。因为相比于为图像识别提供机器学习的素材,赋予它艺术创作的用途会让我更愉悦一些。与裁剪无聊的汉字、数字和英文字母相比,裁剪人物、风景更有趣味些。裁剪出的图像的风格让我想起了小时候用✂️裁剪废旧书报上的小人儿、小动物,然后粘到墙上编故事的童趣经历。

如果说我的在线图像标注工具的定位是裁剪图像,这么说倒也没错,它就像Adobe Photoshop中的多边形套索工具,而且是简约版的哦。

裁剪悬浮摄影 - 陈帅华创意

就比如上面左侧的图像,把我裁剪下来,放到另一张天空和飞禽做背景的图片中,这不就是我小时候玩的拼贴画嘛。

将数字创意进行到底,除了拼贴画,我还想到一种过去很喜欢的动画表现形式——低帧速的逐帧动画,每一帧画面都是先在纸上画好,然后裁剪、拍照,最后将这一系列照片按一定速度播放就形成了这种低帧速逐帧动画。虽然制作手法看似笨拙,想想看,每一帧画面中的每一个角色就是这样细致的完成,这样的作品才是有灵魂的作品。

我接下来要着手开始在线拼贴动画创作工具的开源项目制作了,光是想想就很有趣。这两个在线工具的配合大概是这样的——准备一张待裁切的照片——照片导入在线图像标注工具内进行裁切——裁切后的多边形PNG格式图像导入在线拼贴动画创作工具——导出GIF动图。其实也可以试试能不能导出视频。

功能划分

使用前端技术栈完成的界面是这样的,下方是功能划分。

减少操作

好的设计就是尽量不设计,好的交互就是尽量不交互。

LabelMe这款工具,需要频繁使用左右手控制键盘和鼠标完成动作,优化后,希望尽量减少多余的交互。

  • 自动闭合:在LabelMe中创建一块多边形,如果不闭合上一个多边形,是无法开始下一个多边形的绘制的。优化后,起始点坐标就是结束点坐标,用户只需绘制起始点和结束点之间的点击即可,使用鼠标右键结束绘制,如此保证绘制多边形的动作仅用鼠标即可。

可扩展性

  • 附加信息:LabelMe的限制在于输出的JSON文件中的内容受限于工具本身,想要为每一个多边形标注附加信息,可是LabelMe没有提供更多的字段保存这些信息,只有一个可以设置的"label"字段。优化后,JSON文件的格式完全可控,包括为多边形标注附加任意信息,比如颜色,人工识别结果,序号信息等等。

需求出发

将图像中的全部手写体标注出来,最终生成一个个包含标注点的JSON文件,下方是LabelMe生成的JSON文件的部分内容。

{
  "imagePath": "20181211204835028.jpg",
  shapes: [
    {
      "shape_type": "polygon",
      "points": [
        [119, 182], [117,206],  [169,206], [173,183]
      ],
      "label": "1"
    }
  ]
}

机器学习组的童鞋将JSON文件中的一个个标注的手写体坐标区域与源图像中的位置一一对应,通过一系列复杂的变换算法,帮助机器学习以建立更完善的用于识别手写体的模型。

提取LabelMe的主要功能,保留关键的,去除非必要的,并优化可扩展的。

视频加载中...
《在线图像标注工具》使用指南
雷达扫描动效

基于Airglass.js

我是我的作品

个人简历

一直在路上

心上到路上的“旅行”

待办事项

由原生JS实现的视图组件

项目管理平台

基于Vue.js

甘特图在线编辑

基于Airglass.js

Blender3D模型渲染

基于Three.js渲染

元胞自动机

基于Airglass.js

JS原型链可视化

基于Airglass.js

重构图像在线标注

基于Airglass.js

图像在线标注工具

基于原生Canvas实现

极坐标地图

Canvas缓动动画实验

类星系关系可视化

Canvas交互事件触发

趣玩周易64卦

国学小项目

日程计划组件

基于React.js

家谱可视化

基于Airglass.js

Airglass.js官方API

我的Canvas库使用参考