How to show an uploaded image as a canvas background right away? - html

Question

I'm using typescript to set as a canvas background an image uploaded by users. However, and I guess due to some binding issue, it only works when the user uploads the file two times. How could I wait for the image to load before trying to set it as a canvas background?
I have tried to run the canvas code only when the selectedFile variable is not null (see below) but I'm getting the same error.
<input type="file" (change)="onFileChanged($event)">
<canvas id="canvas"></canvas>
private selectedFile: File = null;
private imgURL: any;
onFileChanged(event){
if(event.target.files.length == 0) return;
this.selectedFile = <File> event.target.files[0];
var reader = new FileReader();
reader.readAsDataURL(this.selectedFile);
reader.onload = (_event) => {this.imgURL = reader.result;}
var canvas : any = document.getElementById("canvas");
var ctxt = canvas.getContext("2d");
var background = new Image();
background.src = this.imgURL;
background.onload = function () {
ctxt.drawImage(background, 0, 0, canvas.width, canvas.height);
};
}
I expect the canvas to show the selected image as a background. However, the first time the user uploads an image, the output is GET http://localhost:4200/undefined 404 (Not Found) Image (async). When the user uploads a different image, the background is updated to the first selected image.

Answer 1

I think all you need to do is put your canvas code inside of the reader.onload callback.
onFileChanged(event) {
if (event.target.files.length == 0) return;
this.selectedFile = < File > event.target.files[0];
var reader = new FileReader();
reader.readAsDataURL(this.selectedFile);
reader.onload = (_event) => {
this.imgURL = reader.result;
var canvas: any = document.getElementById("canvas");
var ctxt = canvas.getContext("2d");
var background = new Image();
background.src = this.imgURL;
background.onload = function() {
ctxt.drawImage(background, 0, 0, canvas.width, canvas.height);
};
}
}
You were likely getting your error because your .onload async callback had not triggered yet and this.imgURL would be undefined when you tried to use it. Now it waits until we have a value for imgURL before tying to use it.