如何从图像中获取像素的x,y坐标颜色?
image-processing
javascript
5
0

有什么方法可以检查PNG图像的选定点(x,y)是否透明?

参考资料:
Stack Overflow
收藏
评论
共 4 个回答
高赞 时间 活跃

基于Jeff的答案,您的第一步将是创建PNG的画布表示。以下内容将创建一个屏幕外画布,该画布的宽度和高度与您的图像相同,并在其上绘制图像。

var img = document.getElementById('my-image');
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);

之后,当用户单击时,使用event.offsetXevent.offsetY获取位置。然后可以用来获取像素:

var pixelData = canvas.getContext('2d').getImageData(event.offsetX, event.offsetY, 1, 1).data;

因为您只抓取一个像素,所以pixelData是一个包含四个像素的R,G,B和A值的四项数组。对于Alpha,任何小于255的值都表示某种程度的透明度,0表示完全透明。

这是一个jsFiddle示例: http : //jsfiddle.net/thirtydot/9SEMf/869/为了方便起见,我使用jQuery,但这并不是必需的。

注意: getImageData属于浏览器的同源策略,以防止数据泄漏,这意味着如果您用来自另一个域的图像或(来自某些域的SVG,但相信某些浏览器已经解决了)SVG弄脏画布,则此技术将失败。这可以防止站点为已登录的用户提供自定义图像资产并且攻击者希望读取图像以获取信息的情况。您可以通过从同一服务器提供映像或实现跨域资源共享来解决该问题。

收藏
评论

与: i << 2

const data = context.getImageData(x, y, width, height).data;
const pixels = [];

for (let i = 0, dx = 0; dx < data.length; i++, dx = i << 2) {
    if (data[dx+3] <= 8)
        console.log("transparent x= " + i);
}
收藏
评论

正如@pst所说,Canvas是实现此目的的好方法。查看此答案以获取一个好例子:

HTML Canvas中的getPixel?

也可以为您提供服务的一些代码:

var imgd = context.getImageData(x, y, width, height);
var pix = imgd.data;

for (var i = 0, n = pix.length; i < n; i += 4) {
  console.log pix[i+3]
}

这将逐行进行,因此您需要将其转换为x,y并将for循环转换为直接检查或在内部运行条件式。

再次阅读您的问题,看来您希望能够使该人单击。使用jquery的click事件可以很容易地做到这一点。只需在点击处理程序中运行上述代码即可:

$('el').click(function(e){
   console.log(e.clientX, e.clientY)
}

那些应该抓住你的x和y值。

收藏
评论

前面的两个答案演示了如何使用Canvas和ImageData。我想提出一个带有可运行示例并使用图像处理框架的答案,因此您无需手动处理像素数据。

MarvinJ提供了image.getAlphaComponent(x,y)方法该方法仅返回x,y坐标中像素的透明度值。如果此值为0,则像素是完全透明的,介于1和254之间的值为透明级别,最后为255是不透明的。

为了演示,我使用了下面的图片(300x300),该图片具有透明背景,并且在坐标(0,0)(150,150)处有两个像素。

在此处输入图片说明

控制台输出:

(0,0):透明
(150,150):NOT_TRANSPARENT

image = new MarvinImage();
image.load("https://i.imgur.com/eLZVbQG.png", imageLoaded);

function imageLoaded(){
  console.log("(0,0): "+(image.getAlphaComponent(0,0) > 0 ? "NOT_TRANSPARENT" : "TRANSPARENT"));
  console.log("(150,150): "+(image.getAlphaComponent(150,150) > 0 ? "NOT_TRANSPARENT" : "TRANSPARENT"));
}
<script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script>
收藏
评论
新手导航
  • 社区规范
  • 提出问题
  • 进行投票
  • 个人资料
  • 优化问题
  • 回答问题

关于我们

常见问题

内容许可

联系我们

@2020 AskGo
京ICP备20001863号