Вывод blob данных с переменной на экран в виде картинки

@Yura007 · Регистрация: 09.02.2019

Студворк — интернет-сервис помощи студентам

Здравствуйте !
Столкнулся с такой проблемой .

1. С сервера на клиент уходит массив json . В одной из ячеек записи у нас присутствует картинка(тип данных в БД blob).

Передаю данные через ajax
тип данных указан datatype:'JSON',

на сервере

PHP
1
2
$il = base64_encode($row['image']);
echo (json_encode($il));

на клиенте (в функции при получении данных)

JavaScript
1
2
  data = JSON.parse(data);
   var value = window.atob(data);

И вот теперь возникает вопрос .... как собственно вывести данные которые записаны в переменной value на экран. В данном примере массив состоит из одной ячейке на самом деле их будет намного больше пример просто упростил так как интересует именно эта часть проблемы.
Рассматривались варианты blob и URL.createObjectURL() . но у меня возникают возникают ошибки .

JavaScript
1
2
3
                    var binaryData = [];
                    binaryData.push(value);
                    var url = window.URL.createObjectURL(new Blob(binaryData, {type: "application/bin"}));

Ошибка возникает на выводе данных
jQuery('#image1').html ('<img src='url' name="myImage" width=100 height=100>');

ругается на url ....

во втором варианте ошибок не выдает но и ничего не выводит

JavaScript
1
2
3
                    var m=document.createElement("img");
                    m.setAttribute('src', url);
                    document.body.appendChild(m);

может я чего то не понимаю или не знаю синтаксиса записи url. Help.

@svtslv · 10.02.2019, 02:14

Yura007, C blob https://jsfiddle.net/tL72ybf3/

JavaScript
1
2
let img = document.querySelector('img');
fetch('/img/logo.png').then(res => res.blob()).then(blob => img.src = URL.createObjectURL(blob));

С base64

JavaScript
1
2
3
var image = new Image();
image.src = 'data:image/png;base64,iVBORw0K...';
document.body.appendChild(image);

@Yura007 · 10.02.2019, 22:31 **[ТС]**

Хотел еще уточнить допускается ли использование функции atob (на клиенте) для декодирования данных после base64_encode(используется на сервере в php).

Сообщение от svtslv

var image = new Image();
image.src = 'data:image/png;base64,iVBORw0K...';
document.body.appendChild(image);

В данном примере используется iVBORw0K... как вставить переменную с таким кодом, не могу найти правильную запись по синтаксису.

Сообщение от svtslv

fetch('/img/logo.png').then(res => res.blob()).then(blob => img.src = URL.createObjectURL(blob));

В данном примере '/img/logo.png' путь уже известен, если попытаться просто подставить переменную в которой картинка то как бы будет ошибка. Соответственно я так понимаю что нужно как то создать ссылку или объект на переменную, что бы ее можно было вставить вместо '/img/logo.png'.

@svtslv · 10.02.2019, 22:58

Yura007, Открываем консоль и смотрим вывод что есть что... https://jsfiddle.net/wr60pcxh/

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let img = document.querySelector('img');
 
//FETCH Это функция которая скачивает изображение
fetch('/img/logo.png').then(res => {
  console.log('ЭТО RES -> ', res)
  return res.blob()
}).then(blob => {
  console.log('ЭТО BLOB -> ', blob)
  
  let reader = new FileReader();
  reader.readAsDataURL(blob); 
  reader.onloadend = () =>  console.log('ЭТО BASE64 -> ',reader.result)
  
  img.src = URL.createObjectURL(blob)
});

@Yura007 · 10.02.2019, 23:32 **[ТС]**

Я понимаю , что это функция , так же понимаю, что данной функции нужно указать URL (для того что бы закачать картинку) которого у меня НЕТ но есть переменная в которой хранится изображение .... не ссылка на картинку ,а сама картинка.
Вот и возникает вопрос как имея переменную в которой записана картинка вывести на экран.

@svtslv · 10.02.2019, 23:51

Yura007, Ссылка в моем примере просто для того что бы взять данные. У меня же их нет. Вот пример того как это будет на странице. Покажи пример своих данных.
https://jsfiddle.net/svtslv/w5049akL/

HTML5
1
2
3
4
5
<div id="imgs">
  <img id="img1" src="" alt="">
  <img id="img2" src="" alt="">
</div>
<pre id="res" style="overflow-y: scroll;"></pre>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//FETCH Это функция которая скачивает изображение
fetch('/img/logo.png').then(res => {
  console.log('ЭТО RES -> ', res)
  return res.blob()
}).then(blob => {
  console.log('ЭТО BLOB -> ', blob) 
  img1.src = URL.createObjectURL(blob)
  
  let reader = new FileReader();
  reader.readAsDataURL(blob); 
  reader.onloadend = () =>  {
    console.log('ЭТО BASE64 -> ',reader.result )
    img2.src = reader.result
    res.innerText = imgs.innerHTML
  }
  
});

@Yura007 · 11.02.2019, 00:05 **[ТС]**

Хорошо.
Вот от сюда берем данные

PHP
1
2
3
4
5
6
7
8
9
10
11
12
// echo "connect ";
$result = $conn->query("SELECT * FROM `image1` WHERE `id` = '108'");
if($result->num_rows> 0 ){
  while ($row = $result->fetch_assoc())
      {
      if ($row['id'] == '108') {
       $il = base64_encode($row['image']);
                               }
      }
echo (json_encode($il));
}
?>

на клиенте их принимаем

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(document).ready (function(){
            $("#Asus").bind ("click", function(){
              jQuery.ajax(
                {
                  url:'5.php',
                  type:'POST',
                  datatype:'JSON',
                  beforeSend: funcbefore,
                 success: functionSuccess
               }
             );
 
           });
           }
 
             function functionSuccess (data) {
                    data = JSON.parse(data);
                    var value1 = atob(data);
 
                                                  }

Все данные по картинке находятся в переменной value1 ... и основная проблема в том, что я не знаю как мне их использовать .

@svtslv · 11.02.2019, 00:30

Если в data приходит base64 тогда тот вариант который я показывал в самом начале. Не нужно ничего декодировать просто передай строку. Сделай console.log(data) и покажи что приходит.

JavaScript
1
document.querySelector('img').src = data

Добавлено через 3 минуты

Сообщение от Yura007

$il = base64_encode($row['image']);

Вот это совсем странно или в бд уже лежит base 64 и тогда конвертировать не нужно или если там путь нужно сделать file_get_contents что бы получить изображение

PHP
1
file_get_contents($row['image'])

Добавлено через 1 минуту
Или если там просто юрл тогда зачем со всем этим заморачиваться просто ссылку передать и все вариант выше сработает

@Yura007 · 11.02.2019, 11:24 **[ТС]**

PHP
1
$il = base64_encode($row['image']);

данная строчка необходима, что бы затащить данные к клиенту через Json
иначе у меня будет ошибка при parse

JavaScript
1
data = JSON.parse(data);

В базе хранится именно картинка.

Теперь по данным console.log(data) (это именно те данные которые пришли с сервера в состоянии base64) содержит следующее:

Code
1
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

данные в data которые указаны выше являются именно картинкой, это я проверял .

Сообщение от svtslv

document.querySelector('img').src = data

к большому сожалению данная операция не возможна по причине ошибки
Invalid left-hand side in assignment идею конечно понимаю и хотелось бы увидеть как это можно сделать через селектор .

Огромное СПАСИБО за ваше терпение. все ваши примеры были изначально рабочие мне не хватало всего лишь одной строчки image.src = 'data:image/png;base64,'+data+' '; =)))

JavaScript
1
2
3
4
5
6
7
8
9
var image = new Image();
image.src = 'data:image/png;base64,'+data+'';
document.body.appendChild(image);
 
   
 
image.src = 'data:image/png;base64,'+data+'';
let img = document.querySelector('img');
fetch(image.src).then(res => res.blob(value1)).then(blob => img.src = window.URL.createObjectURL(blob));

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

@Yura007 61 / 44 / 16 Регистрация: 09.02.2019 Сообщений: 149
	10.02.2019, 23:32 [ТС]
	Я понимаю , что это функция , так же понимаю, что данной функции нужно указать URL (для того что бы закачать картинку) которого у меня НЕТ но есть переменная в которой хранится изображение .... не ссылка на картинку ,а сама картинка. Вот и возникает вопрос как имея переменную в которой записана картинка вывести на экран. 0