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 对象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之后的图像无效

1 个答案: