javascript - Convert hexadecimal string to Blob and display PNG image with AngularJS - Stack Overflow

admin管理员组

文章数量:1429708

I got a web page (I/m using angularjs 1.4.8) and I'm trying to show an image which es from my GET url request.

Here is the page code (I got a grid and I/m displaying previews if they are applicable):

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

So, I got cassandra DB with this blob field and my Json looks like:

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

But I have no images in my web page (only icon of broken link to image): I researched

Angularjs showing image blob

Display blob image in html with angularjs

AngularJS - Show byte array content as image

but this won't help.I tried some varieties of this code: page:

<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));
        $pileProvider.aHrefSanitizationWhitelist(/^\s*(https?|file|ftp|blob):|data:image_preview\//);    
        return btoa(String.fromCharCode.apply(null, image_preview));
    }

RESOLVED Finally, that was not the issue about AngularJS or blob - that was a Java issue: byte[] previewSizeByte = baos.toByteArray(); and I stored this one as blob, so, now I got a text field and my Java code looks like (I decided to use BufferedImage for preview): String base64String = imgToBase64String(preview, fileFormat);

and

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);
    }
}

I really appreciate stackoverflow members for their ments and answers, they were extremely helpful

I got a web page (I/m using angularjs 1.4.8) and I'm trying to show an image which es from my GET url request.

Here is the page code (I got a grid and I/m displaying previews if they are applicable):

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

So, I got cassandra DB with this blob field and my Json looks like:

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

But I have no images in my web page (only icon of broken link to image): I researched

Angularjs showing image blob

Display blob image in html with angularjs

AngularJS - Show byte array content as image

but this won't help.I tried some varieties of this code: page:

<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));
        $pileProvider.aHrefSanitizationWhitelist(/^\s*(https?|file|ftp|blob):|data:image_preview\//);    
        return btoa(String.fromCharCode.apply(null, image_preview));
    }

RESOLVED Finally, that was not the issue about AngularJS or blob - that was a Java issue: byte[] previewSizeByte = baos.toByteArray(); and I stored this one as blob, so, now I got a text field and my Java code looks like (I decided to use BufferedImage for preview): String base64String = imgToBase64String(preview, fileFormat);

and

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);
    }
}

I really appreciate stackoverflow members for their ments and answers, they were extremely helpful

• javascript
• angularjs
• image
• blob

Share Improve this question Follow edited May 23, 2017 at 12:17 CommunityBot 111 silver badge asked Apr 2, 2017 at 23:12 Aleksey KiselevAleksey Kiselev 33111 gold badge77 silver badges2121 bronze badges 4

• how does the link to "broken image" actually look ? – c69 Commented Apr 2, 2017 at 23:15
• 1 @c69 , post updated with the screenshot. Just in case - I have no console error. – Aleksey Kiselev Commented Apr 2, 2017 at 23:40
• The "Update 1" data is not base64. Base64 has all the letters of the alphabet both upper and lowercase. It looks like hexadecimal and is missing the png signature of 89504e470d0a1a0a. – georgeawg Commented Apr 3, 2017 at 16:47
• @georgeawg , yes, thanks, now I'm using freeonlinetools24./base64-image to check the results – Aleksey Kiselev Commented Apr 3, 2017 at 21:20

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

It appears that the CassandraDB is sending the image data as a hexadecimal string. It would be more efficient to send it as a base64 string and it would be easier to use.

Here is a function to convert a hexadecimal string to an image/png Blob and display the image:

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./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>

本文标签： javascriptConvert hexadecimal string to Blob and display PNG image with AngularJSStack Overflow