Извлекать изображение из azure-blob и отправлять его клиенту без сохранения локально с помощью сервера узлов

ProgramBox

Извлекать изображение из azure-blob и отправлять его клиенту без сохранения локально с помощью сервера узлов

Post author:admin
Запись опубликована:27 февраля, 2023
Post category:Вопросы по программированию

#node.js #angular #azure-blob-storage #fastify

#node.js #angular #azure-blob-хранилище #быстрая настройка

Вопрос:

Я хочу извлечь изображение из хранилища Azure blob и отправить его клиенту, не сохраняя его локально. Я могу получить изображение из хранилища больших двоичных объектов и сохранить его в локальный файл, но изо всех сил пытаюсь отправить его клиенту без сохранения локально. Пожалуйста, найдите код ниже

     const containerClient = blobServiceClient.getContainerClient(containerName);
    const blockBlobClient = containerClient.getBlobClient(blobName);

    const downloadBlockBlobResponse = await blockBlobClient.download(0);
    console.log('nDownloaded blob content...');
    let f = await streamToString(downloadBlockBlobResponse.readableStreamBody)
    
    reply.type('image/jpg').send(f)

Функция streamToString выглядит следующим образом

      async function streamToString(readableStream) {
        return new Promise((resolve, reject) => {
        const chunks = [];
        readableStream.on("data", (data) => {
            chunks.push(data.toString());
        });
        readableStream.on("end", () => {
            resolve(chunks.join(""));
        });
        readableStream.on("error", reject);
     });
}

При запуске этого кода я получаю пустой экран в браузере

1. Вы могли бы попробовать reply.type('image/jpg').send(downloadBlockBlobResponse.readableStreamBody)

2. Не могли бы вы рассказать мне, как отобразить изображение во внешнем интерфейсе?

3. Если отображается только интерфейс, его можно преобразовать в формат base64, если вам нужно загрузить, используйте stream.

4. Как дела? Ваша проблема решена?

Ответ №1:

Если вы хотите извлечь изображение из хранилища больших двоичных объектов Azure и отправить его клиенту, не сохраняя его локально, я думаю, лучшим решением было бы, если бы сервер узлов отправлял токен SAS клиенту, а клиент напрямую получал это изображение из хранилища Azure. Это также облегчает нагрузку на сервер узлов: сгенерировать токен SAS и отправить его клиенту в порядке, нет необходимости считывать данные из хранилища.

Попробуйте использовать приведенный ниже код для создания токена SAS:

 var azure = require('azure-storage');
    var connString = "your storage connection string";
    var container ="your container name";
    var blobName = "your image name"
    var blobService = azure.createBlobService(connString);

    // Create a SAS token that expires in an hour
    // Set start time to five minutes ago to avoid clock skew.
    var startDate = new Date();
    startDate.setMinutes(startDate.getMinutes() - 5);
    var expiryDate = new Date(startDate);
    expiryDate.setMinutes(startDate.getMinutes()   60);
    


    var sharedAccessPolicy = {
        AccessPolicy: {
            Permissions: [azure.BlobUtilities.SharedAccessPermissions.READ],  //grent read permission only
            Start: startDate,
            Expiry: expiryDate
        }
    };
    
    var sasToken = blobService.generateSharedAccessSignature(container, blobName, sharedAccessPolicy);
    
    var response = {};

    response.image = blobService.getUrl(container,blobName,sasToken);
    
    res.send(response);

Результат:

Клиентская сторона может использовать этот URL-адрес изображения для доступа к этому изображению непосредственно из хранилища:

Попробуйте преобразовать ImageUrl в содержимое изображения base64, чтобы вы могли сохранять / показывать изображения непосредственно на основе их содержимого:

 <html>

<body>
    <img id="displayImg">
</body>


<script>

var nodeResult = {"image":"https://stantest1016.blob.core.windows.net/stantest/test.jpeg?st=2020-10-26T04:53:51Zamp;se=2020-10-26T05:53:51Zamp;sp=ramp;sv=2018-03-28amp;sr=bamp;sig=ZjY3LYbgvMn+Sr4dAEUoqidVRT4YyH1FcW1DeKlpjYo="}


function getImageData(nodeResult){


var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (this.readyState == 4 amp;amp; this.status == 200) {
        var reader = new FileReader();
        reader.readAsDataURL(this.response);
        reader.onload = function() {
            document.getElementById('displayImg').src = reader.result;
        }
  };
    
   
    
  };
  xhr.open('GET', nodeResult.image);
  xhr.responseType = 'blob';
  xhr.send();

}


getImageData(nodeResult);
</script>

</html>

Результат:

Подробности тега:

1. Мне понравился подход, которым вы поделились. Спасибо за это. Однако URL-адреса изображений упоминаются в редакторе расширенного текста и хранятся в базе данных в виде html. Здесь трудно следовать этому подходу. Что здесь можно сделать?

2. Привет @NirajGawande, если вы хотите получить содержимое изображения вместо URL-адреса изображения в вашем случае использования, вы можете просто загрузить это изображение по URL-адресу изображения сначала на стороне клиента и преобразовать это изображение в base64, а затем отобразить это изображение, я обновил свой ответ.

3. Спасибо @stanley, это помогло мне пройти