图像标注工具（1）

react + canvas 制作一个web端的图像标注工具（1）

1. 背景介绍

现阶段项目组需要一个用于标注图像特征的操作工具，目前市面上使用的是dltool桌面应用来标注特征，
由于桌面应用使用具有局限性，所以经理要求上线一个web端的来使用：
1.能够实时标注工厂工业摄像头记录的图片
2.能够多人协作进行标注和上传
3.操作功能和上述推荐的桌面应用类似，主要的核心功能就是框选图片找出特征坐标最后用于机器训练
简单介绍一下dltool工具（由于大小限制点击链接查看）

1. 技术实现

整体的web界面采用react全家桶搭建，这个具体不载赘述，
核心功能使用h5的canvas做，具体技术点canvas
核心功能有：
1.加载高清大图并且放大缩小使其不失真（canvas预加载和canvas矩阵变换）
2.框选图像然后取到相对于图片的坐标（canvas的矩阵变换获取相对于图片的像素坐标）
3.上传高清大图做无损压缩并且附带标注信息（canvas的toDataURL转base64，暂时未达到预期效果）
4.多人协作其他人员可在其他端进行标注的查看和修改（多人同时在线修改暂未实现）

其重点说一下此次开发重点和难点：
1.图片量巨大，上传和保存是个问题，每天工厂大概产出50个G的图片量
2.web端的操作性能问题，比如网络卡顿，浏览器卡顿，加载、上传时间较长等等；
3.每天都有大量的图片上传，导致检索出某一张图片也相对有难度困难，这个难度是递增的图片越多检索越慢。

有兴趣的小伙伴滴滴我，以码会友！！！

（百忙之中抽空写的不太全面也比较笼统，望谅解，持续更新中。。。）