Accéder aux pixels d'une image------------------------------
Url     : http://codes-sources.commentcamarche.net/source/101373-acceder-aux-pixels-d-une-imageAuteur  : William VOIROLDate    : 25/02/2016
Licence :
=========

Ce document intitulé « AccĂ©der aux pixels d'une image » issu de CommentCaMarche
(codes-sources.commentcamarche.net) est mis ŕ disposition sous les termes de
la licence Creative Commons. Vous pouvez copier, modifier des copies de cette
source, dans les conditions fixées par la licence, tant que cette note
apparaît clairement.

Description :
=============

Bonjour,
<br />
<br />Petit code HTML/Javascript qui montre comment on peut, g
râce à &quot;canvas&quot;, accéder aux pixels d'une image.
<br />Et aussi co
mment les modifier.
<br />
<br />Dans cet exemple, la 'modification' consiste 
simplement à 'inverser' la couleur pour obtenir une image négative:
<br /><pr
e class="code" data-mode="js">
    function Choix(i) {
      cnv.width=ima[i].na
turalWidth;
      cnv.height=ima[i].naturalHeight;
      ctx.drawImage(ima[i],0,
0);
      idt=ctx.getImageData(0,0,cnv.width,cnv.height);
    }

    function Ne
gatif() {
      for (var i=0,d=idt.data,n=d.length; i&lt;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.putImageD
ata(idt,0,0);
    }</pre>
<br />
<br />Choisissez une des trois images proposĂ
©es qui sera affichĂ©e dans un <b>canvas</b>.
<br />Puis cliquez dans <b>canvas
</b> (grande image) pour en inverser les couleurs.
<br />
<br />Le programme <
b>PixelsImage.html</b> du zip été testé avec les navigateurs
<br /><b>Firefo
x, IE, Opera, Safari</b>
<br />
<br />Malheureusement, il ne fonctionne pas av
ec <b>Google Chrome</b>:
<br />L'instruction <b>idt=ctx.getImageData(0,0,cnv.wi
dth,cnv.height);</b> plante !
<br />
<br />Merci d'avance pour toute solution 
à ce problème.
<br />
<br />Bonne lecture ...