JavaScript DOM 图片预加载
JavaScript DOM image preload
https://webgl2fundamentals.org/webgl/lessons/webgl-3d-textures.html
在上面的 link 中,我必须创建一个新图像并在加载后将其发送到缓冲区。
var image = new Image();
image.src = "resource/1.png";
image.onload = ()=>{
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
gl.generateMipmap(gl.TEXTURE_2D);
}
如何预加载图片并使用?
var image = "data";
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
gl.generateMipmap(gl.TEXTURE_2D);
您可以为此使用异步函数:
async function loadImage(src) {
const image = new Image();
image.src = src;
return new Promise((resolve,reject)=>{
image.onload = ()=>resolve(image);
image.onerror = ()=>reject(new Error(`Failed to load image at "${src}"`));
});
}
let img = await loadImage("resource/1.png");
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
gl.generateMipmap(gl.TEXTURE_2D);
https://webgl2fundamentals.org/webgl/lessons/webgl-3d-textures.html
在上面的 link 中,我必须创建一个新图像并在加载后将其发送到缓冲区。
var image = new Image();
image.src = "resource/1.png";
image.onload = ()=>{
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
gl.generateMipmap(gl.TEXTURE_2D);
}
如何预加载图片并使用?
var image = "data";
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
gl.generateMipmap(gl.TEXTURE_2D);
您可以为此使用异步函数:
async function loadImage(src) {
const image = new Image();
image.src = src;
return new Promise((resolve,reject)=>{
image.onload = ()=>resolve(image);
image.onerror = ()=>reject(new Error(`Failed to load image at "${src}"`));
});
}
let img = await loadImage("resource/1.png");
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
gl.generateMipmap(gl.TEXTURE_2D);