Use the itk.js UMD module from a HTML script tag




This example demonstrates how to use itk.js in a web browser application via its pre-built UMD module. This is an alternative to bundling the modules with the Webpack application, as shown in the Webpack example. In this example, we re-use the itk.js IO modules published on unpkg.com. Find the full example in the itk-js/examples/UMD directory of the GitHub repository.

Inside the HTML head, load the itk.js UMD script:

<head>
[...]
<script src="https://unpkg.com/itk@9.4.0/umd/itk.js"></script>
</head>

Inside body JavaScript code, the itk object provides itk.js API functions and objects as properties.

[...]
return itk.readImageFile(null, files[0]).then(function({ image, webWorker }) {
webWorker.terminate();

Simple HTTP server

Optionally, add an npm script that will start a local web server for development.

npm install --save-dev local-web-server

Next, define a start command to start a local development web server in the scripts section of the package.json file,

"scripts": {
"start": "ws -d dist"
},

To start the development web server hosting the dist/ directory contents, run

npm run start

Testing with Karma

This section described how to configure browser-based testing with the Karma test runner.

First, install Karma and a test harness library like tape.

npm install --save-dev karma karma-chrome-launcher karma-tap karma-tap-pretty-reporter karma-webpack tape tap-spec

Next write a karma.config.js file, and a test/index.js test script.
Webpack builds test scripts in test/*.js, resolves module dependencies, and Karma serves and runs the resulting scripts.

Create entries in the package.json file to start Karma, and run the tests!

"scripts": {
[...]
"test": "karma start ./karma.conf.js",
"test:debug": "karma start ./karma.conf.js --browsers Chrome --no-single-run"
},

and

npm run test