透明PNG中可见图像的最高和最低坐标答案

【问题标题】：The topmost and bottommost coordinates of the visible image in a transparent PNG透明PNG中可见图像的最高和最低坐标
【发布时间】：2014-04-26 04:14:45
【问题描述】：

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

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

谢谢！

- 更新-

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

【问题讨论】：

您所说的“最高和最低可见点”是什么意思？最透明像素和最不透明像素？
@Paul Green - 啊，好问题。我的意思是透明背景中图像顶部和底部的坐标：例如，如果我的透明 PNG 上有一张树的图片，我想知道树顶部和底部的 y 坐标.是不是更清楚了？

标签： javascript image three.js png transparency

【解决方案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?

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

您当前的像素位置只需使用当前循环迭代并将其除以您的宽度即可得出当前高度。

例如，您的图片是 200x50 像素。你在循环迭代 534, 534/200 = 2 处击中了一个不完全透明的像素，所以你在 Y 轴上向下 2 个像素，然后用 534 mod 200 得到剩余的像素。所以你知道你在 X 轴上的“距离”有多远.

【讨论】：

有没有办法做到这一点而不将图像绘制到画布上？我没有使用画布（而是一个 div 容器），我希望在将其添加到 Three.js Object3D 之前计算大小，然后将其添加到场景中。想法？谢谢。
不，没有其他方法可以从 JS 中的图像中获取像素。 E：嗯，可能有一些对 Base64 编码图像的诡计，但我不知道。 en.wikipedia.org/wiki/Base64
感谢您的提示。我接受了您的功能建议并进行了进一步搜索 - 在上面添加了更新。
我确实按照您的建议使用了getImageData()，最终在上面的代码中用canvas = document.createElement("canvas"); context = canvas.getContext("2d"); 替换了document.getElementById('canvas')。我通过省略 onload="addElement()" 标记中的 <body> 跳过了将画布渲染到浏览器。我不知道可以使用所有 canvas 工具而不将画布渲染到浏览器！
忘记了您更新的问题，但似乎您自己找到了解决方案。无论如何都是最好的学习方式。画布功能提供了许多易于使用的可能性来在浏览器中处理图像，以替代更复杂的 WebGL 着色器。