HTML5 grayscale image processing Exercise 4: Case Analysis of health.pdf website

I accidentally saw an HTML5-based DICOM browser on the Internet.ArticleYes.

I tracked it with the developer tool of ie9 and found some design points:

1. EntireProgramAnti-cracking, including JavaScript compression and dynamic Dom generation on the entire page.
2. The general logic of page loading is:

1) dynamically create an IFRAME in the empty body.
2) load an HTML file cached in advance (possibly based on the browser) on IFRAME.
3) The javascript in this file dynamically generates the entire interface layout. The button icon is uploaded to the browser with base64 and then decoded and displayed.
4) image navigation, layout, window adjustment, scaling, and other logical implementations are also in this file.

3. the approximate logic of image loading is:

1) Obtain DICOM file header information through asynchronous HTTP requests. The header information is transmitted to the browser in XML format.
2) the browser parses XML using the SARISSA library to generate Annotation on the image.
3) DICOM pixel data is obtained through asynchronous HTTP requests. pixel data is transmitted to the browser in JSON format.
4) the browser parses JSON text to obtain pixel data, which is drawn on the canvas.
5) from the perspective of data communication and interface display, pixel data is gradually transmitted and displayed to the browser, which is of little value for medical diagnosis, but the user experience is much better.

4. Google APIs, such as chrometab. chromeframe, may be used, but the specific usage is unclear.

The following is the request and response of pixel data.

The following is the complete page loading process. The data packet capture process is a little big and is not pasted yet.