skip to main | skip to sidebar
Code 18
Manuel du savoir-faire à l'usage des geeks et des curieux
RSS
  • Accueil
  • Le web au Québec
  • Liens
  • Twitter
  • Facebook
  • À propos

samedi 18 février 2012

Convertir une image couleur à grayscale avec le canvas HTML5

Publié par Infinite Loop, à 08 h 29 3 commentaires

Comme la plupart des gens, vous avez certainement vu le film Les aventures de Tintin en 3D qui raconte l'histoire d'un jeune reporter roux d'à peu près 17 ans qui sait piloter une moto comme un champion et un avion en situation catastrophique. Moi, je ne l'ai vu que récemment avant qu'il disparaisse des salles de cinéma (avec les lunettes BCBG). Ce qui m'a le plus impressionné, c'est l'hallucinante qualité de l'image 3D et les détails plus vrais que nature reproduits par ordinateur. Bientôt, l'ère des vrais acteurs payés à coup de millions sera révolue et constituera un genre à part dans l'industrie. Il n'y a qu'à imaginer quel cachet aurait demandé Pauline Marois pour jouer le rôle secondaire de la Castafiore pour comprendre l'étendue du génie économique de Spielberg et Jackson.



Tout ça pour dire que le film avait un facteur wow gigantesque, du jamais vu. Comme programmeur, nul besoin de dire que je suis incapable de produire une affiche avec une palette de couleurs si éblouissante. Par contre, mes démarches d'autoformation avec le canvas HTML5 et la manipulation d'images m'ont intéressé à voir comment on pouvait convertir une image couleur en niveaux de gris (grayscale). C'est moins impressionnant mais l'effet sobre fait ressortir les jeux de lumière, comme dans une photo en noir et blanc.

Voici le code final, je vous explique les nouvelles notions ensuite.

var canvas = $('#myCanvas');
var context = canvas.get(0).getContext('2d');

var img = new Image();
img.src = 'images/tintin-3d.jpg';

$(img).load(
function(){
context.drawImage(img, 0, 0);

var imageData = context.getImageData(0, 0, canvas.width(), canvas.height())
var pixels = imageData.data;
var nbPixels = pixels.length;

for(var i=0 ; i<nbPixels ; i++){
// moyenne RGB pour obtenir le ton de gris
var average = (pixels[i*4] + pixels[i*4+1] + pixels[i*4+2]) / 3;

pixels[i*4] = average;
pixels[i*4+1] = average;
pixels[i*4+2] = average;

// On n'y touche pas car on ne veut pas appliquer de transparence
// pixels[i*4+3] = pour l'alpha
}

context.putImageData(imageData, 0, 0);
}
);


Ici, j'ai fait exprès pour que les dimensions du canvas soient exactement de la même grandeur que l'image à manipuler. Lorsqu'on récupère les informations de l'image, on se trouve à récupérer un long tableau qui décrit chaque pixels un à un. Chacun comprend quatre propriétés soient le rouge, vert, bleu et l'alpha (transparence) qui sont stockés de façon linéaire dans le tableau. Donc le premier pixel correspond aux valeurs des indices 0 à 3 où les trois premiers sont pour le RGB et le quatrième pour l'alpha. Pour le pixel suivant, on se déplace 4 indices plus loin (offset de 4) pour travailler sur les indices 4 à 7. On finit par faire une itération sur l'ensemble du tableau pour remplacer chaque pixel par un ton de gris obtenu en calculant la moyenne de chaque couleur RGB. C'est aussi simple que ça.


Tags: Club Vidéo, HTML, JavaScript

3 réponses à "Convertir une image couleur à grayscale avec le canvas HTML5"

  1. Anonyme a dit...
    18 février 2012 à 14 h 55

    A noter que la moyenne arithmétique n'est pas une des meilleures techniques pour la conversion d'image couleur en image noir et blanc ;)

    Quelques informations (et formules de conversion) ici :
    http://fr.wikipedia.org/wiki/Niveau_de_gris

    mothsART a dit...
    2 août 2012 à 10 h 51

    Je pense en toute honnêteté que ce code est plus simple :
    http://dl.dropbox.com/u/11137205/grayscale.html

    (ça n'empêche pas d'utiliser un pour récupérer l'image converti)

    De plus, c'est beaucoup moins gourmand!

    Infinite Loop a dit...
    2 août 2012 à 21 h 23

    Oui si on veut le faire par CSS mais le but du billet était de faire la démonstration à l'aide d'un canvas HTML5.

    C'est quand même super de pouvoir comparer différentes techniques :-)


Publier un commentaire

Message plus récent Messages plus anciens Accueil
S'abonner à : Publier des commentaires (Atom)
    Suivre @code18 sur Twitter

    Catégories

    • Apache (21)
    • Citations (167)
    • Club Vidéo (24)
    • Coffre à outils (56)
    • CSS (8)
    • Curiosités (117)
    • Design Pattern (2)
    • Drupal (8)
    • Easter Eggs (22)
    • Extensions Firefox (20)
    • GIMP (7)
    • Histoire (21)
    • HTML (32)
    • Humour (57)
    • Intégration (34)
    • iPod (12)
    • JavaScript (110)
    • Jeu de combat (6)
    • Le coin du geek (128)
    • Liens (12)
    • Linux (56)
    • Livres (78)
    • Lois et principes (46)
    • Marché des saveurs (26)
    • Mathématique (18)
    • Mobile (5)
    • Montréal (32)
    • Musique (112)
    • Pancartes et écriteaux (16)
    • Perl (8)
    • Pérou (1)
    • PHP (130)
    • PostgreSQL (44)
    • Programmation (105)
    • Saviez-vous que (55)
    • Sécurité (22)
    • SEO (5)
    • SQL Server (22)
    • Vieilles publicités (6)
    • Virtualisation (8)
    • Voyages (1)
    • Zend Framework (26)

    Divers

    Archives

    • ►  2015 (6)
      • ►  août 2015 (1)
      • ►  juillet 2015 (1)
      • ►  février 2015 (3)
      • ►  janvier 2015 (1)
    • ►  2014 (8)
      • ►  décembre 2014 (1)
      • ►  novembre 2014 (1)
      • ►  octobre 2014 (1)
      • ►  août 2014 (2)
      • ►  juillet 2014 (2)
      • ►  janvier 2014 (1)
    • ►  2013 (53)
      • ►  décembre 2013 (2)
      • ►  novembre 2013 (1)
      • ►  octobre 2013 (3)
      • ►  septembre 2013 (2)
      • ►  août 2013 (5)
      • ►  juillet 2013 (3)
      • ►  juin 2013 (5)
      • ►  mai 2013 (3)
      • ►  avril 2013 (7)
      • ►  mars 2013 (7)
      • ►  février 2013 (11)
      • ►  janvier 2013 (4)
    • ▼  2012 (105)
      • ►  décembre 2012 (8)
      • ►  novembre 2012 (5)
      • ►  octobre 2012 (4)
      • ►  septembre 2012 (1)
      • ►  août 2012 (8)
      • ►  juillet 2012 (7)
      • ►  juin 2012 (7)
      • ►  mai 2012 (10)
      • ►  avril 2012 (13)
      • ►  mars 2012 (15)
      • ▼  février 2012 (15)
        • Un dernier souffle pour mon iPod Touch
        • Zend_Date me fait perdre mon temps avec l'heure d'été
        • Aucun ingrédient imprononçable
        • L'affaire est ketchup
        • Citation no. 146 sur le guitariste
        • Personnage le plus vulgaire de tous les temps
        • Le piège des design patterns
        • Convertir une image couleur à grayscale avec le ca...
        • Mettre sa vie sur pause pendant un moment
        • Quoi faire quand le VPN nous déconnecte après 3 mi...
        • Effet miroir sur une image avec le canvas HTML5
        • Ces imbéciles qui veulent voir la vie en 3D
        • Citation no. 145 sur les langages de programmation
        • Créer un fichier image à partir du dataURL avec PHP
        • Enregistrement du contenu d'un canvas HTML5
      • ►  janvier 2012 (12)
    • ►  2011 (146)
      • ►  décembre 2011 (14)
      • ►  novembre 2011 (11)
      • ►  octobre 2011 (12)
      • ►  septembre 2011 (13)
      • ►  août 2011 (15)
      • ►  juillet 2011 (17)
      • ►  juin 2011 (18)
      • ►  mai 2011 (15)
      • ►  avril 2011 (9)
      • ►  mars 2011 (7)
      • ►  février 2011 (3)
      • ►  janvier 2011 (12)
    • ►  2010 (398)
      • ►  décembre 2010 (29)
      • ►  novembre 2010 (28)
      • ►  octobre 2010 (32)
      • ►  septembre 2010 (34)
      • ►  août 2010 (22)
      • ►  juillet 2010 (35)
      • ►  juin 2010 (42)
      • ►  mai 2010 (36)
      • ►  avril 2010 (37)
      • ►  mars 2010 (34)
      • ►  février 2010 (32)
      • ►  janvier 2010 (37)
    • ►  2009 (430)
      • ►  décembre 2009 (32)
      • ►  novembre 2009 (34)
      • ►  octobre 2009 (33)
      • ►  septembre 2009 (37)
      • ►  août 2009 (37)
      • ►  juillet 2009 (39)
      • ►  juin 2009 (38)
      • ►  mai 2009 (37)
      • ►  avril 2009 (35)
      • ►  mars 2009 (37)
      • ►  février 2009 (32)
      • ►  janvier 2009 (39)
    • ►  2008 (84)
      • ►  décembre 2008 (34)
      • ►  novembre 2008 (39)
      • ►  octobre 2008 (11)

    Abonnés

Copyright © All Rights Reserved. Code 18 | Converted into Blogger Templates by Theme Craft