什麼是cornerstonejs
Cornerstone是一個開源的致力於提供基於WEB的醫學影像處理平臺
Cornerstonejs官網的文檔寫的很簡潔易懂，建議在研究其源碼前先把它的文檔過一遍，瞭解基本的設計和概念。
然後按照官網鏈接 https://docs.cornerstonejs.org/developer-guide.html 開始跑起來
這裏我先用它最簡單的例子研究其源碼的基本結構
啓動後，在瀏覽器裏輸入 http://localhost:8080/example/index.html
選擇最簡單的示例
對應的鏈接爲：http://localhost:8080/example/jsminimal/index.html
筆者通過在chrome瀏覽器的F12調試模式下跟蹤跑了大半天，大致明白了其工作的流程，應該說總體的設計還是非常清晰易懂的，下面的流程圖是我的整理，和大家分享一下
步驟如下
- 調用enable.js的入口函數，其本質是使用requestAnimationFrame機制註冊瀏覽器刷新顯示的回調函數
- 調用imageLoader.js的registerImageLoader函數註冊某種sheme的image loader,這個實例用example://作爲scheme, 具體實現在exampleImageLoader.js, 用本地base64字符串硬編碼的圖像加載，中間做字符串到灰度數組的轉換，返回的是一個image object對象，其中獲取圖像的函數是一個promise,這樣方便在真正要顯示時纔去調用
- 調用imageloader.js的loadImage()函數，它先從imageCache.js查找是否有緩存，有，則直接到displayImage.js的函數，沒有則從已註冊的image loaders裏查找image loader, 然後調用到exampleImageLoader.js的getExampleImage()函數獲取到image object
- 調用displayImage.js入口函數，再調用updateImage.js入口函數，最後調用drawImage.js入口函數，實際drawImage.js只是設置image ojbect和一些標誌變量，真正去執行畫圖是在剛纔所說的requestAnimationFrame裏由瀏覽器去調用
- requestAnimationFrame調用註冊的回調函數入口，即enable.js的drawImage函數，然後調用renderGrayscaleImage.js入口函數，再調用storedPixelDataToCanvasImageData.js，最終調用Html5 Canvas的API