HTML 5灰度图像处理练习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,但具体用法不太清楚。

下面是像素数据的请求和应答。

下面是完整的页面加载过程,数据抓包有点大,暂时不贴了。