/
fileToMgh.html
107 lines (82 loc) · 3.47 KB
/
fileToMgh.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<html>
<head>
<title>File to MGH</title>
<script src="../dist/pixpipe.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1><a href="https://github.com/Pixpipe/pixpipejs"><span style="color: #ff91d7">Pixpipe</span><span style="color: #FFFFFF">js</span></a></h1>
<p>
This does the following :
<ul>
<li>open a local MGH file, using <code>pixpipe.FileToArrayBufferReader</code></li>
<li>redirect the file buffer into a <code>pixpipe.MghDecoder</code> to extract MGH dataset and metadata</li>
<li>get the output as a generique <code>pixpipe.Image3D</code> object</li>
<li><code>slice()</code> the volume 3 times, along 3 given axis to get 3 <code>pixpipe.Image2D</code> objects</li>
<li>display the images in separate canvas using a single instance of <code>pixpipe.CanvasImageWriter</code></li>
</ul>
</p>
<div>
Select an file:
<input type="file" id="fileInput">
<br>
<span id="fileInfo"></span>
</div>
<div id="myDiv_x"></div>
<div id="myDiv_y"></div>
<div id="myDiv_z"></div>
<script>
window.onload = function() {
var fileInput = document.getElementById('fileInput');
// The filter to read image from URL
var file2Buff = new pixpipe.FileToArrayBufferReader();
// the image is loaded...
// here, this = url2ImgFilter
file2Buff.on("ready", function(){
var filenames = this.getMetadata("filenames");
var mghBuff = this.getOutput();
var mghDecoder = new pixpipe.MghDecoder();
mghDecoder.addInput( mghBuff );
mghDecoder.update();
var mniVolume = mghDecoder.getOutput();
if(mniVolume){
// create a filter to write the image into a canvas
var imageToCanvasFilter = new pixpipe.CanvasImageWriter( );
// replace the default min max values of [0, 255]
imageToCanvasFilter.setMetadata("min", mniVolume.getMinValue());
imageToCanvasFilter.setMetadata("max", mniVolume.getMaxValue());
// display sagital
imageToCanvasFilter.setMetadata( "parentDivID", "myDiv_x" );
imageToCanvasFilter.addInput( mniVolume.getSlice('x', Math.round(mniVolume.getDimensionSize('x')/2 )) );
//imageToCanvasFilter.addInput( mniVolume.getSliceDim0( Math.round(mniVolume.getDimensionSize(0)/3 )) );
imageToCanvasFilter.update();
// display coronal
imageToCanvasFilter.setMetadata( "parentDivID", "myDiv_y" );
imageToCanvasFilter.addInput( mniVolume.getSlice('y', Math.round(mniVolume.getDimensionSize('y')/2 )) );
imageToCanvasFilter.update();
// display axial
imageToCanvasFilter.setMetadata( "parentDivID", "myDiv_z" );
imageToCanvasFilter.addInput( mniVolume.getSlice('z', Math.round(mniVolume.getDimensionSize('z')/2 )) );
imageToCanvasFilter.update();
}else{
console.warn("Non-existant output for mghDecoder.");
}
});
// event listener of the file input
fileInput.addEventListener('change', function(e) {
var files = e.target.files;
var filenames = {};
for(var i=0; i<files.length; i++){
// set the input, an HTML5 File object and a category (ID)
file2Buff.addInput(files[i], i);
filenames[i] = files[i].name ;
}
file2Buff.setMetadata("filenames", filenames);
// Perform the reading + conversion ibto ArrayBuffer
file2Buff.update();
});
}
</script>
</body>
</html>