透明PNG中可见图像的最上面和最下面的坐标

The topmost and bottommost coordinates of the visible image in a transparent PNG

本文关键字：PNG 坐标 图像 透明      更新时间：2023-09-26

我是Three.js的新手，一般来说，我一直在寻找一种方法来找到具有透明背景的PNG中最顶部和最底部的可见点。我模糊地知道，许多图形操作都是通过将图像理解为像素数组来完成的，所以我认为这实际上是在数组中迭代具有最大和最小y轴值的非透明像素。Three.js(或者直接是Javascript)中的什么特性可以让我访问这些数据(这个数组?)，或者是否有更直接的方法来实现我已经内置在库中的目标?

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

谢谢!

- UPDATE -

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

你可以使用这个问题中描述的方法从图像中获取像素:如何使用JavaScript或jQuery读取图像的像素时，用户单击它?

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表示完全不透明。

这个问题可能对如何访问特定的颜色通道也有帮助:从HTML画布getPixel ?

您将需要查看pix[i+3]，它在链接的示例中包含alpha通道。

你的当前像素位置是简单地通过使用当前循环迭代，并除以你的宽度，得到你当前的高度计算出来的。

例如你的图像是200x50像素。你在循环迭代534时遇到一个不完全透明的像素，534/200 = 2，所以你在Y轴上向下2个像素，然后用534 mod 200得到余数。这样你就知道in在X轴上的距离了

相关文章：