【问题标题】:Successfully Saving base64 Image to Azure Blob storage but blob image always broken/small white box成功将 base64 图像保存到 Azure Blob 存储,但 Blob 图像总是损坏/小白框
【发布时间】:2017-01-27 17:11:26
【问题描述】:

我有一个转换为 base64 的图像我正在尝试使用 createBlockBlobFromText 上传到我的天蓝色 blob 存储。

self.blobServer.createBlockBlobFromText(containerName, fileName, baseStrChars, { contentSettings: { contentType: 'image/jpeg' } }, function(error, result, response) {
     if (error) {
         console.log(error);
     }
     console.log("result", result);
     console.log("response", response);
});

我的新 jpeg 图像出现在 blob 存储容器中,但是当我转到 blob 图像 URL 时,我总是得到 this

我的容器的访问策略设置为容器,我将我的 base64 字符串粘贴到 base64 到图像转换器并出现正确的图像。问题似乎是我创建 blob 的方式而不是 base64 字符串。

我很困惑为什么整个流程似乎都在工作,但是当我转到 URL 时图像仍然损坏。有什么想法吗?

【问题讨论】:

  • 您查看过 blob 中存储的内容吗? curl -s http://blob.url/image.jpg,是 JFIF 还是乱码?这就是我的意思:i.imgur.com/lkAtjkS.png
  • 这里还有一件事,浏览器将 Azure blob 缓存到死!确保您在新的隐身会话中进行测试。
  • 这行不通。当文件以二进制格式保存时,浏览器会显示图像。为了显示 base64 图像,您需要使用 CSS (Data-Uri)。请尝试将图像保存为二进制文件,而不是将内容转换为 bas64 字符串。 HTH。

标签: node.js azure blob azure-web-app-service azure-blob-storage


【解决方案1】:

在浏览器中通过 URL 直接访问图像需要二进制内容。您可以在 node.js 后端将 base64 编码字符串转换为二进制缓冲区,并将缓冲区字符串上传到 Azure 存储。

请尝试以下代码sn-p:

var rawdata = 'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
var matches = rawdata.match(/^data:([A-Za-z-+\/]+);base64,(.+)$/);
var type = matches[1];
var buffer = new Buffer(matches[2], 'base64');

blobsrv.createBlockBlobFromText('mycontainer','profile-pic-123.jpg', buffer, {contentType:type}, function(error, result, response) {
        if (error) {
            console.log(error);
        }else{
         console.log(result)
        }
    });

【讨论】:

  • 啊今天早上我在玩缓冲区,做得很好,效果很好!!我真的不能感谢你!看来我要完成这个 sprint 的所有故事了,哈哈 :)
猜你喜欢
  • 1970-01-01
  • 2017-07-11
  • 1970-01-01
  • 2016-01-21
  • 2018-12-17
  • 1970-01-01
  • 2016-08-22
  • 1970-01-01
  • 2020-01-09
相关资源
最近更新 更多