` are the output of running the `ITK/Utilities/Maintenance/WhatModulesITK.py` script on your source code.
Specify a filename that ends in `.json` to `itk::ImageFileWriter`, and it will produce a JSON file with the `itk/Image` structure and binary file for the pixel buffer data.
On the JavaScript side, libraries like [`axios`](https://github.com/axios/axios) make AJAX requests easier. Set the `responseType` to `json` or `arraybuffer` for the `.json` and binary files.
Then, create awesome things with essential tools like [itk.js](https://insightsoftwareconsortium.github.io/itk-js/), [vtk.js](https://kitware.github.io/vtk-js/index.html), [itk-vtk-image-viewer](https://kitware.github.io/itk-vtk-image-viewer/), or [paraview-glance](https://kitware.github.io/paraview-glance/index.html).
---
### Author:  [@Mason](https://discourse.itk.org/u/Mason)
#### Post date: [July 31, 2018, 2:41am UTC](https://discourse.itk.org/t/how-to-create-an-itk-js-image-object/1163/4 "2018-07-31T02:41:21Z")
Thanks a lot! Let me try.
---
### Author:  [@Phong\_Tran](https://discourse.itk.org/u/Phong_Tran)
#### Post date: [October 15, 2019, 9:26am UTC](https://discourse.itk.org/t/how-to-create-an-itk-js-image-object/1163/5 "2019-10-15T09:26:36Z")
Hi Matt,
Is there any example that uses JSONImageIO class which converts from nrrd / dicom files to the JavaScript itk/Image datastructure and to JSONFile ?
---
### Author:  [@Phong\_Tran](https://discourse.itk.org/u/Phong_Tran)
#### Post date: [October 16, 2019, 4:11am UTC](https://discourse.itk.org/t/how-to-create-an-itk-js-image-object/1163/6 "2019-10-16T04:11:10Z")
I was able to use BridgeJavaScript lib in my C++ app and produce the 2 json files like this:
-rw-r–r-- 1 phongtd phongtd 504 Thg 1 16 09:52 t.json
-rw-r–r-- 1 phongtd phongtd 16777216 Thg 1 16 09:52 t.json.data
However on Javascript file, I wonder how itk js can read those json files and parse them into the Image Type ?
---
### Author:  [@matt.mccormick](https://discourse.itk.org/u/matt.mccormick)
#### Post date: [October 16, 2019, 8:57pm UTC](https://discourse.itk.org/t/how-to-create-an-itk-js-image-object/1163/7 "2019-10-16T20:57:45Z")
> [@Phong\_Tran](#):
>
> I was able to use BridgeJavaScript lib in my C++ app and produce the 2 json files like this:
> -rw-r–r-- 1 phongtd phongtd 504 Thg 1 16 09:52 t.json
> -rw-r–r-- 1 phongtd phongtd 16777216 Thg 1 16 09:52 t.json.data
@Phong_Tran well done!
The next steps, to use your C++ app in the web browser or with Node.js on the server, is to build into JavaScript and WebAssembly. This [Hello World](https://insightsoftwareconsortium.github.io/itk-js/examples/hello_world_node.html) example and this [simple ITK pipeline](https://github.com/InsightSoftwareConsortium/itk-js/tree/master/test/MedianFilterPipeline) demonstrate how to do this. Then, you can run the web executable with [`runPipelineBrowser`](https://insightsoftwareconsortium.github.io/itk-js/api/browser_pipelines.html). Please let us know how it goes and if you have any questions.
---
### Author:  [@Phong\_Tran](https://discourse.itk.org/u/Phong_Tran)
#### Post date: [October 17, 2019, 2:24am UTC](https://discourse.itk.org/t/how-to-create-an-itk-js-image-object/1163/8 "2019-10-17T02:24:19Z")
Thanks Matt,
Yes I have read the [Hello World](https://insightsoftwareconsortium.github.io/itk-js/examples/hello_world_node.html) example and successfully ran it. But our workflow model is to use the client-server architecture. When I read your statement
> On the JavaScript side, libraries like [`axios`](https://github.com/axios/axios) make AJAX requests easier. Set the `responseType` to `json` or `arraybuffer` for the `.json` and binary files.
I thought that my C++ app will be on the server side which produces the json file and its data. And Axios, itk.js, vtk.js, itk-vtk-viewer will be on the client side which requests the json and its data files and process those files. I maybe misunderstood your thoughts. Can you please help to elaborate why do we need axios in this case ? Because if we build the C++ app into the Javascript and WebAssembly, we can use it directly in web browser.
---
### Author:  [@matt.mccormick](https://discourse.itk.org/u/matt.mccormick)
#### Post date: [October 21, 2019, 4:43pm UTC](https://discourse.itk.org/t/how-to-create-an-itk-js-image-object/1163/9 "2019-10-21T16:43:17Z")
> [@Phong\_Tran](#):
>
> But our workflow model is to use the client-server architecture.
If this is your use case, then this is correct:
> [@Phong\_Tran](#):
>
> And Axios, itk.js, vtk.js, itk-vtk-viewer will be on the client side which requests the json and its data files and process those files.
We can create a function in the itk.js API, e.g. `readImageHTTP` to address this use case.
---
### Author:  [@matt.mccormick](https://discourse.itk.org/u/matt.mccormick)
#### Post date: [October 22, 2019, 3:42pm UTC](https://discourse.itk.org/t/how-to-create-an-itk-js-image-object/1163/10 "2019-10-22T15:42:06Z")
`readImageHTTP` is implemented here:
>
---
### Author:  [@Phong\_Tran](https://discourse.itk.org/u/Phong_Tran)
#### Post date: [October 29, 2019, 9:43am UTC](https://discourse.itk.org/t/how-to-create-an-itk-js-image-object/1163/11 "2019-10-29T09:43:24Z")
Hi Matt,
When I tested itk-vtk-viewer js with Image taken from readImageHTTP, I noticed that the Itk Image is not compatible with the existing data structure. For example, when I passed that Itk Image to function vtkITKHelper.convertItkToVtkImage like this:
> test(‘readImageHTTP’, (t) =\> {
> const testURL = ‘[http://192.168.1.13:6502/v1/ivmero/api/service/out.json](http://192.168.1.13:6502/v1/ivmero/api/service/out.json)’;
> readImageHTTP(testURL).then(function (itkImage) {
> const imageData = vtkITKHelper.convertItkToVtkImage(itkImage)
> })
> })
It throws the exception in this line of vtk library
> direction[col + idx \* 3] =
> itkImage.direction.data[idx + col \* itkImage.imageType.dimension];
it’s because the Http ITK JS Image object does not have direction.data. Here is an example
> direction: (9) [1, -6.123233996e-17, 7.88860904915783e-31, 6.123233996e-1
Do you think ITK JS need to change to datastructure to be compatible with existing VTK JS source ?
---
### Author:  [@matt.mccormick](https://discourse.itk.org/u/matt.mccormick)
#### Post date: [October 29, 2019, 11:13am UTC](https://discourse.itk.org/t/how-to-create-an-itk-js-image-object/1163/12 "2019-10-29T11:13:49Z")
Hi @Phong_Tran,
Was the server-side file generated with ITKBridgeJavaScript 10.0.0? The `direction.data` was changed from 9.X.
---
### Author:  [@Phong\_Tran](https://discourse.itk.org/u/Phong_Tran)
#### Post date: [October 30, 2019, 2:59am UTC](https://discourse.itk.org/t/how-to-create-an-itk-js-image-object/1163/13 "2019-10-30T02:59:16Z")
Thank you Matt,
Yes I upgraded the ITKBridgeJavaScript 10.0.0 and it works. The ITK JS Image has now correct format.
---
### Author:  [@nguyenhoa93](https://discourse.itk.org/u/nguyenhoa93)
#### Post date: [March 15, 2021, 1:32am UTC](https://discourse.itk.org/t/how-to-create-an-itk-js-image-object/1163/14 "2021-03-15T01:32:12Z")
Thank you, Matt.
I would like to host my data on s3 server. However, when I get the link of `nrrd` file together with token to display on itk-vtk-viewer, it showed the access denied error.
Is there any way that I can host my data on s3 and display it with `https://kitware.github.io/itk-vtk-viewer/app/?fileToLoad=?`
---
### Author:  [@matt.mccormick](https://discourse.itk.org/u/matt.mccormick)
#### Post date: [March 15, 2021, 2:41pm UTC](https://discourse.itk.org/t/how-to-create-an-itk-js-image-object/1163/15 "2021-03-15T14:41:01Z")
Hi @nguyenhoa93 ,
If you are using s3 and URL’s, the s3 pre-signed URL feature may be what you are looking for:
[https://docs.aws.amazon.com/AmazonS3/latest/userguide/ShareObjectPreSignedURL.html](https://docs.aws.amazon.com/AmazonS3/latest/userguide/ShareObjectPreSignedURL.html)