Accéder aux pixels d'une image

Soyez le premier à donner votre avis sur cette source.

Vue 3 155 fois - Téléchargée 525 fois

Description

Bonjour,

Petit code HTML/Javascript qui montre comment on peut, grâce à "canvas", accéder aux pixels d'une image.
Et aussi comment les modifier.

Dans cet exemple, la 'modification' consiste simplement à 'inverser' la couleur pour obtenir une image négative:
    function Choix(i) {
      cnv.width=ima[i].naturalWidth;
      cnv.height=ima[i].naturalHeight;
      ctx.drawImage(ima[i],0,0);
      idt=ctx.getImageData(0,0,cnv.width,cnv.height);
    }

    function Negatif() {
      for (var i=0,d=idt.data,n=d.length; i<n; i+=4)
        {d[i]=255-d[i]; d[i+1]=255-d[i+1]; d[i+2]=255-d[i+2]; d[i+3]=255;}
      ctx.putImageData(idt,0,0);
    }


Choisissez une des trois images proposées qui sera affichée dans un canvas.
Puis cliquez dans canvas (grande image) pour en inverser les couleurs.

Le programme PixelsImage.html du zip a été testé avec les navigateurs
Firefox, IE, Opera, Safari

Malheureusement, il ne fonctionne pas avec Google Chrome:
L'instruction idt=ctx.getImageData(0,0,cnv.width,cnv.height); plante !

Merci d'avance pour toute solution à ce problème.

Bonne lecture ...

Codes Sources

A voir également

Ajouter un commentaire

Commentaire

Messages postés
1764
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
27 juin 2020
79
bonjour

avec chrome c'est normale il faut que la page soit en ligne pour que sa marche

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.