texImage2D : Invalid image after XMLHttpRequest - xmlhttprequest

Question

I'am using a static file server to load a local .jpg-image.
let xhr = new XMLHttpRequest();
this.isLoaded = false;
this.image = new Image();
xhr.open("GET", "http://localhost:8080/testing/ressources/" + url, true);
xhr.responseType = 'blob';
this.textureBuffer = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, this.textureBuffer);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([255, 0, 0, 255]));
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
xhr.onload = (e) => {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
let blob = new Blob([xhr.response], {
type: 'image/jpg'
});
let urlCreator = window.URL || window.webkitURL;
this.image.src = urlCreator.createObjectURL(blob);
gl.bindTexture(gl.TEXTURE_2D, this.textureBuffer);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.image);
if (Texture.isPowerOf2(this.image.width) && Texture.isPowerOf2(this.image.height)) {
gl.generateMipmap(gl.TEXTURE_2D);
} else {
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
}
this.isLoaded = true;
}
};
xhr.send();
However when calling gl.texImage2D(...) I get :
WebGL: INVALID_VALUE: texImage2D: no image
Which means that there is no image. What am I missing in my XMLHttpRequest.
Also this is the first time I have used Blob. Maybe it is better to use base64?

Answer 1

The image is not synchronously available after assigning a url (or URL
object for that matter) to its src property. You should wait for load event:
/* ... */
this.image.onload = () => {
gl.bindTexture(gl.TEXTURE_2D, this.textureBuffer);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.image);
/* ... */
}
this.image.src = urlCreator.createObjectURL(blob);
/* ... */