关于javascript:标识系统canvas

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