Ankündigung

Einklappen
Keine Ankündigung bisher.

Angular: Ausgabe einer Image auf Canvas

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Angular: Ausgabe einer Image auf Canvas

    Ich habe folgendes Script:
    Code:
    @Component({
      selector: 'app-canvas',
      template: `<canvas #canvas width="600" height="300"></canvas>`,
      styles: ['./canvas.component.css']
    })
    export class CanvasComponent implements OnInit {
    
      @ViewChild('canvas', { static: true })
      canvas: ElementRef<HTMLCanvasElement>;            
      private ctx: CanvasRenderingContext2D;             
    
      constructor() { }
    
      ngOnInit() {
        this.ctx = this.canvas.nativeElement.getContext('2d');
        this.draw();
      }
    
      draw(): void {
        var image = new Image();
        image.src = 'https://www.landschaftspark.de/site/assets/files/9906/lapano_info.675x338.jpg';     // Beispiel Bild
    
        this.ctx.drawImage(image, 675, 338); 
      }
    }
    Aber das Bild wird nicht ausgegeben. Weis jemand wieso nicht. Ich möchte erreichen, dass ein bestimmtes Bild welches ich über eine Image instanziere zu einem späteren Zeitpunkt ausgegeben wird. Das ganze soll später in eine seperate Klasse, die das image zeichnet ausgelegt werden.

  • #2
    Achtung: Wenn drawImage() vor dem Laden des Bildes ausgeführt wird, wird nichts passieren (In älteren Browsern kann es eine Fehlermeldung geben). Um jenen Fehler zu vermeiden, muss also sichergestellt werden, dass das load-Event benutzt wird.
    https://developer.mozilla.org/de/doc...utorial/Bilder

    Kommentar

    Lädt...
    X