一个给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特性放在首页