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

Question

I have Blob, which stored in db and i take it from database with java server like this:

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

Then I receive it with Javascript to image it:

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

However, if I call my "img" Blob in java code, i have an error in server, but if I call it byte[], my picture is not shown just.

Answer 1

I can't comment the java part since I know nothing about it, but for the javascript one, what you do is... not correct.

You don't seem to understand what is a data URL, nor what you are doing here.

So a data URL is a string, made of an header and of some file content ( data:|mime/type;|file-content ).
A data URL is an URL that points to itself, useful to embed data that should normally be served from network.
Quite often, the file content part is encoded as base64, because the URI scheme is limited in its set of allowed characters, and that binary data couldn't be represented in this scheme.

Now let's see what you are doing here...

You are downloading a resource as a Blob. That's good, Blob are perfect objects to deal with binary data.
Then, you read this Blob a data URL. Less good, but I can see the logic, <img> can indeed load images from data URLs.

But then from this data URL string, you create a new Blob! This is completely wrong. The Blob you just created with new Blob([dataUrl]) is a text file , not your image file in any way. So yes, the data is still hidden somewhere in the base64 data which is itself in the data URL, but what your poor <img> will see when accessing the data hooked by the Blob URI is really just text, data:image/png;base64,iVBORw0... and not at all PNG... like its parsing algo can read.

So the solution is quite easy: get rid of the FileReader step. You don't need it.

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

And if I may, all your thing could also just be

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