Documentation on ko-image

[ephes]

Hi *,

I spend half of today figuring out how to display an image on a konva layer in an angular app. Maybe an example in the documentation regarding image handling could save noobs like me a lot of time. But maybe it's just me. Anyway, here's what worked for me (disclaimer: since I'm a javascript beginner, maybe my approach is completely wrong):

import { Component, OnInit, EventEmitter } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { Observable, of } from 'rxjs';

// declare window to remove typescript warning
interface Window {
  Image: any;
}
declare const window: Window;

@Component({
  selector: 'app-detail',
  templateUrl: './app-detail.component.html',
  styleUrls: ['./app-detail.component.css']
})
export class DetailComponent implements OnInit {
  public configStage: Observable<any> = of({
    width: 700,
    height: 1000
  });

  public configImage:EventEmitter<any> = new EventEmitter();

  constructor(private route: ActivatedRoute) { }

  showImage(src: string) {
    const image = new window.Image();
    image.src = src;
    image.onload = () => {
      this.configImage.emit({
        image: image,
      })
    }
  }

  ngOnInit() {
    this.showImage('/path/to/image');
  }
}

[saucey]

This screwed me up for a few hours, Brilliant Thanks!!!

[victacora]

Thank you :D

[torhy13]

God bless you ephes! Thanks a LOT! Guys, please pay attention to this issue! This is important!

[bcrigler]

Thank you for doing this... this and many other things need to be in the documentation, for sure.

Why did you use EventEmitter? Why not just use an Observable like the configStage property?

[viradia2]

Hi @ephes, I am new to Konva and writing code in Angular 6+ so I can load images. I have used ko-circle and other shapes but how to load images.