РЕШЕНО Приём картинки "image/png" в js - нужна подсказка!!!

Доброго времени суток! Собственно имею (подсказали ранее - переделано)

Код (Javascript):

function furload() {

    var xmlhttp = new XMLHttpRequest();
    //
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 ) {
            if(xmlhttp.status == 200){
            //
                if(cmdparse != 3) {
                    dbdat = xmlhttp.responseText;
                    document.getElementById("test").innerHTML = dbdat;
                    dbs = eval('(' + dbdat + ')');
                    FURparse();
                }
                else {
                    //dbdat = xmlhttp.responseType = "image/png";
                    //document.getElementById("imgfur").src = dbdat.src;
                }
             }
         }
     }
    xmlhttp.open("GET", "fur.php" + sendstr + "&dtime=" + new Date().getTime, true);
    //
    xmlhttp.send();
    if(fnew > 0)
        setTimeout(furload, 10000);       // Вызвать снова через 10 сек
}
 

тут не ясно, что надо вместо комментария.
Получал данные в тексте. Но вот стало необходимо получать изображение (график), которе формируется php скриптом на сервере. С одним GET запросом PHP скрипт формирует ответ JSON, в другом формирует график, обратившись к MySQL. Вот результат работы если обратиться из адресной строки браузера:

 

В HTML готовишь сразу тег под картинку

HTML:

<img src="" id="testImage">

А потом в JS должно быть вот так:

Код (Javascript):

// ссылка на img со страницы
var testImage = document.getElementById('testImage');

// очистка старой картинки, чтобы не было утечек
testImage.onload = function(e) {
  window.URL.revokeObjectURL(testImage.src);
};

function furload() {
  // подготовка запроса к серверу
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://picsum.photos/200/300', true);
  xhr.responseType = 'blob';

  // обработка ответа от сервера, запихивание ответа в картинку
  xhr.onload = function(e) {
    if (this.status == 200) {
      var blob = this.response;
      testImage.src = window.URL.createObjectURL(blob);
    }
  };

  // отправка запроса к серверу
  xhr.send();

  setTimeout(furload, 2000);
}

furload();

В принципе можно и тег заранее не готовить, а создавать картинку динамически из скрипта, но смысла не вижу.

Рабочий пример этого кода можно тут посмотреть

 

Спасибо за ответ! Пилю... но пока без результата.

PHP:

header('Content-type: image/png' );
            ImagePng( $img );

Код (Javascript):

function furload() {

    var xmlhttp = new XMLHttpRequest();
    if(cmdparse == 3) {
        var testImage = document.getElementById('imgfur');
        // очистка старой картинки, чтобы не было утечек
        testImage.onload = function(e) {
          window.URL.revokeObjectURL(testImage.src);
        };
        xmlhttp.responseType = 'blob';
    }
    //
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 ) {
            if(xmlhttp.status == 200){
            //
                if(cmdparse != 3) {
                    dbdat = xmlhttp.responseText;
                    //document.getElementById("test").innerHTML = dbdat;
                    dbs = eval('(' + dbdat + ')');
                    FURparse();
                }
                else {
                    var blob = this.response;
                    testImage.src = window.URL.createObjectURL(blob);
                }
             }
         }
     }
    xmlhttp.open("GET", "fur.php" + sendstr + "&dtime=" + new Date().getTime, true);
    //
    xmlhttp.send();
    if(fnew > 0)
        setTimeout(furload, 10000);       // Вызвать снова через 10 сек
}

строка запроса в JS:

Код (Javascript):

cmdparse = 3;
    sendstr = "?par=active_proc_sel&val=04.08.2020_11:21:05";

Пока что никак.

 

Спасибо огромное разобрался! Я сам накосячил.

Код (Javascript):

testImage.onload = function(e) {
          window.URL.revokeObjectURL(testImage.src);
        };

function furload() {

    var xmlhttp = new XMLHttpRequest();
    if(cmdparse == 3) {
        xmlhttp.responseType = 'blob';
    }
    //
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 ) {
            if(xmlhttp.status == 200){
            //
                if(cmdparse != 3) {
                    dbdat = xmlhttp.responseText;
                    document.getElementById("test").innerHTML = dbdat;
                    dbs = eval('(' + dbdat + ')');
                    FURparse();
                }
                else {
                    var blob = this.response;
                    testImage.src = window.URL.createObjectURL(blob);
                }
             }
         }
     }
    xmlhttp.open("GET", "fur.php" + sendstr + "&dtime=" + new Date().getTime, true);
    //
    xmlhttp.send();
    if(fnew > 0)
        setTimeout(furload, 10000);       // Вызвать снова через 10 сек
}
 

 

И вот по OPC UA контроллер(IA240LX Linux) читает данные(из SIEMENS), которые переносятся в сервер "Прорамма на С + Apache + Bash script + MySQL + PHP"(PC Debian). Потом из браузера доступ к нему(WEB-Apache - без разницы с какого устройства) и вот:


@DEgorov спасибо за подсказку! Благодаря MySQL теперь данные как из архива, так и текущего процесса (в реальном времени) можно видеть. Вся "отрисовка" методом в PHP на самом сервере, а обновление данных методом запроса (по интервалу 10 сек.) из JS на WEB-странице со стороны браузера.