Блог

Мне нужно обработать данные и отобразить изображение в режиме реального времени.

Это шаги, которые я делаю до сих пор:

Обработайте данные и создайте изображение [Python]

1. Я создал свой файл python для обработки данных, создания изображения и сохранения его в буфере.

Отобразить изображение [Javascript]

2. Я получаю изображение, сохраненное в буфере, и отображаю его в своем приложении.

В реальном времени

3. Весь код находится внутри setInterval(function()), поэтому он обновляется каждые 1 секунду.
4. Для замены старого изображения я использую: document.getElementById("div").replaceChild(newImage, oldImage); * Это работает в первый раз, но затем больше не работает. Я знаю, что данные хорошо поступают из python, потому что я вижу, что они поступают из buffer ( console.log(dataImage) ) .

ОБНОВЛЕНИЕ: я сделал то, что прокомментировал @charlietfl, и теперь изображение появляется менее чем на секунду, а затем исчезает, и продолжайте делать это все время… Мой код [ОБНОВЛЕН]:

 function sendToPythonRd3() {

                            const exePath = appPath   '/assets/py/readData.py'
                            const { execFile } = require('child_process');

                            var cmap = document.getElementById('selectCmap')
                            var cmapValue = cmap.value;
                            var python = require('child_process').spawn('python', [exePath, rd3File,
                                         cmapValue]);
                            python.stdout.on('data', function(data) {
                                dataImage = data.toString('utf8').slice(2, -1)
                                console.log(dataImage)
                                var x = document.createElement("IMG");
                                x.setAttribute("src", 'data:image/png;base64,'   dataImage   '');
                                x.style.display = 'block';
                                x.style.margin = 'auto';
                                x.style.height = '315px';
                                x.style.width = 'auto';
                                var imagenGpr = document.getElementById('imageGrp')
                                imagenGpr.src = 'data:image/png;base64,'   dataImage   '';
}
 

Подводя итог:

Работает document.getElementById("grpDataIn").replaceChild(x, imagenGpr); не так, как мне нужно, он заменяет изображение только в первый раз, даже если весь этот код находится внутри setInterval, поэтому он должен заменять изображение каждые 1 секунду.

ОБНОВЛЕНИЕ 2:

После отображения данных image.src на моей консоли я понял, что в первый раз данные src являются полными (со всеми данными изображения буфера внутри), но во второй раз являются неполными:

Первый раз:

• console.log(imagenGpr.src):
• Данные в консоли: data:image /png; base64,iVBORw0KGgoAAAANSUh …. и продолжайте со всей информацией о буфере…

Второй раз:

• console.log(imagenGpr.src):
• Данные в консоли: данные: изображение / png; base64

-И больше никаких данных, кажется, что данные буфера не входят в данные src, но это странно, потому что код тот же, что и при первом запуске ….!

Я старею и схожу с ума…