从getImageData（Javascript）创建纹理 [英] Creating texture from getImageData (Javascript)

问题描述

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

It is possibile to create a texture (to use on a element in a canvas) from the getImageData array of another canvas (in the same html page)? maybe without three.js? Thanks a lot,

Jennifer

推荐答案

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

The coolest thing about WebGL's texImage2D method is that its last argument can be a DOM element instead of an ArrayBuffer, in which case it copies its rendered content into your texture object.

例如：

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);

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

There's a little tutorial about this feature here.

这篇关于从getImageData（Javascript）创建纹理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！