Konwersja obrazu na format base64 w kątowym 2

Question

Konwersja obrazu na format base64 w kanale 2 powoduje przesłanie obrazu z lokalnego. Obecnie używam fileLoadedEvent.target.result. Problem polega na tym, że kiedy wysyłam ten ciąg base64 za pośrednictwem usług REST do java, nie jest on w stanie go rozszyfrować. Kiedy próbuję tego łańcucha base64 z bezpłatnym dekoderem-dekoderem online, tam też nie widzę zdekodowanego obrazu. Próbowałem też używać płótna. Nie otrzymuję prawidłowego wyniku. Jedno jest pewne, że ciąg podstawowy 64, który otrzymuję, nie jest właściwy, czy muszę do tego dodać jakiś pakiet? Lub w kanciastym 2 istnieje jakiś pertikularny sposób kodowania obrazu do base64, jak to było w przypadku pakietu kątowego 1 - angular-base64-upload.

Pls znaleźć poniżej mój przykładowy kod

onFileChangeEncodeImageFileAsURL(event:any,imgLogoUpload:any,imageForLogo:any,imageDiv:any) 
{ 
    var filesSelected = imgLogoUpload.files; 
    var self = this; 
    if (filesSelected.length > 0) { 
     var fileToLoad = filesSelected[0]; 

     //Reading Image file, encode and display 
     var reader: FileReader = new FileReader(); 
     reader.onloadend = function(fileLoadedEvent:any) { 

     //SECOND METHO 
     var imgSrcData = fileLoadedEvent.target.result; // <--- data: base64 

     var newImage = imageForLogo; 
     newImage.src = imgSrcData; 
     imageDiv.innerHTML = newImage.outerHTML; 

     } 
     reader.readAsDataURL(fileToLoad); 
    } 
} 

Answer 1

roboczej plunkr dla base64 String

https://plnkr.co/edit/PFfebmnqH0eQR9I92v0G?p=preview

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.base64textString= btoa(binaryString); 
      console.log(btoa(binaryString)); 
    } 

Answer 2

Czy próbowałeś za pomocą btoa lub Crypto.js do kodowania obrazu do base64?

link cryptojs - https://code.google.com/archive/p/crypto-js/

var imgSrcData = window.btoa(fileLoadedEvent.target.result);

lub var imgSrcData = CryptoJS.enc.Base64.stringify(fileLoadedEvent.target.result);

Answer 3

inne rozwiązanie ów prace dla base64 jest coś takiego jak tego postu https://stackoverflow.com/a/36281449/6420568

w moim przypadku, ja

getImagem(readerEvt, midia){ 
    //console.log('change no input file', readerEvt); 
    let file = readerEvt.target.files[0]; 
    var reader = new FileReader(); 
    reader.readAsDataURL(file); 
    reader.onload = function() { 
     //console.log('base64 do arquivo',reader.result); 
     midia.binario = btoa(reader.result); 
     //console.log('base64 do arquivo codificado',midia.binario); 
    }; 
    reader.onerror = function (error) { 
     console.log('Erro ao ler a imagem : ', error); 
    }; 
} 

i składnik html

<input type="file" class="form-control" (change)="getImagem($event, imagem)"> 

<img class="img-responsive" src="{{imagem.binario | decode64 }}" alt="imagem..." style="width: 200px;"/> 

do wyświetlania obrazu, stworzyłem rurę decode64

@Pipe({ 
    name: 'decode64' 
}) 
export class Decode64Pipe implements PipeTransform { 
    transform(value: any, args?: any): any { 
    let a = ''; 
    if(value){ 
     a = atob(value); 
    } 
    return a; 
    } 
}