BASE64 do obrazu kątowej 2

Question

Staram się pokazać obraz się ze zdalnego serwera z kątowy 2.

W moim składnika Mam obiekt, który jest „university_info” obiektu, który jest mój model.

export class myClass 
{ 
    university_info : university_info; 
} 
myFunction() 
{ 
    this.university_info = new university_info(responseFromServer[image]) 
} 

export class university_info 
{ 
    imageBase64 : string 
    constructor(image : string) 
    { 
     this.imageBase64 = image 
    } 
} 

Wszystko działa poprawnie. I dostać base64 obraz, ale gdy próbuję go pokazać w HTML w ten sposób:

<img [src]="'data:image/jpg;base64,'+university_info.imageBase64" /> 

To jest to, co mam:

Answer 1

Ty może spróbować użyć wartości _sanitizer.bypassSecurityTrustUrl, aby powiedzieć, że wartość kątowa jest bezpieczna. Przyjrzeć się tej klasie od kątowa:

class DomSanitizationService { 
sanitize(context: SecurityContext, value: any) : string 
bypassSecurityTrustHtml(value: string) : SafeHtml 
bypassSecurityTrustStyle(value: string) : SafeStyle 
bypassSecurityTrustScript(value: string) : SafeScript 
bypassSecurityTrustUrl(value: string) : SafeUrl 
bypassSecurityTrustResourceUrl(value: string) : SafeResourceUrl 
} 

i niska przykład dla bezpiecznego html:

export class AppComponent { 

    private _htmlProperty: string = '<input type="text" name="name">'; 

    public get htmlProperty() : SafeHtml { 
     return this._sanitizer.bypassSecurityTrustHtml(this._htmlProperty); 
    } 

    constructor(private _sanitizer: DomSanitizationService){} 
} 

Answer 2

Musisz upewnić się, że university_info.imageBase64 jest rodzajem ciąg wtedy kod będzie praca.

DEMO: http://plnkr.co/edit/pI35tx9gXZFO1sXj9Obm?p=preview

import {Component,ViewChild,Renderer,ElementRef,ContentChildren} from '@angular/core'; 

@Component({ 
    selector: 'my-app', 

    template: ` 
    <img [src]="'data:image/jpg;base64,'+imagePath"/> 
    ` 

}) 
export class App { 
    imagePath:string="iVBORw0KG..."; 
} 

Answer 3

To pytanie staje się wysoką Google Ranking więc pomyślałam, że mogę umieścić moje wyniki tutaj. Używanie powiązania danych do ustawiania właściwości obrazu może być problematyczne, szczególnie na starszych urządzeniach przenośnych. Więc jeśli masz problemy z wydajnością z odkażającego + podejście wiążące trzeba będzie ustawić właściwość src pomocą DOM bezpośrednio:

constructor(private el: ElementRef) {} 

... 

public imageChanged(base64: string) { 
    const im: HTMLImageElement = this.el.nativeElement.querySelector('#imgid'); 
    im.src = data; 
} 

To może być brzydki, ale jego szybki jak błyskawica.

Answer 4

Czuję tego wątku brakuje konkretnych przykładów, które sprawiło, że mają pewne trudności:

importu DomSanitizer do swojego konstruktora:

constructor(private _sanitizer: DomSanitizer) { } 

zdezynfekować ciąg Base64 chcesz przekazać jako źródła obrazu (zastosowanie trustResourceUrl)

this.imagePath = this._sanitizer.bypassSecurityTrustResourceUrl('data:image/jpg;base64,' 
       + toReturnImage.base64string); 

wiążą się HTML:

<img [src]="imagePath"> 

Answer 5

Chciałbym zaproponować alternatywne rozwiązanie bazujące na tym dostarczonym przez @gatapia.

Proponowane rozwiązanie polega na użyciu znacznika dekoratora @ViewChild (zobacz dokument tutaj https://angular.io/docs/ts/latest/api/core/index/ViewChild-decorator.html), aby pobrać odniesienie do elementu w komponencie i ustawić wartość bezpośrednio, jak pokazano w poniższym fragmencie kodu.Ważne jest, aby pamiętać, że element, do którego następuje odwołanie za pośrednictwem obiektu ViewChild, powinien być powiązany z lokalną zmienną za pomocą znaku #, jak pokazano w poniższym kodzie.

Również, jak wyjaśnia ElementRef docs, użycie ElementRef bezpośrednio nadal naraża ryzyko XSS również obecne podczas korzystania z DomSanitizer.

@Component({ 
    template: ` 
    <div> 
     <img #imgRef> // Note that the #imgRef reference is required to be identified by Angular 
    </div> 
    `, 
}) 
export class MyComponent implements OnInit { 
    src:string; 
    @ViewChild('imgRef') img:ElementRef; 

    constructor() { 
    // In your case, this will be resolved from the server 
    this.src = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo='; 
    } 

    ngOnInit() { 
    // Sets the value of the element 
    this.img.nativeElement.src = this.src; 
    } 
} 

Poniższy plunkr zapewnia działający fragment kodu z powyższego https://plnkr.co/edit/JXf25Pv8LqrFLhrw2Eum?p=preview

Answer 6

załączeniu odpowiedniego przykład jak przesłać obraz w Base64 w kątowy 2/4 a także jego wyświetlania. rzeczywisty ciąg base64 jest zrzucany do konsoli debuggera i oczywiście można go przechowywać w bazie danych itp.

import { Component, OnInit } from '@angular/core'; 
// Base 64 IMage display issues with unsafe image 
import { DomSanitizer } from '@angular/platform-browser'; 

@Component({ 
    selector: 'app-test', 
    template: ` 
      <h1>Test 001 </h1> 

      <div class="form-group"> 
      <label>Image</label> 
      <input type="file" class="form-control" accept="application/msword, application/vnd.ms-excel, application/vnd.ms-powerpoint, 
      text/plain, application/pdf, image/*" (change)="changeListener($event)"> 
      </div> 

      <img *ngIf="base64Image" [src]="domSanitizer.bypassSecurityTrustUrl(base64Image)" /> 
    `, 
    styleUrls: ['./test.component.css'] 
}) 
export class TestComponent implements OnInit { 

    private base64Image: string; 

    constructor(private domSanitizer: DomSanitizer) { } 

    ngOnInit() { 
    } 

    changeListener($event): void { 
    this.readThis($event.target); 
    } 

    readThis(inputValue: any): void { 
    var file: File = inputValue.files[0]; 
    var myReader: FileReader = new FileReader(); 

    myReader.onloadend = (e) => { 
     this.base64Image = myReader.result; 
     console.log(this.base64Image); 
    } 
    myReader.readAsDataURL(file); 
    } 

}