标识系统(canvas)

一个给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高度。

嗐~后面的我先想想看看怎么写...

-- 未完待续--