一个给AI深度学习应用的缺点标识零碎
流程介绍
- 相机拍摄缺点样品照片寄存到文件服务器
- 以后标识零碎拿到文件服务器缺点照片，应用鼠标去框选缺点的地位，并抉择缺点类型
- 将标记的坐标(x,y,width,height)以及缺点的类型(defectCode)存到数据库
- AI团队从文件服务器拿照片，从数据库拿坐标和缺点类型进行深度学习
性能介绍
菜单栏: 蕴含视图和帮忙
左侧栏：样品列表和缺点列表
右侧栏：标记框的管制工具以及图像处理工具
画布区域：画布能够放大放大和拖拽，能够通过鼠标拖拽进行矩形框选，能够删除
注释
其实最次要的还是两头的画布区域的实现啦。
首先要解决的问题就是，画布区域的空间很小，然而实际上图片的分辨率很大，咱们晓得canvas是位图，如果canvas的大小是800600,
然而理论图片的尺寸是40003000，如何解决？
咱们晓得设置canvas的width属性和设置css的width是齐全不同的两个概念
在canvas中，有width和height两个属性，它定以的是canvas的画布和画纸的大小。如果不设定，默认是300*150；
例如咱们设置canvas的宽高都是300
<canvas id="demo" width="300" height="300"></canvas>如下图，画布和画纸都是300，画面没有变形。
通过css设置canvas的width和height
<canvas id="demo" style="width: 300px;height: 300px;"></canvas>这个时候批改的只是画布，画纸还是默认的300*150；
然而，画纸也不会让画布空出暗影那局部的。画纸会主动铺满画布。这样的话咱们看到的图像就会产生变形。
因而咱们能够简略的了解为css的width和height是canvas占据的网页大小，而canvas的width和height属性就是canvas.getContext('2d')，即ctx空间的大小。很多文章把他们了解为画纸和画布的关系。
好了，晓得这个原理上面的事件就比较简单了。
咱们用css把canvas宽度撑满整个页面的残余区域，而后把canvas 的width和height设置成图片的理论宽高。通过计算照片的长宽比再设置canvas的css高度。
嗐~前面的我先想想看看怎么写...
-- 未完待续--
- 坐标系转换实现拖拽和缩放
- 模仿加速度实现平滑过渡
- 离屏canvas + web worker 实现图像处理
- driver.js 实现老手疏导
- 从codepen 拷一下酷炫的canvas个性放在首页