如何从 azure blob 存储中获取图像作为文件？

Question

i have sasUrl of an image and blobName, i need to get the image as a file from the blob storage.

const sasurl = "https://nuocrstracc.blob.core.windows.net/templatesxxxxxxxx/ScannedTemplates/62ac240a-f44e-42d8-b09d-dc7a9e14ed91/Acord%20applications-pages-1-4_4.jpeg?st=2020-12-17T07%3A59%3A33Z&se=2020-12-17T11%3A19%3A33Z&sp=r&sv=2018-03-28&sr=b&sig=78gAtnKM%2BjjcJQFzkoIpzjWVU0GXIhvyPafuwqBjZP8%3D "

const blobName = "templates/62ac240a-f44e-42d8-b09d-dc7a9e14ed91/Test8Dec2020_21h5m"

based on these two parameters, is there any way to get the image as file like shown below?

File
lastModified: 1591167281662
lastModifiedDate: Wed Jun 03 2020 12:24:41 GMT+0530 (India Standard Time) {}
name: "ssa.jpg"
size: 954534
type: "image/jpeg"
webkitRelativePath: ""

i have tried

fetch(sasurl).then(function(response) {
      return response.blob();
    }).then(function(myBlob) {
     console.log("myBlob",myBlob)
    });

but its returns empty.

Answer 1

Try with

let image = 'data:image/jpeg;base64,' + myBlob;

and use this image as src in your image tag.

Or to receive as Blob what I have tried and working for pdf is to use axios and forcing responseType as blob in request. Like this -

axios(url, {
    method: 'GET',
    headers:{
      'Accept': "*/*",
      ... <any other header needed>
    },
    responseType: 'blob' //Force to receive data in a Blob Format
  })
  .then(response => {
  //Create a Blob from the Stream
      const file = new Blob(
        [response.data], 
        {type: 'application/jpeg'});
  //Build a URL from the file
      const fileURL = URL.createObjectURL(file);
  //Open the URL on new Window
      window.open(fileURL);  // This should download the image directly.
  })
  .catch(error => {
      console.log(error);
  });