如何使用javascript加载.mha图像文件并将其附加到dom？

Question

下午好！

我是一名JavaScript初学者，想帮助我的一个朋友。我创建了一个小的node.js（v8.9.4）并使用Visual Studio Code（1.23，2018）表示（v4.16.4）应用程序。 Websocket将数据从服务器目录发送到客户端，并且根据用户交互动态调整视图。该视图包含1个html select元素。一旦选择了一个选项，就会显示第二个选择元素，并将图像数据作为选项标签。图像数据由两种文件格式组成：.mha和.vtk。

到目前为止我做了什么

我已经用.png和.jpg图像测试了我的应用程序，它像梦一样工作。图像已成功添加到dom中或从dom中删除。但是.mha图像不能显示为“普通”文件格式（它们显示为空白文件）。因此，我尽可能地告知自己，并意识到我必须使用它。因此，我通过以下方式将itk集成到了我的项目中：

npm install --save itk

它也显示在node_modules文件夹内以及依赖项下：

 "itk": {
  "version": "9.1.2",
  "resolved": "https://registry.npmjs.org/itk/-/itk-9.1.2.tgz",
  "integrity": "sha512-Nngfz3QdTYJybNQjUtmOToFCJ8hfbGEiIDYsv/WFr6/vK9wXpArcDYTDcR90Rhd8GhMbi1XNArYjJRxQ0E7aVw==",
  "requires": {
    "axios": "0.17.1",
    "commander": "2.19.0",
    "mime-types": "2.1.21",
    "promise-file-reader": "0.3.1",
    "webworker-promise": "0.4.2"
  }

研究：

https://github.com/InsightSoftwareConsortium/itk-js

https://insightsoftwareconsortium.github.io/itk-js/docs/index.html

https://insightsoftwareconsortium.github.io/itk-js/index.html

https://discourse.itk.org/t/how-to-create-an-itk-js-image-object/1163

问题：

请有人在一个非常基本的层面上向我解释一下，如何在使用.png和.jpgs进行加载时，如何使用javascript加载.mha图像并将其附加到dom上？不幸的是，作为一个新手，我根本不理解github上的示例代码。

谢谢！

应用程序：

出于可视化的目的，我想向您展示代码。

// index.js
// App setup
var express = require('express');
var app = express();

// Server setup
var server = app.listen(3000,function(){
    console.log("Marcos chat application has started. Server is listening at 3000...");
});

// Static file
app.use(express.static('public'));
app.use(express.static('resources/experiment2'));

// File Reading (for directory analysis)
var fs = require('fs');
var directory;
fs.readdir("resources", function(err, items) {
    directory = items;
});


// Websocket setup
var experimentPath;
var socket = require('socket.io');
var io = socket(server);


// "Listens" to specific server
io.on('connection',function(socket){
    console.log("User logged in...");

    // Establish first html select element
    socket.emit('sendDirectory',directory);

    // Establish second html select element
    socket.on('selectedExperiment', function(msg){
        experimentPath = "resources" + "/" + msg;
        app.use(express.static(experimentPath));
        var experimentDirectory = fs.readdirSync(experimentPath, function(err, items) {});
        socket.emit('sendExperimentDirectory', experimentDirectory);
    });

    // .mha image socket event
    socket.on('checkImageType', function(msg){
        console.log(msg);
        if(msg.format == ".mha")
        {
            // Read .mha image
            
        }
    });
});

// socket.js
// Establish websocket connection
var socket = io.connect('http://localhost:3000');
var firstSocketAccess = true;
var firstImageAccess = true;
var selectNode;
var imageNode;

// Listens to websocket for sendDirectory event
socket.on('sendDirectory',function(msg){
    // Creates first <select> element
    var selectOneNode = document.createElement("SELECT");
    selectOneNode.id = "experimentSelection";
    document.getElementById("historyTA").appendChild(selectOneNode);

    // Creates <option> tags for first <select> element
    for (var i = 0; i < msg.length; i++) { 
        var option = document.createElement("OPTION");
        option.innerHTML = msg[i];
        document.getElementById("experimentSelection").appendChild(option);
    }
    
    // Websocket sends per default the first experiment directory
    socket.emit('selectedExperiment',msg[0]);

    // Event Listener for first <select> element
    document.getElementById("experimentSelection").addEventListener("change",function(){
        // Websocket sends the selected experiment directory
        socket.emit('selectedExperiment',msg[document.getElementById("experimentSelection").selectedIndex]);
        document.getElementById("historyTA").removeChild(imageNode);
    })
});

// Listens to websocket for sendExperimentDirectory event
socket.on('sendExperimentDirectory',function(msg){
    // Must delete select element node when it's has been created before
    if(firstSocketAccess == false)
    {
        document.getElementById("historyTA").removeChild(selectNode);
    }

    // Creates second <select> element
    selectNode = document.createElement("SELECT");
    selectNode.id = "experimentSubSelection";
    document.getElementById("historyTA").appendChild(selectNode);

    // Creates <option> tags for second <select> element
    for (var i = 0; i < msg.length; i++) { 
        var option = document.createElement("OPTION");
        option.innerHTML = msg[i];
        document.getElementById("experimentSubSelection").appendChild(option);
    }

    // Check the image format type
    var formatType = {path: msg[0], format: msg[0].substring(msg[0].indexOf("."))};
    socket.emit('checkImageType',formatType);

    // Appends per default the first image to the dom
    imageNode = document.createElement("IMG");
    imageNode.id = "resultImage";
    imageNode.setAttribute("src", msg[0]);
    document.getElementById("historyTA").appendChild(imageNode);

    // Event Listener for second <select> element
    document.getElementById("experimentSubSelection").addEventListener("change",function()
    {
        // Removes image element node before appending the new
        document.getElementById("historyTA").removeChild(imageNode);

        // Checks image type format
        formatType = {path: msg[document.getElementById("experimentSubSelection").selectedIndex], format: msg[document.getElementById("experimentSubSelection").selectedIndex].substring(msg[document.getElementById("experimentSubSelection").selectedIndex].indexOf("."))};
        socket.emit('checkImageType',formatType);

        // Creates image element node and appends to the dom
        imageNode = document.createElement("IMG");
        imageNode.id = "resultImage";
        imageNode.setAttribute("src", msg[document.getElementById("experimentSubSelection").selectedIndex]);
        document.getElementById("historyTA").appendChild(imageNode);
        firstImageAccess = false;   
    })
    firstSocketAccess = false;
});

<!DOCTYPE html>
<html>
<head>
<title>Simple Chat Application</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
</head>

<body>
    <div id="historyTA" cols="100" rows="40" style="resize:none"></div>
    <script src="socket.js"></script>
</body>

</html