Question

我是Three.js的新手，也是一般的图形，我一直在寻找一种方法来找到具有透明背景的PNG中最顶部和最底部的可见点。我知道模糊的意义是大部分图形处理都是通过将图像理解为像素数组来完成的，因此我认为这基本上是针对具有最大和最小y轴值的非透明像素迭代数组。 Three.js中的哪些功能 - 或者可能是直接的Javascript - 会让我访问这些数据（这个数组？），还是有更直接的方法来实现我已经内置到库中的目标？

我的目标是根据图像的可见内容垂直居中。

谢谢！

- 更新 -

从@Paul Green那里得到一片叶子，我搜索了与getImageData相关的Three.js内容（一个用于从画布上下文中获取像素数组的函数），希望在三中有一些等效函数.js文件。我正在寻找一些不在画布和Three.js（webGL）领域的东西，因为我没有在我的剧本中使用画布。我也在寻找可以在渲染图像之前获取信息的东西。到目前为止，一个Three.js dataTexture看起来很相关，但我仍然不完全理解它或如何使用它。任何指导将不胜感激！

Answer 1

您可以使用此问题中描述的方法从图像中获取像素： 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表示完全不透明。

这个问题可能对如何访问特定颜色通道有所帮助： getPixel from HTML Canvas?

您需要查看链接示例中包含Alpha通道的pix[i+3]。

您当前的像素位置只是通过使用当前循环迭代并将其除以宽度来计算，该宽度为您提供当前高度。

例如，您的图片为200x50像素。你在循环迭代534,534/200 = 2时击中了一个不完全透明的像素，所以你在Y轴向下2个像素，然后用534 mod 200得到剩余的像素。所以你知道＆＃34;在＆＃34;你的X轴。

透明PNG中可见图像的最顶部和最底部坐标

1 个答案: