Base64编码的差异

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

Answer 1

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(...)

Answer 2

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