Can you help me figure out how to fix the issue I'm having with loading images in this component? Currently, when I refresh the page, the image does not load properly and appears resized to 1 pixel width. Should I wait for the image to fully load before resizing it? If so, how can I achieve that?
export class ImageComponent implements OnChanges {
@Input() urlInputImage: string;
public app: PIXI.Application;
constructor() {
}
ngOnChanges() {
this.drawImage();
}
private removeAllChildNodes(parent) {
if (parent.firstChild) {
parent.removeChild(parent.firstChild);
}
}
private drawImage(): void {
const frame = document.querySelector('#frame');
this.removeAllChildNodes(frame);
this.app = new PIXI.Application({
backgroundColor: 0xffffff,
});
const container = new PIXI.Container();
this.app.stage.addChild(container);
const texture = PIXI.Texture.from(this.urlInputImage);
const pic = new PIXI.Sprite(texture);
container.addChild(pic);
document.getElementById('frame').appendChild(this.app.view);
this.resize(pic);
}
private resize(pic) {
const w = pic.width;
const h = pic.height;
//this part resizes the canvas but keeps ratio the same
this.app.renderer.view.style.width = w + "px";
this.app.renderer.view.style.height = h + "px";
//this part adjusts the ratio:
this.app.renderer.resize(w,h);
}
destroy() {
this.app.destroy();
}
ngOnDestroy(): void {
this.destroy();
}
}