Difference in Base64 encoding

Question

I am trying to encode, Image to Base 64 string in AngularJS2

   handleFileSelect(evt) {
        var files = evt.target.files;
        var file = files[0];
        if (files && file) {
            var reader = new FileReader();
            reader.onload = this._handleReaderLoaded.bind(this);
            reader.readAsBinaryString(file);
       }
    }
_handleReaderLoaded(readerEvt) {
       var binaryString = readerEvt.target.result;
       this.model.UserProfileImageBase64 = btoa(binaryString);
      console.log(this.model.UserProfileImage);     
      }

I am receiving a different string,in compare to encoding it from Java

Base64.encodeToString(getBytesFromBitmap(bitmap),Base64.NO_WRAP);

Any Idea how can we match both Base64 encoding? I had tried same with base64 encoding in angular as well

    this.model.UserProfileImageBase64 = Base64.encode(binaryString);

But no dfiference in result.

BtoA and Base64 producing same result and, if I am verifying it online I am getting image as well but I need it in the same format which is generated by Java

What's the difference exactly? Please try to compare the results and provide some information where differences are (beginning, middle, end) how many. — Günter Zöchbauer, Sep 19 '17 at 06:57
Length of Both strings are different starting chracter of Java string (I can't post whole string)/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/ and this is Angular JS/9j/4AAQSkZJRgABAgEAYABgAAD/4QwtRXhpZgAATU0AKgAAAAgABwEyAAIAAAAUAAAAY — Bharat Joshi, Sep 19 '17 at 07:03
How much length difference? If you use a diff on the strings you should get information about how much differences are there or if they are in the middle, start, end. Posting the string isn't useful anyway. — Günter Zöchbauer, Sep 19 '17 at 07:08
First 27 character is same /9j/4AAQSkZJRgABAQAAAQABAAD/ then angular start from /4Qw and java /2w, length of java converted string is 23261 while angular is 1034274 — Bharat Joshi, Sep 19 '17 at 07:12

kimy82 · Answer 1 · 2017-09-19T07:35:50.953

0

I am getting the same result with java and javascript.

With java I did:

byte[] imageBytes = IOUtils.toByteArray(new URL("https://www.w3schools.com/css/paris.jpg"));
String base64 = Base64.getEncoder().encodeToString(imageBytes);
System.out.println(base64);

With javascript I did:

const fileReader: FileReader = new FileReader();
 fileReader.readAsDataURL(file);
 fileReader.onloadend = () => {
      retVal.next(fileReader.result);
 };

NOTE: I would suggest not to use readBynaryAsString as it is deprecated and might not work. FileReader

NOTE: That in javascript I wait till the file is uploaded to get the data and I passed to an observable next(...)

edited Sep 19 '17 at 07:35

answered Sep 19 '17 at 07:30

kimy82

4,069
1
22
25

Can you please upload javascript code on plumcker it's going to be big help – Bharat Joshi Sep 19 '17 at 07:44
Have a look at https://plnkr.co/edit/hqc891wPzeEgjZG49zJ1?p=preview Let's say that this code needs to be refactorized :-) It is just a draft – kimy82 Sep 19 '17 at 08:05
the same string I am also getting but in case of IOS/Android(java) – Bharat Joshi Sep 19 '17 at 09:00

score 0 · Answer 2 · answered Sep 25 '17 at 09:21

changeListener($event) : void {
  this.readThis($event.target);
}

readThis(inputValue: any): void {
  var file:File = inputValue.files[0];
  var myReader:FileReader = new FileReader();

  myReader.onloadend = (e) => {
    this.image = myReader.result;
  }
  myReader.readAsDataURL(file);
}

component.html

<input type="file" accept="image/*" (change)="changeListener($event)">

Follow this link Angular 2 encode image to base64

Difference in Base64 encoding

2 Answers2