我是 Three.js 和图形领域的新手，我一直在寻找一种方法来查找具有透明背景的 PNG 中最顶部和最底部的可见点。我模糊地知道，大部分图形操作是通过将图像理解为像素数组来完成的，因此我认为这本质上是在数组中迭代具有最大和最小 y 轴值的非透明像素。 Three.js 中的哪些功能(或者可能是直接的 Javascript)可以让我访问此数据(此数组？)，或者是否有更直接的方法来实现已内置于库中的目标？
我的目标是根据图像的可见内容将图像垂直居中。
谢谢!
- 更新-
借鉴@Paul Green的经验，我搜索了与getImageData(用于从 Canvas 上下文获取像素数组的函数)相关的Three.js内容，希望有一些等效的内容Three.js 中的函数。我正在寻找远离 Canvas 和 Three.js (webGL) 领域的东西，因为我没有在脚本中使用 Canvas 。我也在寻找可以在渲染图像之前获取信息的东西。到目前为止，Three.js dataTexture 看起来相关，但我仍然不完全理解它或如何使用它。任何指导将不胜感激!
最佳答案
您可以使用此问题中描述的方法从图像中获取像素: How to use JavaScript or jQuery to read a pixel of an image when user clicks it?
var img = new Image();
img.src = 'image.jpg';
var context = document.getElementById('canvas').getContext('2d');
context.drawImage(img, 0, 0);
data = context.getImageData(x, y, 1, 1).data;
然后循环遍历像素数组并检查您要查找的阈值。 0 表示完全透明，255 表示完全不透明。
这个问题也可能对如何访问特定颜色 channel 有帮助: getPixel from HTML Canvas?
您将需要查看 pix[i+3]，它在链接的示例中保存着 Alpha channel 。
您当前的像素位置只需使用当前循环迭代并将其除以宽度即可计算得出当前高度。
例如，您的图像为 200x50 像素。您在循环迭代 534 处击中了一个不完全透明的像素，534/200 = 2，因此 Y 轴向下 2 个像素，然后使用 534 mod 200 获得余数。这样您就知道 X 轴“内”有多远.
关于javascript - 透明 PNG 中可见图像的最顶部和最底部坐标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22513976/