0

Look at my code

<img src='data:image/png;base64,{{imgSrc}}'>

In my controller

$scope.imgSrc = $scope.deviceDetail.imgSrc;

I am getting this type of response from my backend in imgSrc which is stored in mongodb.

"�PNG\r\n\u001a\n\u0000\u0000\u0000\rIHDR\u0000\u0000\u0003 \u0000\u0000\u0002R\b\u0002\u0000\u0000\u0000��6A\u0000\u0000\u0000\u0006bKGD\u0000�\u0000�\u0000�����\u0000\u0000 \u0000IDATx���{xT���W x\u0000\u0006%$F�c F\t�\"�V��\u0000�P\u000f\b���xEъ��T�z@� \u0018�諀`�TJ�Z\u0015\t�\"R��@\u000b|H�h8\u0005\......"

Now I want png image from this data,I have tried this data into base64 but still not getting image. Please suggest me what is wrong here?

Twinkle Mevada
  • 11
  • 5
  • How are you saving this image in the DB. Store the image as base64 encoded string instead of binary. – Thangadurai Apr 24 '17 at 04:58
  • Check this post, it might help you. http://stackoverflow.com/questions/4796914/store-images-in-a-mongo-database – CrazyMac Apr 24 '17 at 05:04
  • @Thangadurai I am getting this image data from ubersmithAPI server and strored in mongodb , I have tried this data into base64 but it returns this error Error: Path must be a string without null bytes. – Twinkle Mevada Apr 24 '17 at 05:27
  • The `�` character is the Unicode Replacement character (FFFD) that is inserted by UTF-8 decoders when the data is not legal UTF-8. The image data has been ruined because it has been run thru a UTF-8 decoder. We need to see the code used to get that data to see what went wrong. – georgeawg Apr 24 '17 at 07:08

1 Answers1

0

You can convert image to data base64 bit.

Base64 is a group of similar binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation.

To convert a file to base64 (image or any other kind of file) with cordova, ionic or phonegap we will need only the cordova file plugin and 1 human eye. Then we will use the FileReader to read the the content of a file with the method readAsDataURL.

/**
 * This function will handle the conversion from a file to base64 format
 *
 * @path string
 * @callback function receives as first parameter the content of the image
 */
function getFileContentAsBase64(path,callback){
    window.resolveLocalFileSystemURL(path, gotFile, fail);

    function fail(e) {
          alert('Cannot found requested file');
    }

    function gotFile(fileEntry) {
           fileEntry.file(function(file) {
              var reader = new FileReader();
              reader.onloadend = function(e) {
                   var content = this.result;
                   callback(content);
              };
              // The most important point, use the readAsDatURL Method from the file plugin
              reader.readAsDataURL(file);
           });
    }}

Then we will use it to convert a local image to base64 : var path = "file://storage/0/downloads/myimage.png";

// Convert image
getFileContentAsBase64(path,function(base64Image){
  //window.open(base64Image);
  console.log(base64Image); 
  // Then you'll be able to handle the myimage.png file as base64
});

Remember that you need the file plugin from cordova, read and learn how to use it here. You can download the file plugin into your project executing in your cordova CLI :

cordova plugin add cordova-plugin-file

continue here

https://gist.github.com/HereChen/e173c64090bea2e2fa51

http://tutsheap.com/web/javascript/get-base64-image-url/

Danyal
  • 360
  • 1
  • 12