识别系统（canvas）

AI深度学习的缺陷识别系统。介绍相机拍摄缺陷样品的照片并将其存储在文件服务器中。目前的识别系统获取文件服务器的缺陷照片，用鼠标框选缺陷位置，选择缺陷类型将标注的坐标（x,y,width,height）和缺陷类型（defectCode）保存到数据库中.AI团队从文件服务器中获取照片，从数据库中获取坐标和缺陷类型进行深度学习功能介绍菜单栏：包括视图和帮助左栏：样本列表和缺陷列表右栏：标记框和控制工具图片处理工具最主要的就是中间canvas区域的实现。首先要解决的问题是画布区域的空间很小，但是图片的分辨率其实很大。我们知道画布是位图。如果画布的大小是800600，但实际图片大小是40003000，如何解决？我们知道设置canvas的width属性和设置css的width是两个完全不同的概念。在canvas中，有width和height两个属性，决定了canvas的画布和绘图纸的大小。如果不设置，默认为300*150；比如我们设置canvas的宽高为300如下图，canvas和绘图纸都是300，而图片没有变形。通过css设置画布的宽高此时只修改画布，画纸还是默认300*150；但是，Drawingpaper也不会使画布留空以显示阴影。绘图纸会自动覆盖画布。在这种情况下，我们看到的图像就会失真。因此，我们可以简单的理解为css的宽高就是canvas所占网页的大小，而canvas的宽高属性就是canvas.getContext('2d')，也就是css的大小ctx空间。很多文章把它们理解为画纸和画布的关系。好了，知道了这个原理，下面的事情就比较简单了。我们使用css将画布的宽度填充到整个页面的剩余区域，然后将画布的宽高设置为图片的实际宽高。通过计算照片的宽高比来设置画布的css高度。哎~待会儿想想怎么写吧...--未完待续--坐标系转换实现拖拽缩放模拟加速实现平滑过渡离屏canvas+webworker实现图像处理driver.js到实现新手引导从codepen复制coolcanvas特性放在首页