Question

我有一个网页（I / m使用angularjs 1.4.8），我正在尝试显示来自我的GET网址请求的图片。

这是页面代码（我有一个网格和I / m显示预览，如果它们适用）：

<div ng-show="message.message == null && message.is_image != null">
    <a href="#" ng-click="downloadFile(message.id_message)">
      <img data-ng-src="data:image/{{message.image_resolution}};base64,{{message.image_preview}}"/>
    </a>
</div>

所以，我得到了这个blob字段的cassandra DB，我的Json看起来像：

created_date:"2017-03-31 22:05:42.284Z"
id_message:"e6e2a5cb-ec25-472f-a59b-3f16a3a8afa9"
id_user_link:"47ed65bf-5520-4901-88c8-01980ffbcd4d"
id_user_sent:"3495c2de-c93c-4323-8e48-1fcecbfde625"
image_length:174443
image_name:"5.png"
image_preview:"0x89504e470d0a1a0a0000000d49484452000007800000039a080600000079a04f28000038714944415478daecd9496e55570045d13bfff124d442c654016320c4d4219832046308a132087199c26ba4f1fed65ad29ec0e99e71ec97635392244992244992244992b4f90d23489224499
...
... some other 90 lines of symbols
...
00000108401d8006c0096244906600000000008c2006c0036004b922403300000000004610036001b802549920118000000008230001b800dc09224c9000c000000004118800dc00660499264000600000080200cc0066003b024493200030000004010066003b001589224198001000000200803b001d8002c49920cc000000000108401d8006c0096244906600000000008c2006c0036004b92a4ff95fe0ffc7d46dd1b63a2b10000000049454e44ae426082"
image_resolution:"png"
is_image:1
message:null

但我的网页上没有图片（只有图片链接图标断开）：我研究了

Angularjs showing image blob

Display blob image in html with angularjs

AngularJS - Show byte array content as image

但这没有帮助。我试过这些代码的一些变种：页：

<img data-ng-src="data:image/{{message.image_resolution}};base64,{{b64encoded(message.image_preview)}}"/>

JS：

 $scope.b64encoded = function(image_preview){
        //btoa(String.fromCharCode.apply(null, response.data[0].ClassImage.data));
        $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|file|ftp|blob):|data:image_preview\//);    
        return btoa(String.fromCharCode.apply(null, image_preview));
    }

分辨最后，这不是关于AngularJS或blob的问题 - 这是一个Java问题： byte[] previewSizeByte = baos.toByteArray();我将这个存储为blob，所以，现在我有一个文本字段，我的Java代码看起来像（我决定使用BufferedImage进行预览）： String base64String = imgToBase64String(preview, fileFormat);

和

private String imgToBase64String(BufferedImage preview, String fileFormat) {
    final ByteArrayOutputStream os = new ByteArrayOutputStream();
    try {
        ImageIO.write(preview, fileFormat, Base64.getEncoder().wrap(os));
        return os.toString(StandardCharsets.ISO_8859_1.name());
    } catch (final IOException ioe) {
        throw new UncheckedIOException(ioe);
    }
}

我非常感谢stackoverflow成员的评论和答案，他们非常有帮助

Answer 1

看起来CassandraDB将图像数据作为十六进制字符串发送。将其作为base64 string发送会更有效，而且使用起来会更容易。

这是一个将十六进制字符串转换为image/png Blob并显示图像的函数：

angular.module("myApp",[]).controller("myVm", function($scope) {
  var vm = $scope;

  var testHex = 
    ["0x89504e470d0a1a0a0000000d494844520000003c00000028040300000050",
       "9584cc0000001b504c5445000000ffffff1f1f1f7f7f7f3f3f3f9f9f9f5f",
       "5f5fdfdfdfbfbfbf2cb790f6000000097048597300000ec400000ec40195",
       "2b0e1b000000b749444154388ded90cf0a83300cc63faaf5394a5defc56c",
       "ee2a0c760e2a3b0b6e3ec7c0175f5aff1e77da657ea40dcd2ff90a010efd",
       "9772a2f3f6ea4b830e121915b1a04e859999066a4b1801562dec544c3d36",
       "cc723506ac9791809538f564af54055c33f8861d76d0cacfd30efc9450c3",
       "b0e20189e28847aac5397458b7e2175d4cde4ed37252cff7d83ce367c849",
       "b56014ecf638fa28bf62cd49b7c3e9a384f86764269cbde5bf665b969230",
       "31adb25feffdd02ff50109f91bbd7897f34a0000000049454e44ae426082"]
    .join('');

  vm.hex = testHex;        
  vm.imgUrl = URL.createObjectURL(toPngBlob(testHex));
  
  function toPngBlob(str){
    var hexStr = str.slice(2);
    var buf = new ArrayBuffer(hexStr.length/2);
    var byteBuf = new Uint8Array(buf);
    for (let i=0; i<hexStr.length; i+=2) {
      byteBuf[i/2] = parseInt(hexStr.slice(i,i+2),16);
    }
    var blob = new Blob([byteBuf], {type: "image/png"});
    return blob;
  };
  
});

<script src="//unpkg.com/angular/angular.js"></script>

  <body ng-app="myApp" ng-controller="myVm">
    <h1>Convert hex string to PNG Blob</h1>
    {{hex}}<br>
    {{imgUrl}}<br>
    <img ng-src="{{imgUrl}}">
    
  </body>

将十六进制字符串转换为Blob并使用AngularJS显示PNG图像

1 个答案: