HTML5灰階影像處理練習4：Healthphere網站案例分析

偶然在網上看到一個基於HTML5的DICOM瀏覽器，有點意思，而且作者部落格上的文章也不錯。

用IE9的開發人員工具跟蹤了一下，發現一些設計要點：

1. 整個程式做了防破解的處理，包括javascript的壓縮，以及整個頁面DOM的動態產生。
2. 頁面載入大致的邏輯是：

   1) 在空的body中動態建立一個iframe。
   2) 在iframe上載入一個事先（可能是根據瀏覽器的不同）cache好的html檔案。
   3) 這個檔案中的javascript動態產生整個介面布局，按鈕表徵圖也是用base64傳到瀏覽器端再解碼顯示的。
   4) 映像導航、布局、調窗、縮放等邏輯實現也是在這個檔案中。

3. 映像載入大致的邏輯是：

   1) 通過非同步HTTP請求獲得DICOM檔案頭資訊，頭資訊用XML格式傳送到瀏覽器端。
   2) 瀏覽器端用sarissa庫解析XML，用於產生映像上的annotation。
   3) 通過非同步HTTP請求獲得DICOM像素資料，像素資料用JSON格式傳送到瀏覽器端。
   4) 瀏覽器端解析JSON文本獲得像素資料，在繪製在canvas上。
   5) 從資料通訊和介面顯示效果上觀察，像素資料是漸進地傳送和顯示到瀏覽器端的，這對於醫學診斷來說價值不算太大，但使用者體驗好了很多。

4. 其中可能用到的google的api，如ChromeTab.ChromeFrame，但具體用法不太清楚。

下面是像素資料的請求和應答。

下面是完整的頁面載入過程，資料抓包有點大，暫時不貼了。