在线图像标注工具

全篇共 1173 字。按500字/分钟阅读,预计用时 2.3 分钟。页面总浏览量 49 次,今日浏览量 6 次。

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

这是Canvas标注多边形区域与切割图像的实验项目入口

Canvas标注多边形区域与切割图像

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

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

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

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

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

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

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

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

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

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

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

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

1条留言备忘

jannylz · 2019年9月11日 · 第1楼

请问在线体验入口在哪里?可否标注矩形框,可以拖拽类型的
发布日期 » 2019年8月22日 周四
原创声明 » 请勿复制转载,谢谢配合。
Airglass.js核心库
JavaScript核心概念
硬件编程、Arduino
文档翻译计划
微信开发
前端脚手架
运维
可视化
生活自有“道”理
视觉设计、用户体验
陈帅华的微信二维码