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

texImage2D：XMLHttpRequest 后的图像无效

texImage2D : Invalid image after XMLHttpRequest

xmlhttprequest

webgl