从数据库到 Java 和从 Java 到 Javascript 图像的 Blob 图像答案

【问题标题】：Blob image from database to Java and from Java to Javascript Image从数据库到 Java 和从 Java 到 Javascript 图像的 Blob 图像
【发布时间】：2018-11-16 17:20:41
【问题描述】：

我有 Blob，它存储在 db 中，我使用 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;
})

但是，如果我在 java 代码中调用我的“img”Blob，我在服务器中会出现错误，但如果我将其命名为 byte[]，我的图片就不会显示出来。

【问题讨论】：

在使用 byte[] 时检查服务器响应的内容类型，是浏览器理解的内容

标签： javascript java blob

【解决方案1】：

我无法评论 java 部分，因为我对此一无所知，但对于 javascript 部分，你所做的是......不正确。

你似乎不明白什么是数据 URL，也不明白你在这里做什么。

因此，数据 URL 是一个字符串，由标题和一些文件内容 (data:|mime/type;|file-content) 组成。
数据 URL 是指向自身的 URL，对于嵌入通常应从网络提供的数据很有用。
很多时候，文件内容部分被编码为 base64，因为 URI 方案在其允许的字符集方面受到限制，并且二进制数据无法在此方案中表示。

现在让我们看看你在这里做什么......

您正在以 Blob 的形式下载资源。很好，Blob 是处理二进制数据的完美对象。
然后，您读取此 Blob 的数据 URL。不太好，但我可以看到逻辑，<img> 确实可以从数据 URL 加载图像。

但是从这个数据 URL 字符串中，您创建了一个新的 Blob！这是完全错误的。您刚刚使用new Blob([dataUrl]) 创建的 Blob 是一个文本文件，无论如何都不是您的图像文件。所以是的，数据仍然隐藏在base64数据中的某个地方，它本身就在数据URL中，但是当你访问被Blob URI挂钩的数据时，你可怜的<img>会看到实际上只是文本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';

【讨论】：