Comment obtenir la couleur des coordonnées x, y d'un pixel à partir d'une image?

Question

Est-il possible de vérifier si un point (x, y) sélectionné d'une image PNG est transparent?

Answer 1

Bâtiment sur Jeff réponse, votre première étape devrait être de créer une toile de la représentation de votre PNG. Le code suivant crée un écran de toile qui est de la même largeur et la hauteur de votre image et de l'image a tiré sur elle.

var img = $('#my-image')[0];
var canvas = $('<canvas/>')[0];
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);

Après que, lorsqu'un utilisateur clique, utilisez event.offsetX et event.offsetY pour obtenir la position. Cela peut ensuite être utilisé pour acquérir du pixel:

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

Parce que vous ne l'accaparement d'un pixel, pixelData est un quatre entrée de tableau contenant les pixels de R, G, B, et Un valeurs. Pour l'alpha, rien de moins que 255 représente un certain niveau de transparence, 0 étant totalement transparent.

Voici un jsFiddle exemple: http://jsfiddle.net/thirtydot/9SEMf/869/ j'ai utilisé jQuery pour des raisons de commodité, dans tout cela, mais il n'est pas nécessaire.

Remarque: getImageData tombe sous le navigateur de l'origine de la politique de prévention des fuites de données, ce qui signifie que cette technique va échouer si vous salir la toile avec une image provenant d'un autre domaine ou (je crois, mais certains navigateurs peuvent avoir résolu ce) SVG à partir de n'importe quel domaine. Cela protège contre les cas où un site sert d'une image personnalisée de l'actif pour un utilisateur connecté et un attaquant veut lire l'image pour obtenir des informations. Vous pouvez résoudre le problème en portion de l'image à partir du même serveur ou la mise en œuvre de Cross-origin resource sharing.

Answer 2

La toile serait une excellente façon de le faire, que @pst dit ci-dessus. Découvrez cette réponse pour un bon exemple:

getPixel du code HTML de Toile?

Un peu de code qui permettrait de vous servir plus précisément ainsi:

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]
}

Cela va aller ligne par ligne, de sorte que vous auriez besoin de les convertir en x,y et convertir la boucle for pour un vérifier directement ou exécuter un conditionnelle à l'intérieur.

La lecture de votre question, il semble que vous voulez être en mesure d'obtenir le point que la personne clique sur. Cela peut être fait assez facilement avec jquery cliquez sur l'événement. Il suffit d'exécuter le code ci-dessus à l'intérieur d'un gestionnaire de clic en tant que tel:

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

Ceux-ci devraient saisir vos valeurs x et y.