web-dev-qa-db-fra.com

Conversion d'une image en base64 en angulaire 2

En convertissant une image en base64 en angle 2, l’image est téléchargée à partir de local. Je suis actuellement en train d’utiliser fileLoadedEvent.target.result. Le problème est que, lorsque j'envoie cette chaîne base64 via des services REST à Java, il n'est pas en mesure de la décoder. Lorsque j'essaye cette chaîne base64 avec un encodeur-décodeur en ligne gratuit, je ne vois pas non plus d'image décodée. J'ai essayé d'utiliser la toile aussi. Je n'obtiens pas de résultat correct. Une chose est sûre que la chaîne base64 ne me convient pas, dois-je ajouter un paquet pour cela? Ou bien dans angular 2, existe-t-il un moyen particulier de coder l’image en base64 comme dans angular 1 - package angular-base64-upload.

Pls trouver ci-dessous mon exemple de code

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);
    }
}
javascriptjavajqueryangulartypescript
8
lakshmi

Travail plunkr pour 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));
    }
29
Parth Ghiya

J'ai modifié un peu la réponse de Parth Ghiya, vous pouvez donc télécharger une à plusieurs images, qui sont toutes stockées dans un tableau sous forme de chaînes codées en base64

base64textString = [];

onUploadChange(evt: any) {
  const file = evt.target.files[0];

  if (file) {
    const reader = new FileReader();

    reader.onload = this.handleReaderLoaded.bind(this);
    reader.readAsBinaryString(file);
  }
}

handleReaderLoaded(e) {
  this.base64textString.Push('data:image/png;base64,' + btoa(e.target.result));
}

Fichier HTML

<input type="file" (change)="onUploadChange($event)" accept=".png, .jpg, .jpeg, .pdf" />
<img *ngFor="let item of base64textString"  src={{item}} alt="" id="img">
2
Johansrk

une autre solution qui fonctionne pour base64 est quelque chose comme ceci post https://stackoverflow.com/a/36281449/6420568

dans mon cas, j'ai fait

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

et composant html

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

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

pour afficher l'image, j'ai créé le tuyau decode64

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