Javascript API#
As opposed to the Python API, the Javascript API covers fewer parts of the C++ API and differs more often. Due to the focus of Javascript to web applications, the wrappers cover basic manipulation of data sets and the DICOM web services.
Adding Odil.js to an HTML document#
The following example show how to integrate Odil.js in an HTML web page:
<!doctype html>
<html>
<head>
<title>Odil web app</title>
</head>
<body>
<script>
function main() {
window.odil = Module;
}
var Module = {
onRuntimeInitialized: main
};
</script>
<script src="odil.js"></script>
</body>
</html>
Value representations (VR)#
The members of the VR enum are exposed as individual variables, with an additional VRtoString
function to convert them to their name.
var vr = odil.PN;
console.log(odil.VRtoString(vr));
Data sets#
Data sets can be read from an ArrayBuffer object using the readBuffer
function, which return an array comprised of the meta-information and the data set in a file. This can be used in conjunction with a FileReader to read a user-selected file as shown in the following example:
<!doctype html>
<html>
<head>
<title>Odil web app</title>
</head>
<body>
<label for="file">Select a DICOM file: </label>
<input type="file" id="file" name="file"/><br>
<script>
function onFileRead(event) {
var headerAndDataSet = odil.readBuffer(event.target.result);
}
function onFileSelect(event) {
var reader = new FileReader();
reader.addEventListener('loadend', onFileRead);
reader.readAsArrayBuffer(event.target.files[0]);
}
function main() {
window.odil = Module;
document.querySelector('#file').addEventListener(
'change', onFileSelect);
}
var Module = { onRuntimeInitialized: main };
</script>
</body>
</html>
Accessing the element of the data set is done as in Python or C++:
function onFileRead(event) {
var headerAndDataSet = odil.readBuffer(event.target.result);
var dataSet = headerAndDataSet.get(1);
console.log(dataSet.as_string(odil.getTag("PatientName")).get(0));
}
In addition to the as_XXX
member functions, the following member functions are also exposed:
is_XXX
remove
has
get_vr
get_transfer_syntax
andset_transfer_syntax
The equality and difference operators are exposed as equal
and notEqual
, as for Tag
objects. Some member functions in C++ and Python which may apply to either the whole data set or just an element (empty
, size
, clear
) are exposed as to Javascript functions: empty
will apply to the whole data set, while empty_tag
will apply to a single element specified by its tag.
It is also possible to iterate the data sets, by iterating the tags of its elements:
function onFileRead(event) {
var headerAndDataSet = odil.readBuffer(event.target.result);
var dataSet = headerAndDataSet.get(1);
var tags = dataSet.get_tags();
for(var i=0; i<tags.length; ++i) {
console.log(tags[i].toString());
}
}