偶然在网上看到一个基于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，但具体用法不太清楚。
下面是像素数据的请求和应答。
下面是完整的页面加载过程，数据抓包有点大，暂时不贴了。
发表回复