開源醫學影像平台---Cornerstonejs學習筆記<2>

Concepts

Enabled Elements

在Cornerstone中，Enabled Elements是HTMLElement（通常是div），我們在其中交互式顯示醫學圖像。

要顯示圖像，Web開發人員需要執行以下操作：

1. 通過網頁中的腳本標記引用Cornerstone JavaScript庫文件
2. 引用JavaScript文件以獲取Cornerstone將用於實際加載網頁中像素數據（例如WADO，WADO-RS，自定義）的一個或多個 Image Loaders 
3. 向DOM中添加一個元素，該元素將用於顯示內部的圖像
4. 使用CSS將元素以及所需的寬度和高度放置在頁面上
5. 使用enable（） API以准備要顯示圖像的元素
6. 使用loadImage（） API 加載圖像
7. 使用displayImage（） API 顯示加載的圖像

有關使用基石所需的最少代碼，請參見minimal example 。

您可能還希望包括Cornerstone工具庫，以使用現成的工具，例如窗口，平移，縮放和測量。

 Image Ids

Cornerstone Image Id是一個URL，用於標識要顯示的Cornerstone的單個圖像。

Cornerstone使用Image Id中的URL方案確定要調用哪個Image Loader插件來實際加載圖像。這種策略允許Cornerstone同時顯示從不同服務器以不同協議獲得的多個圖像。例如，Cornerstone可以顯示通過WADO獲得的DICOM CT圖像以及由數碼相機捕獲並存儲在文件系統中的JPEG皮膚病學圖像。

 Image Id格式

Cornerstone沒有指定URL的內容-由Image Loader定義URL的內容和格式，以便它可以定位圖像。例如，可以編寫專有的Image Loader插件，以使用GUID，文件名或數據庫行ID與專有服務器對話並查找圖像。

以下是一些有關不同的Image Loader插件的Image Id外觀的示例：

example://1
dicomweb://server/wado/{uid}/{uid}/{uid}
http://server/image.jpeg
custom://server/uuid

 Image Loaders

一個 Image Loader是JavaScript功能是負責用於拍攝Image Id 為一個圖像，並返回對應的圖像裝入對象為圖像到cornerstone。Image Load Object包含一個Promise ，它會生成一個圖像。

由於加載圖像通常需要調用服務器，因此圖像加載的API必須是異步的。cornerstone要求圖像加載器返回一個包含Promise的對象，基石將使用該對象異步接收圖像對象，如果已發生，則返回錯誤。

 Image Loader Workflow

1. ImageLoader向cornerstone注冊以加載特定的ImageId URL方案
2. 應用程序請求使用loadImage（）api加載圖像。
3. 基石將將圖像加載到通過傳遞給loadImage（）的imageId的URL方案注冊的ImageLoader的委托。
4. ImageLoader將返回一個包含Promise的Image Load對象，一旦獲得像素數據，它將與相應的Image Object一起解析。獲取像素數據可能需要使用XMLHttpRequest調用遠程服務器，對像素數據進行解壓縮（例如從JPEG 2000中解壓縮），以及將像素數據轉換為Cornerstone可以理解的格式（例如RGB vs YBR顏色）。
5. 然后，使用API 顯示已解析的Promise傳回的Image Object displayImage()。

盡管像素數據通常是從服務器獲取的，但並非總是如此。實際示例實際上使用ImageLoader插件來提供圖像，而根本不需要服務器。在這種情況下，圖像經過base64編碼並存儲在ImageLoader插件本身中。該插件僅將base64像素數據轉換為像素數組。或者，可以編寫一個圖像加載器，在客戶端生成派生圖像。例如，您可以通過這種方式實現MPR功能。

 

Available Image Loaders

Image Loader	用於
Cornerstone WADO Image Loader	DICOM第10部分圖像 支持WADO-URI和WADO-RS 支持多幀DICOM實例 支持從File對象讀取DICOM文件
Cornerstone Web Image Loader	PNG和JPEG圖像

如果您有要添加到此列表的圖像加載器，請隨時發送請求請求。

 Image Load Object

Cornerstone Image Loaders返回包含Promise的圖像加載對象。我們選擇使用對象而不是僅返回Promise的原因是因為現在圖像加載器還可以在其圖像加載對象中返回其他屬性。例如，我們打算使用在圖像加載對象內由圖像加載器傳回的cancelFn來實現取消未決或正在進行的請求的支持。但是這仍在開發中。

 

Writing an Image Loader

這是一個 Image Loader 的示例，該圖像加載器使用XMLHttpRequest獲取像素數據，並將包含Promise 的圖像加載對象返回給Cornerstone：

function loadImage(imageId) {
    // Parse the imageId and return a usable URL (logic omitted)
    const url = parseImageId(imageId);

    // Create a new Promise
    const promise = new Promise((resolve, reject) => {
      // Inside the Promise Constructor, make
      // the request for the DICOM data
      const oReq = new XMLHttpRequest();
      oReq.open("get", url, true);
      oReq.responseType = "arraybuffer";
      oReq.onreadystatechange = function(oEvent) {
          if (oReq.readyState === 4) {
              if (oReq.status == 200) {
                  // Request succeeded, Create an image object (logic omitted)
                  const image = createImageObject(oReq.response);

                  // Return the image object by resolving the Promise
                  resolve(image);
              } else {
                  // An error occurred, return an object containing the error by
                  // rejecting the Promise
                  reject(new Error(oReq.statusText));
              }
          }
      };

      oReq.send();
    });

    // Return an object containing the Promise to cornerstone so it can setup callbacks to be
    // invoked asynchronously for the success/resolve and failure/reject scenarios.
    return {
      promise
    };
}

 Image Loader 負責返回與傳遞給其loadImage函數的image Id Cornerstone相對應的Image Load Object。解決Image Load對象中的Promise后，應使用Image解決。Image Loader 使用API 為給定的URL方案注冊：registerImageLoader()

// Register the url scheme 'myCustomLoader' to correspond to our loadImage function
cornerstone.registerImageLoader('myCustomLoader', loadImage);

// Images loaded as follows will be passed to our loadImage function:
cornerstone.loadImage('myCustomLoader://example.com/image.dcm')