Question

我有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 []，则我的图片不会显示。

Answer 1

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

您似乎不了解什么是数据网址，也不知道您在这里做了什么。

因此，数据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>会看到的只是文本，{{1}而且根本没有data:image/png;base64,iVBORw0...，就像它的解析算法可以阅读一样。

因此解决方案非常简单：摆脱FileReader步骤。你不需要它。

＆＃13;

�PNG...

＆＃13;

如果可以，你所有的东西也可以只是

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);
}

从数据库到Java以及从Java到Javascript映像的Blob映像

1 个答案: