Как я могу загрузить файл изображения .mha с помощью JavaScript и добавить его в DOM? - PullRequest
Новая
       42

Как я могу загрузить файл изображения .mha с помощью JavaScript и добавить его в DOM?

0 голосов
/ 08 января 2019

Добрый день!

Я новичок в JavaScript и хотел бы помочь своему другу. Я создал небольшое приложение node.js (v8.9.4) и express (v4.16.4) с кодом Visual Studio (1.23, 2018). Веб-сокет отправляет данные из каталога сервера клиенту, и представление динамически адаптируется в зависимости от взаимодействия с пользователем. Представление состоит из 1 HTML-элемента выбора. Как только одна опция выбрана, второй элемент выбора отображается с данными изображения в качестве тегов опции. Данные изображения состоят из двух форматов файлов: .mha и .vtk.

Что я сделал до сих пор:

Я протестировал свое приложение с изображениями .png и .jpg, и оно работало как сон. Изображения успешно добавляются или удаляются из домена. Но изображения .mha не могут отображаться как «нормальные» форматы файлов (они отображаются как пустые файлы). Таким образом, я проинформировал себя настолько хорошо, насколько это было возможно, и понял, что должен был использовать itk. Итак, я интегрировал 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

Вопрос:

Может, кто-нибудь объяснит мне на самом базовом уровне, как я могу загрузить изображение .mha с помощью javascript и добавить его в dom, как я делаю это с .pngs и .jpgs? К сожалению, как новичок, я просто не понимаю пример кода на 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
...