javascript - une - traitement d'image python pil




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

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


Canvas serait un excellent moyen de le faire, comme @pst dit ci-dessus. Consultez cette réponse pour un bon exemple:

getPixel à partir de HTML Canvas?

Du code qui vous servirait aussi bien:

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 ira ligne par ligne, donc vous aurez besoin de convertir cela en x, y et soit convertir la boucle for à une vérification directe ou exécuter un conditionnel à l'intérieur.

En relisant votre question, on dirait que vous voulez être en mesure d'obtenir le point sur lequel la personne clique. Cela peut être fait assez facilement avec l'événement click de jquery. Exécutez simplement le code ci-dessus dans un gestionnaire de clics en tant que tel:

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

Ceux-ci devraient saisir vos valeurs x et y.


Les deux réponses précédentes montrent comment utiliser Canvas et ImageData. Je voudrais proposer une réponse avec un exemple exécutable et en utilisant un cadre de traitement d'image, de sorte que vous n'avez pas besoin de gérer les données de pixels manuellement.

MarvinJ fournit la méthode image.getAlphaComponent (x, y) qui renvoie simplement la valeur de transparence pour le pixel dans la coordonnée x, y. Si cette valeur est 0, le pixel est totalement transparent, les valeurs entre 1 et 254 sont des niveaux de transparence, enfin 255 est opaque.

Pour démontrer j'ai utilisé l'image ci-dessous (300x300) avec fond transparent et deux pixels aux coordonnées (0,0) et (150,150) .

Sortie de la console:

(0,0): TRANSPARENT
(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>





image-processing