Web Browser Input/Output

These Input/Output (IO) functions can be used from within a web browser’s JavaScript runtime. itk-wasm is best tested in Chrome, but it is used and designed to work on Chrome, Firefox, Microsoft Edge, Safari, and other browsers, including mobile browsers. In general, older browsers will function, but users on newer browsers will experience improved performance.

The itk-wasm IO functions convert native brower objects, File‘s, Blob‘s, and ArrayBuffer‘s to / from JavaScript objects with TypedArray‘s for binary data.

Most of these functions return a Promise.

These functions return the WebWorker used for computation. They also optionally accept a web worker from a previous execution as their first argument – pass the worker generated from execution or null if one is not available. Re-using workers can greatly improve performance.


readFile(webWorker: Worker | null, file: File): Promise<{ webWorker, image, mesh }>

Read an image or mesh or poly data from a File.

readBlob(webWorker: Worker | null, blob: Blob, fileName: string, mimeType: string): Promise<{ webWorker, image, mesh, }>

Read an image or mesh or poly data from a Blob. fileName is a string with the file name. mimeType is an optional mime-type string.

readArrayBuffer(webWorker | null, arrayBuffer, fileName, mimeType): Promise<{ webWorker: Worker, image: Image | mesh: Mesh }>

Read an image or mesh from an ArrayBuffer. fileName is a string with the file name. mimeType is an optional mime-type string.

writeArrayBuffer(webWorker: Worker | null, useCompression: boolean, imageOrMesh: Image | Mesh, fileName: string, mimeType: string): Promise<{ webWorker: Worker, arrayBuffer: ArrayBuffer }>

Write an image or mesh to a an ArrayBuffer.

useCompression: compress the pixel data when possible
imageOrMesh: Image or Mesh instance to write
fileName: name that would be used for the resulting file
mimeType: optional mime-type for the resulting file


readImageFile(webWorker: Worker | null, file: File): Promise<{ webWorker: Worker, image: Image }>

Read an image from a File.

readImageBlob(webWorker: Worker | null, blob: Blob, fileName: string, mimeType: string): Promise<{ webWorker: Worker, image: Image }>

Read an image from a Blob. fileName is a string with the file name. mimeType is an optional mime-type string.

readImageArrayBuffer(webWorker: Worker | null, arrayBuffer: ArrayBuffer, fileName: string, mimeType: string): Promise<{ webWorker: Worker, image: Image }>

Read an image from an ArrayBuffer. fileName is a string with the file name. mimeType is an optional mime-type string.

readImageHTTP(url: string): Promise<image: Image>

Read a server-side generated image created with itk::WASMImageIO. The url should point to a directory ending with .iwi. Inside the directory, an index.json file should be served, along with the pixel and direction buffer file at ${url}/data/data.raw and ${url}/data/direction.raw, respectively.

readImageFileSeries(fileList: File[] | FileList, zSpacing: number = 1.0, zOrigin: number = 0.0, sortedSeries: boolean = false): Promise<{ image: Image, webWorkerPool: WorkerPool }>

Read an image from a series of File‘s or Blob‘s stored in an Array or FileList.

The zSpacing and zOrigin arguments enable specification of the spacing and origin in the third dimension.

By default, files are sorted by name, lexicographically. To sort by a different method, sort the files first, then set sortedSeries to true.

The used webWorkerPool is returned to enable resource cleanup by calling .terminateWorkers().

readImageDICOMFileSeries(fileList: File[] | FileList, singleSortedSeries: boolean = false): Promise<{ image: Image, webWorkerPool: WorkerPool }>

Read an image from a series of DICOM File‘s or Blob‘s stored in an Array or FileList.

If the files are known to be from a single, sorted series, the last argument can be set to true for performance.

The used webWorkerPool is returned to enable resource cleanup by calling .terminateWorkers().

readImageDICOMArrayBufferSeries(arrayBuffers: ArrayBuffer[], singleSortedSeries: boolean = false): Promise<{ image: Image, webWorkerPool: WorkerPool }>

Read an image from a series of DICOM ArrayBuffer[ArrayBuffer]s stored in an Array.

If the files are known to be from a single, sorted series, the last argument can be set to true for performance.

The used webWorkerPool is returned to enable resource cleanup by calling .terminateWorkers().

readDICOMTags(webWorker: Worker | null, file: File, tags: string[] | null = null): Promise<{ tags: Map<string, string>, webWorker: Worker }>

Read tags from a DICOM File.

Tags should be of the form "GGGG|EEEE", where GGGG is the group ID in hex and EEEE is the element ID in hex. As an example, “0010|0010” is the PatientID.
Hexadecimal strings are treated case-insensitively.
A web worker object can be optionally provided to re-use a previously created web worker.
Otherwise, leave this null.

Returns:

  • tags: a Map containing the mapping from tag to tag value.
  • webWorker: a webworker that can be re-used.

readDICOMTagsArrayBuffer(webWorker: Worker | null, arrayBuffer: ArrayBuffer, tags: string[] | null = null): Promise<{ tags: Map<string, string>, webWorker: Worker }>

Read tags from a DICOM ArrayBuffer.

Tags should be of the form "GGGG|EEEE", where GGGG is the group ID in hex and EEEE is the element ID in hex. As an example, “0010|0010” is the PatientID.
Hexadecimal strings are treated case-insensitively.
A web worker object can be optionally provided to re-use a previously created web worker.
Otherwise, leave this null.

Returns:

  • tags: a Map containing the mapping from tag to tag value.
  • webWorker: a webworker that can be re-used.

writeImageArrayBuffer(webWorker: Worker | null, image: Image, fileName: string, mimeType: string, useCompression: boolean = false): Promise<{ webWorker: Worker, arrayBuffer: ArrayBuffer }>

Write an image to a an ArrayBuffer.

image: Image instance to write
fileName: name that would be used for the resulting file
mimeType: optional mime-type for the resulting file
useCompression: compress the pixel data when possible


readMeshFile(webWorker: Worker | null, file: File): Promise<{ webWorker: Worker, mesh: Mesh }>

Read a mesh from a File.

readMeshBlob(webWorker: Worker | null, blob: Blob, fileName: string, mimeType: string): Promise<{ webWorker: Worker, mesh: Mesh }>

Read an mesh from a Blob. fileName is a string with the file name. mimeType is an optional mime-type string.

readMeshArrayBuffer(webWorker: Worker | null, arrayBuffer: ArrayBuffer, fileName: string, mimeType: string): Promise<{ webWorker: Worker, mesh: Mesh }>

Read an mesh from an ArrayBuffer. fileName is a string with the file name. mimeType is an optional mime-type string.

writeMeshArrayBuffer(webWorker: Worker | null, mesh: Mesh, fileName: string, mimeType: string, { useCompression?: boolean, binaryFileType?: boolean }): Promise<{ webWorker: Worker, arrayBuffer: ArrayBuffer }>

Write an mesh to a an ArrayBuffer.

mesh: Mesh instance to write
fileName: name that would be used for the resulting file
mimeType: optional mime-type for the resulting file
useCompression: compress the pixel data when possible