Javascript /如果有一个频道进入，它将与所有四个（RGBA）频道一起推出。 从“jpeg js”导入{decode}； //与前面一样，请假定全局gl变量是我的WebGL上下文。 常数gl=''； 获取（``） .然后（res=>res.arrayBuffer（）） 。然后（缓冲区=>{ //当我们得到图像数据时，它仍然是经过编码的。我们需要对它进行解码 //在我们得到像素数据之前。我们希望它作为一个UINT8数组，这将使 //我很高兴。 常量像素=解码（缓冲区，真）； //设置一个新的纹理，我们将在其中捕获并保存图像数据 常量纹理=gl.createTexture（）； gl.bindTexture（gl.TEXTURE_2D，纹理）； //设置参数，以便我们可以渲染任意大小的图像。 gl.texParameteri（gl.TEXTURE_2D、gl.TEXTURE_WRAP_S、gl.CLAMP_TO_EDGE）； gl.texParameteri（gl.TEXTURE\u 2D、gl.TEXTURE\u WRAP\u T、gl.CLAMP\u至边缘）； gl.texParameteri（gl.TEXTURE\u 2D，gl.TEXTURE\u MIN\u过滤器，gl.NEAREST）； gl.texParameteri（gl.TEXTURE\u 2D，gl.TEXTURE\u MAG\u过滤器，gl.NEAREST）； //将图像上载到纹理中： //这里我们告诉WebGL每个像素将有多少字节（我想 //我认为默认值是4，但我认为这一步很重要）。 gl.pixelStorei（gl.UNPACK_校准，4）； //jpeg js非常友好，可以在其内部提供图像数据的尺寸 //返回值。由于jpeg js返回所有4个通道的数据，因此我们使用 //这里是gl.RGBA。 gl.texImage2D（gl.TEXTURE_2D，0，gl.RGBA，pixels.width，pixels.height，0，gl.RGBA，gl.UNSIGNED_字节，pixels.data）； //准备好抽签了！ });

希望这对将来的人有用。感谢所有提出想法和想法的人，感谢jpeg js上的合作者

你能发布纹理图像是如何获得的细节吗？在Chrome代码库中搜索错误消息表明问题出在那里。@KirillDmitrenko Edit添加了关于如何获取图像的详细信息。是否在使用“Texamage2D”之前等待图像加载。@pleup Yes-我确信在调用

Texamage2D

之前，图像已从服务器完全加载。可以吗您发布了纹理图像实际获取方式的详细信息？在Chrome代码库中搜索错误消息表明问题出在那里。@KirillDmitrenko Edit添加了关于如何获取图像的详细信息。是否在使用“Texamage2D”之前等待图像加载。@pleup Yes-我确信在调用

Texamage2D

之前，图像已从服务器完全加载为了测试，我删除了完全撤销对象url的行，但是错误没有改变。不过，谢谢你。那太不幸了。我注意到您创建的URL对象不是blob，而是一些

数据。你能在问题中详细说明如何从blob中获取它（因为传递blob对我来说很好）？这是一个拼写错误-修复了它。很抱歉。您是否100%确定在提取中收到图像？它与页面的来源相同吗？或者CORS头是否设置正确？我无法用你提供的信息重现问题：（或者我遗漏了什么）。是的，100%确定。过了一会儿我就开始工作了。请看我发布的答案以了解详细信息。谢谢你的帮助！为了测试，我删除了完全撤销对象url的行，但是错误没有改变。不过，谢谢你。那太不幸了。我注意到您创建的URL对象不是blob，而是一些
数据。你能在问题中详细说明如何从blob中获取它（因为传递blob对我来说很好）？这是一个拼写错误-修复了它。很抱歉。您是否100%确定在提取中收到图像？它与页面的来源相同吗？或者CORS头是否设置正确？我无法用你提供的信息重现问题：（或者我遗漏了什么）。是的，100%确定。过了一会儿我就开始工作了。请看我发布的答案以了解详细信息。谢谢你的帮助！很高兴你明白了这一点，但是伙计，我希望你没有那么多的障碍需要跨越。很高兴你明白了这一点，但是伙计，我希望你没有那么多障碍需要跨越。
// Pretend for the sake of example that I have passed in an argument 
// 'img' that is an Image object that I used to download the jpg.
// See the EDIT below for how this happens...

// ...also presume that I have set up my WebGL context and assigned it 
// to the variable 'gl':
// const gl = canvas.getContext('experimental-webgl');

const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);

// Set the parameters so we can render any size image.
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

// Upload the image into the texture.
gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, gl.LUMINANCE, gl.UNSIGNED_BYTE, img);

WebGL: INVALID_VALUE: texImage2D: invalid image

// Take care of vendor prefixes:
window.URL = window.URL || window.webkitURL;

// This is where we'll assign our final product
const imageTag = new Image();

imageTag.onerror = (err) => {
  console.error('IMG ERROR:', err);
};
imageTag.onload = () => {
  // Once the image tag has loaded the blob data, clean up our object url:
  window.URL.revokeObjectURL(imageTag.src);

  // imageTag is now passed into the code above as 'img'
};

// Grab the image data as a blob
fetch(`<url_of_image>`)
  .then(res => res.blob())
  .then(blob => {
    // When we get the image data, wrap it in an object url and assign
    // it to src. The onload event won't fire until the next tick.
    imageTag.src = window.URL.createObjectURL(blob);
  });

// I am using the decode() method from jpeg-js. Passing true as a second parameter 
// causes the data to be returned wrapped in a Uint8Array. Even though the data
// was one channel going in, it's going to come out with all four (RGBA) channels.

import { decode } from 'jpeg-js';

// Like before, please presume a global gl variable to be my WebGL context.
const gl = '<my-webgl-context-that-I-set-up-elsewhere>';

fetch(`<url_of_image>`)
  .then(res => res.arrayBuffer())
  .then(buffer => {
    // When we get the image data, it's still encoded. We need to decode it
    // before we've got pixel data. We want it as a Uint8Array which will make
    // texImage2D() happy.
    const pixels = decode(buffer, true);

    // Set up a new texture where we'll capture and keep the image data
    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);

    // Set the parameters so we can render any size image.
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

    // Upload the image into the texture:

    // Here we are telling WebGL how many bytes each pixel will be (I think 
    // think the default is 4, but I thought that this step was important to show).
    gl.pixelStorei(gl.UNPACK_ALIGNMENT, 4);

    // jpeg-js is kind enough to provide the dimensions of the image data in its
    // returned value. Since jpeg-js returns the data with all 4 channels, we use
    // gl.RGBA here.
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, pixels.width, pixels.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, pixels.data);

    // Ready to draw!
  });