角度2でbase64に画像を変換する

Question

角度2で画像をbase64に変換すると、画像はローカルからアップロードされます。現在、fileLoadedEvent.target.resultを使用しています。問題は、このbase64文字列をRESTサービスからjavaに送信すると、それをデコードできないことです。無料のオンラインエンコーダ/デコーダでこのbase64文字列を試してみると、デコードされた画像も見ることができません。キャンバスも使ってみました。適切な結果が得られない。一つは、base64の文字列が正しいものではないと確信しています。これにはパッケージを追加する必要がありますか？または、角度2では、画像をbase64にエンコードする方法はありますか？それは、角度1のangle-base64アップロードパッケージにあったのと同じです。

PLSのは、あなたがBASE64に画像をエンコードするためにbtoaやCrypto.jsを使用してみました、私のサンプルコード

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

ワーキング下にplunkr Base64文字列

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

を見つけますか？ cryptojsへ

リンク - https://code.google.com/archive/p/crypto-js/

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

または var imgSrcData = CryptoJS.enc.Base64.stringify(fileLoadedEvent.target.result);

Answer 3

別の解決策は、私が

をした、base64のための作品は私の場合、このポスト https://stackoverflow.com/a/36281449/6420568

のようなものであるのthats

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

とHTMLコンポーネント

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

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

画像を表示するために、私はパイプDECODE64

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