search

rii-mango / NIFTI-Reader-JS

A JavaScript NIfTI file format reader.
MIT License
137 stars 30 forks source link

How do I load a Nifti Image into a browser and get a cross section? #7

Closed barefoothiker closed 5 years ago

barefoothiker commented 5 years ago

Hi, I am using angular4 + Python/Django backend for a web application in which I would like to load and display a cross section of a nifti iamge. I am first converting the nifti image to a base64/UTF-8 decoded string by base64.base64encode(open('nifti file').read()).decode('utf-8') on the server side, sending the resulting ascii string as a part of a JSON response, and then on the client side, doing the following. Firstly, decoding the Array Buffer using Base64Binary.decodeArrayBuffer(ascii string data) from https://github.com/danguer/blog-examples/blob/master/js/base64-binary.js . I found this solution, without which the incoming data is not being recognised as a Nifti image by nifti reader js. This is then recognised by nifti reader as a nifti image, and then I can get the niftiImage. Now I would like to display a cross section of the nifti image. However, if I look into the data present in the niftiImage array (should I cast it as Uint8Array?), the numbers are not like the data I see when I load the image data in the server side using nibabel.load(nifti image).get_data(). I am not sure how to go ahead from here. I followed the discussion in the other thread regarding how to draw the image on the canvas, and there you have suggested a data transformation using screenMax and screenMin, though I do not know if that logic is applicable in my case as I am loading the data differently (not reading from file using fs.readFileSync(nifti file) and am also performing some data transformation using Base64Binary.decodeArrayBuffer. Your help will be greatly appreciated, thanks very much in advance! Thanks, Siddhartha

martinezmj-ims commented 5 years ago

The NIFTI image data is just raw intensity values. If the image size is 100x100, then there will be 100x100 values in whatever bit depth is specified in the NIFTI header. (Look into nifti.NIFTI1.prototype.getDatatypeCodeString and search for "datatype". You'll need to cast the ArrayBuffer to a typed array based on the datatype code in the NIFTI header.)

It's not like DICOM that stores JPEG data which can be easily rendered. You need to convert the NIFTI raw intensity values to RGB values suitable for the screen.

ghost commented 5 years ago

Hi @martinezmj this is the same problem we all facing with this library, we dont know how to read the arrayBuffer and then render the image to the canvas or an image tag.

Can you please make an example that renders this arrayBuffer into a canvas element, so we will understand how to read this complicated arrayBuffer.

Without Papaya viewer, only javascript and html.

This will help us a lot.

Thanks.

rii-mango commented 5 years ago

I've posted an example of how to read and draw a nifti to a canvas: https://github.com/rii-mango/NIFTI-Reader-JS/blob/master/tests/canvas.html

ghost commented 5 years ago

Thank you RII Mango, appreciate, I will try this and I let you know.

rii-mango commented 5 years ago

Sams as issue #5 , closing.