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

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

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

readBlob

readBlob(webWorker: Worker | null, blob: Blob, fileName: string,
    mimeType?: string):
  Promise<{ webWorker: Worker, image?: Image, mesh?: 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

readArrayBuffer(webWorker: Worker | null, arrayBuffer: ArrayBuffer, fileName: string,
    mimeType?: string):
  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

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

Write an image or mesh to a an ArrayBuffer.

  • 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

  • useCompression: compress the pixel data when possible

readImageFile

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

Read an image from a File.

readImageBlob

readImageBlob(webWorker: Worker | null, blob: Blob, fileName: string,
    options: { componentType?: IntTypes | FloatTypes, pixelType?: PixelTypes, 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

readImageArrayBuffer(webWorker: Worker | null, arrayBuffer: ArrayBuffer, fileName: string,
    options: { componentType?: IntTypes | FloatTypes, pixelType?: PixelTypes, 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

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

readImageFileSeries(fileList: File[] | FileList,
    options: { 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.

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

readImageDICOMFileSeries(fileList: File[] | FileList,
    options: { componentType?: IntTypes | FloatTypes, pixelType?: PixelTypes, 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

readImageDICOMArrayBufferSeries(arrayBuffers: ArrayBuffer[],
    options: { componentType?: IntTypes | FloatTypes, pixelType?: PixelTypes, 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

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

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

writeImageArrayBuffer(webWorker: Worker | null, image: Image, fileName: string,
    options: { 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

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

Read a mesh from a File.

readMeshBlob

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

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

writeMeshArrayBuffer(webWorker: Worker | null, mesh: Mesh, fileName: string,
    mimeType?f: string, options?: { 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

  • binaryFileType: write in a binary as opposed to a ascii format, if possible