Canvas 从getImageData（Javascript）创建纹理

是否可以从另一个画布（在同一html页面中）的getImageData数组创建纹理（用于画布中的元素）？也许没有3.js？非常感谢

---

Jennifer

这就是getImageData的要点，获取图像以对其进行操作，然后在任何画布上绘制

imageData = someContext.getImageData(0, 0, canvasWidth, canvasHeight);
anotherContext.putImageData(imageData, 0, 0);

做一些事情，比如：

---

如果不打算进行像素操作，则应仅使用drawImage（），而不使用速度较慢的getImageData/putImageData。

WebGL的

texImage2D

方法最酷的一点是，它的最后一个参数可以是DOM元素，而不是ArrayBuffer，在这种情况下，它会将其渲染内容复制到纹理对象中

例如：

var canvas2d = document.getElementById('canvas2d');
gl.bindTexture(gl.TEXTURE_2D, myTexture);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas2d);

---

有一个关于此功能的小教程。

是的，Texamage2D可以拍摄ImageData

var imageData = some2DCanvasContext.getImageData(...);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imageData);

下面是测试此功能的WebGL一致性测试之一

---

是的，我知道这一点，但我不想将图像绘制到第二个画布中，我想使用像素阵列（如果我理解正确的话，这是一种颜色缓冲区）为立方体创建纹理（例如）。换句话说，我想将图像作为纹理“附加”到3d元素上。再次感谢您无论如何都需要从imageData创建位图缓冲区/画布，然后使用位图作为纹理。（如果你不需要像素操作，也可以直接使用画布。本教程非常有趣，但源代码的链接已断开，因此我还没有完全理解。你认为我可以使用texImage2d而不是getImageData，还是应该使用它们的组合？如果你需要，我认为你根本不需要使用

getImageData

）只需尝试根据另一画布的“屏幕截图”创建纹理。