Reputation: 1757
I am writing a canvas which draws an image in the component of angular2.
Here is the canvas.component.ts
export class BoardComponent implements OnInit, AfterViewInit, AfterViewChecked {
@ViewChild("visualization") visualization: ElementRef;
@ViewChild('img') img: ElementRef;
private context: CanvasRenderingContext2D;
private element: HTMLImageElement;
src: string;
width: number
height: number
constructor() {
this.src = 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png';
}
ngOnInit() {
this.width = 400;
this.height = 400;
}
ngAfterViewInit() {
this.context = this.visualization.nativeElement.getContext("2d");
this.element = this.img.nativeElement;
}
ngAfterViewChecked() {
this.context.clearRect(0, 0, this.width, this.height);
console.log('drawImage');
// this prints an image element with src I gave
console.log(this.element);
this.context.drawImage(this.element, 0, 0, this.width, this.height);
}
}
and here is the template
<img #img src="{{src}}" style='display: none;' />
<canvas #visualization width="{{width}}" height="{{height}}"></canvas>`
it looks like the image has been loaded, but my canvas is still empty.
I have found many similar questions, but none of them use angular2.
for example, the answer from this one drawImage() not working is that you should wait until the image is loaded.
But I don't know how to check this situation in angular way.
Any suggestion?
thanks.
I found that maybe the reason is that the image is not loaded when I render it to the canvas.
I add the following code and resize my page, and the canvas does show up.
@HostListener('window:resize')
resize() {
this.render();
}
render() {
this.context.clearRect(0, 0, this.width, this.height);
this.context.drawImage(this.element, 0, 0, this.width, this.height);
}
If this is the reason, the question changes, what is the proper way to add a event listener (like img.onLoad) to the html element in angular2?
Upvotes: 0
Views: 3837
Reputation: 28708
Here I adapted your code to work.
HTML
<img #img src="{{src}}" (load)="afterLoading()" style='display: none;' />
<canvas #visualization width={{imgWidth}} height={{imgHeight}} "></canvas>
Typescript
export class BoardComponent implements implements AfterViewInit {
@ViewChild("visualization") visualization: ElementRef;
@ViewChild('img') img: ElementRef;
private context: CanvasRenderingContext2D;
private element: HTMLImageElement;
src: string;
imgWidth: number;
imgHeight: number;
constructor() {
this.imgWidth = 400;
this.imgHeight = 400;
this.src = 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png';
}
ngAfterViewInit() {
this.context = this.visualization.nativeElement.getContext("2d");
this.element = this.img.nativeElement;
}
afterLoading(){
this.context.clearRect(0, 0, this.imgWidth, this.imgHeight);
console.log('drawImage');
// this prints an image element with src I gave
console.log(this.element);
this.context.drawImage(this.element, 0, 0, this.imgWidth, this.imgHeight);
}
}
And here is the working DEMO
Upvotes: 1