texImage2D：XMLHttpRequest後無效圖像

我使用靜態文件服務器加載本地.jpg -image。texImage2D：XMLHttpRequest後無效圖像

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？

來源

2017-10-04 Felix

將圖像分配爲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); 
/* ... */

來源

2017-10-04 13:23:58

texImage2D：XMLHttpRequest後無效圖像

回答

相關問題