Comment déterminer si un pixel dans une image PNG est transparent ?

Détermination de la transparence des pixels dans les images PNG

Vérifier la transparence des pixels individuels dans une image PNG est une tâche courante pour les développeurs Web. Cet article explore une solution à ce défi.

Vérification de la transparence des pixels

Pour déterminer si un pixel spécifique aux coordonnées (x, y) d'une image PNG est transparent, on peut exploiter la fonction getImageData() fournie par l'API Canvas de HTML5.

Création d'un canevas hors écran

En tant qu'étape préliminaire, créez une représentation de canevas hors écran de l'image PNG à l'aide du code suivant :

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);

Récupération des données de pixels

Lors de l'interaction de l'utilisateur, capturez les coordonnées de clic à l'aide de event.offsetX et event.offsetY et obtenez les données de pixel comme suit :

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

Vérification du canal Alpha

Le tableau pixelData contient quatre valeurs correspondant au rouge, au vert, au bleu et à l'alpha du pixel ( transparence). Pour alpha, une valeur inférieure à 255 indique une transparence.

Exemple de mise en œuvre

Le code suivant illustre cette technique :

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);

img.addEventListener('click', function(e) {
  var pixelData = canvas.getContext('2d').getImageData(e.offsetX, e.offsetY, 1, 1).data;
  console.log(pixelData[3] < 255 ? 'Transparent' : 'Opaque');
});

Considérations supplémentaires

N'oubliez pas que la fonction getImageData() est soumise à la politique de même origine du navigateur, ce qui signifie qu'elle peut échouer si l'image est chargée à partir d'un domaine différent ou d'un SVG à partir de n'importe quel domaine. Pour résoudre ce problème, envisagez de diffuser l'image à partir du même serveur ou de mettre en œuvre le partage de ressources d'origine croisée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!