all files / src/imageLoader/internal/ xhrRequest.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
 
 
 
 
19×
19×
 
 
19×
19×
 
19×
19×
19×
19×
 
 
 
19×
 
 
 
19×
19×
 
 
19×
 
19×
 
 
 
 
19×
 
 
 
 
19×
 
 
 
19×
 
19×
 
 
 
19×
 
 
 
 
 
19×
 
 
 
19×
 
689×
 
 
 
 
 
 
 
689×
19×
19×
 
 
 
 
 
 
 
 
19×
 
37×
 
 
 
37×
 
 
 
 
 
37×
 
 
 
 
37×
 
 
 
 
 
 
 
37×
 
 
19×
 
 
 
 
 
import { external } from '../../externalModules.js';
import { getOptions } from './options.js';
 
function xhrRequest (url, imageId, headers = {}, params = {}) {
  const cornerstone = external.cornerstone;
  const options = getOptions();
 
  // Make the request for the DICOM P10 SOP Instance
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
 
    xhr.open('get', url, true);
    xhr.responseType = 'arraybuffer';
    options.beforeSend(xhr, imageId);
    Object.keys(headers).forEach(function (key) {
      xhr.setRequestHeader(key, headers[key]);
    });
 
    params.deferred = {
      resolve,
      reject
    };
    params.url = url;
    params.imageId = imageId;
 
    // Event triggered when downloading an image starts
    xhr.onloadstart = function (event) {
      // Action
      Iif (options.onloadstart) {
        options.onloadstart(event, params);
      }
 
      // Event
      const eventData = {
        url,
        imageId
      };
 
      cornerstone.triggerEvent(cornerstone.events, 'cornerstoneimageloadstart', eventData);
    };
 
    // Event triggered when downloading an image ends
    xhr.onloadend = function (event) {
      // Action
      Iif (options.onloadend) {
        options.onloadend(event, params);
      }
 
      const eventData = {
        url,
        imageId
      };
 
      // Event
      cornerstone.triggerEvent(cornerstone.events, 'cornerstoneimageloadend', eventData);
    };
 
    // handle response data
    xhr.onreadystatechange = function (event) {
      // Action
      Iif (options.onreadystatechange) {
        options.onreadystatechange(event, params);
 
        return;
      }
 
      // Default action
      // TODO: consider sending out progress messages here as we receive the pixel data
      if (xhr.readyState === 4) {
        Eif (xhr.status === 200) {
          resolve(xhr.response, xhr);
        } else {
          // request failed, reject the Promise
          reject(xhr);
        }
      }
    };
 
    // Event triggered when downloading an image progresses
    xhr.onprogress = function (oProgress) {
      // console.log('progress:',oProgress)
      const loaded = oProgress.loaded; // evt.loaded the bytes browser receive
      let total;
      let percentComplete;
 
      Iif (oProgress.lengthComputable) {
        total = oProgress.total; // evt.total the total bytes seted by the header
        percentComplete = Math.round((loaded / total) * 100);
      }
 
      // Action
      Iif (options.onprogress) {
        options.onprogress(oProgress, params);
      }
 
      // Event
      const eventData = {
        url,
        imageId,
        loaded,
        total,
        percentComplete
      };
 
      cornerstone.triggerEvent(cornerstone.events, 'cornerstoneimageloadprogress', eventData);
    };
 
    xhr.send();
  });
}
 
export default xhrRequest;