对非透明像素点击检测 [英] Hit detection on non-transparent pixel

问题描述

给定一个具有一些透明像素和一些不透明像素的Web上下文中的PNG，是否有一种方法在Javascript中确定用户是否点击了非透明像素？

Given a PNG in a web context with some transparent pixels and some non-transparent pixels, is there a way in Javascript to determine if a user has clicked on a non-transparent pixel? A webkit-only solution would be perfectly acceptable.

推荐答案

1）创建与图像大小相同的HTML5画布

2）获取画布的上下文，drawImage（yourImage，0，0）

3）d = context.getImageData（img的0,0，w，img的h）

= b

1) Create HTML5 canvas of same size as your image
2) Get Canvas's context, drawImage(yourImage, 0, 0)
3) d = context.getImageData(0, 0, w of img, h of img)
4) d.data[(y*width+x)*4+3] for the alpha

canvas = document.createElement("canvas");  //Create HTML5 canvas: supported in latest firefox/chrome/safari/konquerer.  Support in IE9
canvas.width = img.width;                   //Set width of your rendertarget
canvas.height = img.height;                 // \  height \   \     \
ctx = canvas.getContext("2d");              //Get the 2d context [the thing you draw on]
ctx.drawImage(img, 0, 0);                   //Draw the picture on it.
id = ctx.getImageData(0,0, img.width, img.height);  //Get the pixelData of image
//id.data[(y*width+x)*4+3] for the alpha value of pixel at x,y, 0->255

这篇关于对非透明像素点击检测的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！