透明PNG中可见图像的最上面和最下面的坐标
The topmost and bottommost coordinates of the visible image in a transparent PNG
我是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轴上的距离了
- EaseJS拖放;放下(动画CC)电影剪辑的鼠标坐标
- 如何在d3.js中返回路径的y坐标
- 在谷歌地图上获取事件的x,y坐标
- 通过ajax将坐标传递到php服务器端,并在处理后检索到javascript
- 如何在Edge中下载图像/png数据URI
- 当带有渲染器的DOM元素不在屏幕顶部时,移动了场景的坐标
- 如何在JS Leatflet绘图插件中获取圆的坐标
- 点击(右键点击)使用传单地图库获取图像覆盖的像素坐标
- 查找带有边框的HTML5 Canvas(点击)事件的坐标
- HTML5获取弧的坐标's结束
- 如何在OpenLayers中获取动态绘制的多边形的坐标
- 如何通过ajax将png图片从服务器发送到浏览器中显示
- 将SVG下载为PNG图像
- 获取用户位置并将坐标保存在数据库中
- 如何在jquery、javascript、HTML5中以base64字符串保存为(PDF、doc、xls、png.)
- three.js:如何让透明的png精灵投射和接收阴影
- fabric js多边形集合坐标
- 使用D3.js和GeoJson在地图上的某些坐标上设置一个小图像
- 如何创建一个谷歌地图地理坐标数组
- 透明PNG中可见图像的最上面和最下面的坐标