How to use browser Blob url to load dicom image stored in browser memory?

[DaCao]

I am building a webapp that uses CornerstoneViewerport to view dicom images. I am trying to download the dicom blob data from remote cloud server first and save it in browser memory, such that when user clicks to open the CornerstoneViewerport, I can just provide the previously cached blob data to the CornerstoneViewerport.

I do this to avoid waiting time when the CornerstoneViewerport fetches the dicom images from remote server.

In the below code:

  const response = await fetch(url);
  const blob = await response.blob();
  const downloadUrl = window.URL.createObjectURL(blob);
  const blobUrl = downloadUrl;

url is dicomweb://che-myapp.s3.ap-northeast-1.amazon…71c952958&X-Amz-SignedHeaders=host&x-id=GetObject

blobUrl now becomes blob:http://localhost/5ccb3ee5-40a3-49aa-a569-c22903d19e8d; This is the blob url that browsers use to access blob data stored in memory of the current web page.

I have confirmed that I can use this blobUrl to download the file to local file system, so it is good.

Now, in the reactJS code:

        <CornerstoneViewerport
          imageIds={dicomFiles}
          tools={tools}
        />

where dicomFiles is an array of blobUrls.

Currently the viewer would show an error saying:

Error: loadImageFromImageLoader: no image loader for imageId

Question: How can I let the CornerstoneViewerport use blob urls in the form of blob:http://localhost/5ccb3ee5-40a3-49aa-a569-c22903d19e8d?

Is there any alternatives if this cannot be done?

Is there a way to use custom blob scheme with Cornerstone?

How to write custom image loader with Cornerstone such that it can use blob url to get blob data in browser memory, and renders the image ?