从Java的Azure Blob存储下载数据后，如何在图像中嵌入base64编码的数据？

Question

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:

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.

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

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:

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

I get this error:

Here is the raw data when logging to console

Answer 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:

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:

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

Do give it a try.