標識系統(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特性放在首頁