texImage2D：XMLHttpRequestの後の無効な画像

Question

静的ファイルサーバーを使用してローカルの.jpgイメージをロードしています。 gl.texImage2D(...)を呼び出すとき

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(); 

は、しかし、私は得る：

WebGL: INVALID_VALUE: texImage2D: no image 

画像がないことを意味します。 XMLHttpRequestには何がありますか？ また、Blobを初めて使用しました。おそらくbase64を使用する方が良いでしょうか？

Answer 1

URL（またはURL オブジェクト）をsrcプロパティに割り当てると、画像が同期して使用できなくなります。 loadイベントを待つ必要があります。