Using JavaScript to Display a Blob

Using JavaScript to display a Blob

The problem was that I had hexadecimal data that needed to be converted to binary before being base64encoded.

in PHP:

base64_encode(pack("H*", $subvalue))

How I display as image a blob object with JS

You can use URL.createObjectURL to generate a blob URL and set it as the image source.

const blobUrl = URL.createObjectURL(blob) // blob is the Blob object
image.src = blobUrl // image is the image element from the DOM

How to fetch and display blob images

Try this code for your image.

Example App:

I've updated a React example on StackBlitz

React <Item /> component that will work:

function Item({ item }) {
  const imgurl = item.productimg;
  const imageRef = React.useRef();
  React.useEffect(() => {
    fetch(imgurl)
      .then(res => res.blob()) // Gets the response and returns it as a blob
      .then(blob => {
        let objectURL = URL.createObjectURL(blob);
        console.log(imageRef.current);
        imageRef.current.src = objectURL;
      });
  }, []);

  return (
    <div className="item" id={item.id}>
      <Row>
        <Col>
          <Image ref={imageRef} id="myImg" width="50" height="58" rounded />
        </Col>
        <Col xs={6}>
          <div className="item-info">
            <p>{item.name}</p>
          </div>
        </Col>
        <Col>3 of 3</Col>
      </Row>

      <div className="item-actions">
        <button className="btn-remove">X</button>
      </div>
    </div>
  );
}

Javascript:

const imgurl = "https://cdn62.picsart.com/182788826000202.jpg?type=webp&to=crop&r=256"
fetch(imgurl)
  .then(response => response.blob())
  .then(myBlob => {
  var urlCreator = window.URL || window.webkitURL;
   var imageUrl = urlCreator.createObjectURL(myBlob);
   const myImgElem = document.getElementById('my-img');
   myImgElem.src = imageUrl
})

<img id="my-img" />

Display Blob data retrieved from MySQL Database using JavaScript

Assuming the blob has base64 encoded PNG data, you can use data-uri to set data directly to image e.g.

var imgdata = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="

$('#myimg').attr('src', "data:image/png;base64,"+imgdata)

Assumption here is that data returned from server is base64 encoded, but if that is not the case you can see various options but ultimately you may have to do proper conversion in server side, in that case why not just return the url to image and create a API on server side to return images from blob

Here is a jsfiddle in action http://jsfiddle.net/anuraguniyal/4DEtH/5/

Edit:
I am not sure what language you use server side but process will be same for each language e.g.

>>> s='\x89PNG\r\n\x1a\n\x00\x00\x00\rIHDR\x00\x00\x00\x05\x00\x00\x00\x05\x08\x06\x00\x00\x00\x8do&\xe5\x00\x00\x00\x1cIDAT\x08\xd7c\xf8\xff\xff?\xc3\x7f\x06 \x05\xc3 \x12\x84\xd01\xf1\x82X\xcd\x04\x00\x0e\xf55\xcb\xd1\x8e\x0e\x1f\x00\x00\x00\x00IEND\xaeB`\x82'
>>> import base64
>>> base64.b64encode(s)
'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='

i.e. take all data, as will be stored in file (not the png marker too), not just raw image data and encode it

retrieving pictures stored as blob in the database and display it in the html

I wouldn't be surprised if the problem is that the way the JSP renders item.logo on the page is messing it up. Since you have no use for the byte array in JavaScript, you can convert it in Java before printing it on the page. Also, this relieves the need for window.btoa, which isn't natively supported in IE before version 10.

Try creating a method in your class that returns the base64 encoded value of the logo property, called something like getLogo64...then in your JSP, you can reference it like: base64 = "#{item.logo64}"; and not even deal with the logo property. So an example is:

public String getLogo64() {
    return Base64.encodeBase64String(this.logo);
}

At the same time, you can add a basic method that accepts a byte[] and converts it (which is what you have found to work):

public String RenderLogo(byte[] rawLogo) {
    String base64String = Base64.encodeBase64String(rawLogo);
    return base64String;
}

and use it like #{testController.RenderLogo(item.logo)}.

Reference:

• encodeBase64String: http://commons.apache.org/proper/commons-codec/apidocs/org/apache/commons/codec/binary/Base64.html#encodeBase64String(byte%5B%5D)

How to display an image saved as blob in React

You should try URL.createObjectURL(blob)

https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

myImage.src = URL.createObjectURL(blob);

---

Related Topics