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 ...
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.