Alex Alex - 6 months ago 19
SQL Question

Use blob as src image

I'm storing images as blob in my MySQL BDD.

I call my node API that return me my BDD lines with JQuery Ajax :

$.ajax({
url: "http://mydinners.fr:5280/partner",
type: "GET",
datatype: "json",
contentType: "application/json; charset=utf-8",
success: function(text){
for(var i=0; i<text["message"].length; i++){
var objurl = window.URL.createObjectURL(new Blob(text["message"][i]["partner_image"]));

// text["message"][i]["image"] is an array of point like : [192,257,54,269,85,458,...]

var module = "";
module += "<img class='activator' src='"+objurl+"'>";

$(".container .row").append(module);
}
}
});


The objurl value is something like this : "blob:http%3A//dev.mydinners.fr/e73c5c6f-562e-4b66-9d4e-7a4c8567532e"

But the image is like this : http://i.stack.imgur.com/Vhma7.png

Do you know how to translate my blob image from mysql to img ?
thx.

Answer

You have to convert the array to a binary data (using Uint8Array) before creating the blob

var binary = new Uint8Array(json.message[0].partner_image)

This is somewhat irrelevant, but it's a working example when you use Uint8Array, I just choose my own way of fetching/printing the data

fetch("http://mydinners.fr:5280/partner")
.then(res => res.json())
.then(json => {
  let binary = new Uint8Array(json.message[0].partner_image)
  let blob = new Blob([binary])
  let img = new Image()
  img.src = URL.createObjectURL(blob)
  document.body.appendChild(img)
})

Comments