web-dev-qa-db-ja.com

angular 2で画像をbase64に変換する

angular 2で画像をbase64に変換します。画像はローカルからアップロードされます。現在はfileLoadedEvent.target.resultを使用しています。問題は、このbase64文字列をREST Javaへのサービス、デコードできません。このbase64文字列を無料のオンラインエンコーダーデコーダーで試してみると、デコードされた画像も表示できません。キャンバスも使用してみました。取得しているbase64文字列が適切なものではないことは確かです、これのためにパッケージを追加する必要がありますか？またはangular 2には画像をbase64にエンコードする特定の方法がありますangular 1-angle-base64-uploadパッケージにありました。

Plsは私のサンプルコードの下で見つけます

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
10
lakshmi

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));
    }
34
Parth Ghiya

Parth Ghiyaの回答を少し変更したので、1枚の画像をアップロードできます。それらはすべて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));
}

HTMLファイル

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

base64で動作する別のソリューションは、この投稿のようなものです https://stackoverflow.com/a/36281449/6420568

私の場合、私はやった

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;
  }
}
1
Ewertom Moraes

BtoaまたはCrypto.jsを使用してイメージをbase64にエンコードしようとしましたか？

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

1
Ben Humphries

私はjsonでpostメソッドのHTTPリクエストを呼び出すことで答えを見つけました

1.eventパラメーターはHTML入力タグから取得されます。
2。 self.imagesrcは、データを保存し、ヘッダーファイルでそれを使用するためのコンポーネント変数です。これを「this」を自己変数にキャストし、リーダーで使用する必要があります。オンロード機能
3。 this.serverは、このコンポーネントで使用したAPI呼び出しサービスコンポーネント変数です

UploadImages(event) {
    var file = event.target.files[0];
    var reader = new FileReader();
    reader.readAsDataURL(file);
    var self = this;
    reader.onload = function() {
      self.imageSrc = reader.result.toString();
    };

    var image_data = {
      authentication_token: this.UD.getAuth_key ,
      fileToUpload: this.imageSrc,
      attachable_type: "Photo"
    };

    this.server.photo_Upload(image_data).subscribe(response => {
      if (response["success"]) {
        console.log(response);
      } else {
        console.log(response);
      }
    });
  }
0
Sithum Meegahapola