LEADTOOLS構建HTML5 DICOM/PACS查看器

零足跡(Zero-footprint)應用程序的需求日益增加，而在醫療行業中的需求增加尤其突出。LEADTOOLS是惟一一款功能全面的，提供了12/16位灰度級客戶端調窗(window-leveling)的醫療程序開發包。

LEADTOOLS HTML5和JavaScript 查看器控件爲建立跨平臺的、無痕HTML5 DICOM查看器提供了無與倫比的速度和全面的功能。

LEADTOOLS HTML5 DICOM Viewer功能介紹：

• HTML5/JavaScript Viewer Control可建立跨平臺的圖像查看功能

• 同時支持鼠標和多點觸控（手勢）輸入

• 擁有醫學影像「調窗」、Series Stack和圖像處理等功能

• 隨時隨地經過本地存檔或DICOM通訊鏈接遠程PACS查看DICOM圖像
  

• 原生HTML5圖像註釋和標記

• 完整的HTML5 DICOM查看器源代碼
  

使用RESTful Web Service查詢和檢索DICOM圖像

服務器組件使用RESTful Web Service 鏈接本地文檔或任何可訪問的遠程PACS系統。此服務可處理全部的PACS通訊（即C-FIND，C-MOVE，C-STORE等），並經過JSON連接查看器控件。

搜索文檔，選擇一個病人，study 和series後，圖像就開始流向查看器。首先，服務器會發送一張須要被即刻顯示的JPEG壓縮圖像，在後臺，服務器注入調窗數據，並保留圖像幀。

在下面的代碼片斷中，輸入的數據被收集，而後經過JSON發送到服務器。接下來，該應該程序能夠處理接收到的服務器響應，解析數據並填充studies 和series列表。

function DoSearch() {
 queryOptions.PatientsOptions = {};
 queryOptions.StudiesOptions = {};
 queryOptions.PatientsOptions.PatientID = pid;
 queryOptions.PatientsOptions.PatientName = pName;
 queryOptions.StudiesOptions.AccessionNumber = accession;
 queryOptions.StudiesOptions.ReferDoctorName = RefDrName;
 queryOptions.StudiesOptions.ModalitiesInStudy = modalitiesInStudy;
 
 if (document.getElementById("QueryLocal").checked) {
 SetQueryMode(QueryMode.Local);
 }
 else {
 SetQueryMode(QueryMode.PACS);
 }
 
 searchPage.SearchStudies(queryOptions);
 }
 
 function OnSearchStudiesSuccess ( studies ) {
 if (null == studiesGrid) {
 InitializeStudiesGrid();
 }
 
 studiesGrid.resetActiveCell();
 studiesGrid.getOptions().autoHeight = true;
 studiesGrid.setData(studies);
 studiesGrid.updateRowCount();
 studiesGrid.render();
 $(studiesGridName).show();
 
 $('html, body').animate({
 scrollTop: $(studiesGridName).offset().top
 }, 1000);
}

客戶端DICOM圖像調窗

因爲大多數DICOM數據集包含12/16位灰度圖像數據和只顯示8位的監測儀，所以圖像調窗與初始化圖像同等重要。爲什麼客戶端調窗如此重要？沒有圖像調窗，參數必須被髮送處處理調窗的服務器，將其轉換爲8位圖像，並將其返回給客戶端。隨着圖像的增大，加上醫務人員手機和平板電腦等設備查看圖像時，大量的數據往返於客戶端和服務器之間會嚴重影響查看器性能。

LEADTOOLS利用無損壓縮並將原始DICOM圖像數據存儲在緩存，正好解決了大量數據往返於客戶端和服務器時形成的性能受損的問題。

正以下列代碼和截圖所示，首次顯示圖像或滾動至窗口視圖時，調窗按鈕被禁用。一旦顯示，會發生請求只服務器，而且原始DICOM圖像數據開始流向客戶端。一兩秒後，調窗按鈕被激活，並展現出一個帶有當前調窗值的標籤。

function LoadImages(instances, xmlData) {
   
 Clear();
 _images = [];
 
 for (var instanceIndex = 0; instanceIndex < framesLength; instanceIndex++) {
 var loadImageElement = document.createElement('img');
 var frame = new ImageFrame();
 
 frame.FrameIndex = instanceIndex;
 if (multiFrame) {
 frame.FrameNumber = instanceIndex + 1;
 frame.Instance = instances[0];
 frame.DicomData = xmlData;
 frame.ImageInformation = (instanceIndex == 0) ? DicomHelper.GetDicomImageInformation(xmlData) : _images[0].ImageInformation;
 }
 else {
 frame.FrameNumber = 1;
 frame.Instance = instances[instanceIndex];
 frame.DicomData = (instanceIndex == 0) ? xmlData : null;
 frame.ImageInformation = (instanceIndex == 0) ? DicomHelper.GetDicomImageInformation(xmlData) : null;
 }
 
 frame.ImageElement = loadImageElement;
 
 loadImageElement.src = objectRetrieveProxy.GetImageUrl(frame);
 }
 }
 
 function OnDrawImage() {
 var currentIndex = _stackInteractiveMode.get_frameIndex();
 
 _dicomLoader.DrawImage(currentIndex);
 
 if (!_dicomLoader.IsImageDataAvailable(currentIndex)) {
 DisableWindowLevel();
 }
 else {
 EnableWindowLevel();
 }
}