Изображение BLOB-объекта из базы данных на Java и с Java на изображение Javascript

Question

У меня есть Blob, который хранится в БД, и я беру его из базы данных с Java-сервером, как это:

Entity.java

@Column(name = "img")
private Blob img;

public Blob getImg() {
    return img;
}
public void setImg(Blob img) {
    this.img = img;
}

Repository.java

@Transactional
@Query(value = "SELECT img FROM articles WHERE category = ?", nativeQuery = true)
//Blob findP(String category);

Blob findPic(String category);

Controller.java

@RequestMapping(value="/Pic_test")
@ResponseBody
public Blob getPics() throws SQLException, IOException {

    return remindRepository.findPic("Java");
}

Затем я получаю его с Javascript, чтобы изобразить его:

    function toDataURL(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var reader = new FileReader();
    reader.onloadend = function() {
      callback(reader.result);
    }
    reader.readAsDataURL(xhr.response);
  };
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.send();
}

toDataURL('http://localhost:8080/articles/Pic_test', function(dataUrl) {
    var display = document.getElementById('display');
  var url = window.URL.createObjectURL(new Blob([dataUrl]));
var img = new Image();
img.src = url;
document.getElementById("demo").innerHTML = img.src;
})

Однако, если я вызываю мой «img» BLOB в Java-коде, у меня возникает ошибка на сервере, но если я называю его byte [], моя картинка не отображается просто.

Answer 1

Я не могу комментировать java-часть, так как ничего не знаю об этом, но для javascript вы делаете ... не правильно.

Кажется, вы не понимаете, что такоеURL-адрес данных, а также то, что вы здесь делаете.

Таким образом, URL-адрес данных - это строка, состоящая из заголовка и некоторого содержимого файла (data:|mime/type;|file-content).
URL-адрес данных - это URL, который указываетСам по себе полезно вставлять данные, которые обычно должны обслуживаться из сети.
Довольно часто часть содержимое файла кодируется как base64, поскольку схема URI ограничена в своем наборе разрешенных символов, иэти двоичные данные не могут быть представлены в этой схеме.

Теперь посмотрим, что вы здесь делаете ...

Вы загружаете ресурс как Blob.Это хорошо, Blob - идеальные объекты для работы с двоичными данными.
Затем вы читаете этот Blob URL-адрес данных.Менее хорошо, но я вижу логику: <img> действительно может загружать изображения из URL-адресов данных.

Но затем из этой строки URL-адреса данных вы создаете новый Blob!Это совершенно неправильно.BLOB-объект, который вы только что создали с помощью new Blob([dataUrl]), представляет собой текстовый файл , а не файл изображения в любом случае.Так что да, данные все еще скрыты где-то в данных base64, которые сами находятся в URL-адресе данных, но то, что увидит ваш бедный <img> при доступе к данным, перехваченным URI Blob, на самом деле просто текст, data:image/png;base64,iVBORw0..., а не ввсе �PNG..., как его анализатор может читать.

Так что решение довольно простое: избавьтесь от шага FileReader.Вам это не нужно.

var xhr = new XMLHttpRequest();
xhr.open('get', 'https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png');
xhr.responseType = 'blob';
xhr.onload = display;
xhr.send();

function display(evt) {
  // we did set xhr.responseType = "blob"
  var blob = evt.target.response;  // so this is a Blob
  // hence, no need for anything else than
  var url = URL.createObjectURL(blob);
  var img = new Image();
  img.src = url;
  document.body.appendChild(img);
}

И если позволите, все ваши вещи также могут быть просто

document.getElementById('display').src = 'http://localhost:8080/articles/Pic_test';