texImage2D : XMLHttpRequest 后的图像无效

Question

我正在使用静态文件服务器加载本地.jpg图像。

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

但是，当gl.texImage2D(...)我打电话时，我得到：

WebGL: INVALID_VALUE: texImage2D: no image

这意味着没有图像。我在我的XMLHttpRequest. 这也是我第一次使用Blob. 也许使用更好base64？

Answer 1

将 url（或与此相关的URL 对象）分配给其src属性后，图像无法同步使用。你应该等待load事件：

/* ... */
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);
/* ... */