如何在Javascript中从Azure Blob存储下载数据后将base64编码数据嵌入到映像中？

I'm trying to embed an image using the base64 data pattern, instead of a URL reference. I first download the data from Azure Blob storage, using the Azure Node.js SDK:

我正在尝试使用base64数据模式嵌入图像,而不是URL引用。我首先使用Azure Node.js SDK从Azure Blob存储中下载数据:

https://azure.microsoft.com/en-us/documentation/articles/storage-nodejs-how-to-use-blob-storage/#download-blobs

From what I can tell the data downloads as a string. But I'm not sure what to do with the string to get it into base64.

从我可以告诉数据下载为字符串。但我不知道如何处理字符串以使其进入base64。

I need to encode the data as base64 and set the image source attribute. How do I do that?

我需要将数据编码为base64并设置图像源属性。我怎么做?

Here is a snippet that shows what happens when I try to just embed the downloaded data directly:

这是一个片段,显示当我尝试直接嵌入下载的数据时会发生什么:

        cameraContainer.listBlobsSegmentedWithPrefix($routeParams.cameraId, path, null, options, function(error, result, response) {
        result.entries.forEach(function(entry) {
            $http.get(containerUrl + "/" + $routeParams.cameraId + "/" + entry.name + containerToken)
                .then(function(successResponse) {
                    $scope.camera.imageUrl = "data:image/jpeg;base64," + successResponse.data;
                }, function(errorResponse) {

                });
        });
    });

I end up getting this error in the browser:

我最终在浏览器中收到此错误:

Also, if I try executing the following JS:

另外,如果我尝试执行以下JS:

console.log(decodeURIComponent(successResponse.data));

I get this error:

我收到此错误:

Here is the raw data when logging to console

这是登录到控制台时的原始数据

1 个解决方案

#1

This is how I did it in our product. Please give it a try.

这就是我在产品中的做法。请试一试。

Essentially the data you're getting back is Uint8Array. First thing you would need to do is convert that array into string. You can use the following code to do so:

基本上你得到的数据是Uint8Array。您需要做的第一件事是将该数组转换为字符串。您可以使用以下代码执行此操作:

function Uint8ToString(array) {
    var chunkSize = 0x8000;
    var c = [];
    for (var i = 0; i < array.length; i += chunkSize) {
        c.push(String.fromCharCode.apply(null, array.subarray(i, i + chunkSize)));
    }
    return c.join('');
}

Next, you need to convert this string in base64 format. Here's how I'm doing it currently:

接下来,您需要以base64格式转换此字符串。这是我目前正在做的事情:

var blobContentsAsString = Uint8ToString(blobContents); 
var blobContentsAsBase64String = btoa(blobContentsAsString);
$scope.camera.imageUrl = "data:image/jpeg;base64," + blobContentsAsBase64String;

Do give it a try.

试一试。

#1