web-dev-qa-db-fra.com

Obtenir la couleur des pixels d'une image

J'ai une image sur un navigateur.

Je veux obtenir le pixel supérieur gauche de la couleur de l'image (aux coordonnées: 0,0), que l'image soit pivotée ou non.

Comment puis-je faire cela, en utilisant du code javascript ou php?

javascriptimagepixel
19
Eitan
  • Créez un canevas document.createElement
  • Récupère le contexte 2D canvas.getContext('2d')
  • Dessinez l'image sur la toile context.drawImage(image, x, y)
    • Assurez-vous que l'image provient du même domaine ou vous n'aurez pas accès à ses pixels
  • Obtenez les données de pixels pour l'image context.getImageData(x1, y1, x2, y2)
    • Vous voulez juste en haut à gauche donc context.getImageData(0, 0, 1, 1)
  • Le résultat de getImageData aura un tableau de pixels dans son champ data(context.getImageData(0,0,1,1).data)
    • Le tableau aura les valeurs r, g, b et a.
42
Louis Ricci

Pour une image sur un navigateur, vous ne pouvez pas utiliser PHP sauf si vous pouvez d'abord transférer l'image sur un serveur.

dans le navigateur, si vous pouvez dessiner l'image dans un canvas, vous pouvez utiliser la méthode getImageData():

var myImg = new Image();
myImg.src = 'image.jpg';
var context = document.getElementById('canvas').getContext('2d');
context.drawImage(myImg, 0, 0);
var data = context.getImageData(x, y, 1, 1).data;

Vous devez autoriser toute rotation - vous savez probablement quelle rotation a été appliquée.

15
user1864610