Chuyển đổi hình ảnh thành base64 ở góc 2

Question

Chuyển đổi hình ảnh thành base64 ở góc 2, hình ảnh được tải lên từ địa phương. Hiện tại đang sử dụng fileLoadedEvent.target.result. Vấn đề là, khi tôi gửi chuỗi base64 này thông qua các dịch vụ REST tới java, nó không thể giải mã nó. Khi tôi thử chuỗi base64 này với bộ giải mã mã hóa trực tuyến miễn phí, tôi cũng không thể thấy hình ảnh được giải mã. Tôi cũng đã thử sử dụng canvas. Không nhận được kết quả phù hợp. Một điều chắc chắn chuỗi base64 những gì đang nhận được không phải là một trong những thích hợp, tôi cần phải thêm bất kỳ gói cho điều này? Hoặc trong góc 2 là có cách nào perticular để mã hóa hình ảnh để base64 như nó đã có trong góc 1 - angular-base64-upload gói.

Xin vui lòng tìm thấy bên dưới mẫu mã của tôi

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

Working plunkr cho base64 Chuỗi

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

Bạn đã thử sử btoa hoặc Crypto.js để mã hóa hình ảnh để Base64?

liên kết đến cryptojs - https://code.google.com/archive/p/crypto-js/

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

hoặc var imgSrcData = CryptoJS.enc.Base64.stringify(fileLoadedEvent.target.result);

Answer 3

giải pháp khác thats công trình cho base64 là một cái gì đó giống như bài này https://stackoverflow.com/a/36281449/6420568

trong trường hợp của tôi, tôi đã làm

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

và thành phần html

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

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

để hiển thị hình ảnh, tôi đã tạo ra ống decode64

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