Winkel 2 Benutzer wählen lassen und das Bild von Ihrem lokalen Rechner

Ich bin sehr neu zu Eckig. Ich bin versucht zu machen, eine einfache web-Anwendung mit Angular 2, wo ich die Benutzer auswählen und Bild von Ihrem lokalen computer. Dann möchte ich, um dieses Bild in einen <img> tag. Später Aktionen ausführen auf das Bild, wie drehen, ändern, skalieren, ändern Sie die Breite...usw.

Dies ist, was ich in meiner Komponente

@Component({
    selector: 'image-container',
    template: `
        <input type="file" (change)="changeListner($event)" />
        <img id="image"/>
    `,
    directives: [ImageActionsComponent]
})
export class ImageContainerComponent { 
   //make FileReader work with Angular2
   changeListner(event){
        var reader = new FileReader();

        reader.onloaded = function (e) {
            //get loaded data and render thumbnail.
            var src = e.target.result;
            document.getElementById("image").src = src;
        };

        //read the image file as a data URL.
        reader.readAsDataURL(event.target.files[0]);
    }
}

Aber es funktioniert überhaupt nicht. Wie lese ich ein Bild und aktualisieren Sie das src-Attribut mit Angular2?

Ich versuche nur zu lernen, Eckig. 🙂

Gibt es eine bessere und einfacher Weg, dies zu tun?

stackoverflow.com/a/34230492/5043867 haben Sie einen Blick hier....dies kann Ihnen helfen !

InformationsquelleAutor Rahal | 2016-02-12

  1. 7

    Es funktioniert nicht, weil Sie onloaded event-Namen. Es gibt keine solche Veranstaltung sollte es sein onload:

    import {Component, ElementRef} from 'angular2/core'

@Component({
    selector: 'image-container',
    template: `
        <input type="file" (change)="changeListner($event)" />
        <img class="image" />
    `,
    directives: [ImageActionsComponent]
})
export class ImageContainerComponent {
    constructor(private element: ElementRef) {}

    changeListner(event) {
        var reader = new FileReader();
        var image = this.element.nativeElement.querySelector('.image');

        reader.onload = function(e) {
            var src = e.target.result;
            image.src = src;
        };

        reader.readAsDataURL(event.target.files[0]);
    }
}

    Auch, es ist besser ElementRef zu lokalisieren Bild innerhalb einer Komponente.

    ich habe versucht, es im Winkel 4, aber es sagt, property Ergebnis doesnot existiert auf Typ EventTarget
    klingt wie eine TS-Eingabe problem
    var src =". e.Ziel.Ergebnis; diese Zeile verursacht Fehler. es sagt der .Ergebnis doesnot vorhanden ist

    InformationsquelleAutor dfsq

  2. 2

    Für diejenigen, die angesichts dieser Fehler mit Winkel: Immobilien Ergebnis nicht vorhanden ist geben Sie EventTarget

    umgehen kannst du es einfach durch:

    this.url = event.target['result']

    InformationsquelleAutor Taha Zgued

  3. 1

    Als diese Antwort besagt Vorschau-Bild gespeichert, in die fake-Pfad im Winkel 2/Typoskript zu vermeiden Eigenschaft "Ergebnis" existiert nicht auf Typ 'eventtarget'
    Sie können auch bestimmen Sie den Typ von e sein, als die folgenden:

    reader.onload = function(e: any) {
        var src = e.target.result;
        image.src = src;
    };

    InformationsquelleAutor Mohamed Rozza

  4. 0

    Meine Lösung war diese:

    reader.onload = (e) => {
   image.src=reader.result;
}

    InformationsquelleAutor Jonatan Potrikus

Schreibe einen Kommentar