Les Canvas : vous allez aimer !

Posté par Freezy

Attention, ceci est une note aux éditeurs : Ce billet doit être édité sous le mode HTML et non Visuel de WordPress.
Raison : Le parseur de WordPress supprime les canvas.
Merci.

Tintintin !
Voici donc ce billet tant attendu !

Rentrons dans le vif du sujet

_{Pas trop profondément quand même, il ne faut pas lui faire mal, inconscient !}

Vous voulez un bel exemple de canvas ? Vous n'avez qu'à regarder le logo du blog, et les titres de billets ! Sur WordPress, les canvas sont partout ...

Documentation

Je ne vais pas vous parler de toute les fonctions des canvas. Pour ce soir, je vais plutôt parler de ce que j'ai dû expérimenter =). Voici l'histoire

Je me promenais sur le web quand je suis tombé sur un script GreaseMonkey décodant les captchas de MegaUpload. Fantastique ! J'ai donc plongé dans le code source ... Et je n'en ai rien compris ! J'en suis sorti avec une immense migraine ... Quelques heures plus tard, j'ai décidé de creuser le sujet. Et j'ai été ébloui.

À la fin de ce billet, vous saurez décoder des captchas (Pas très élaborés, je l'admet. D'ailleurs, plus ils sont élaborés, plus c'est difficile ... Ce qui est logique : le tricheur « décode » le mécanisme, l'administrateur le complexifie, le tricheur le re-« décode », etc.)

Rien que ça !

On va commencer avec une image basique :

Premièrement : on déclare le canvas et on lui assigne les dimensions de l'image. Rien de sorcier :

//On crée le canvas
var canvas = document.createElement("canvas");
//On lit son contexte pour pouvoir travailler dessus.
var context = canvas.getContext("2d");

//On crée l'image pour la mettre dans le canvas
var image = ...; // image contient l'élément DOM de l'image, eg document.getElementsByTagName("img")[0]
var imgWidth = image.width;
var imgHeight = image.height;

//Pour éviter les bogues, on donne au canvas les dimensions de l'image
canvas.width = imgWidth;
canvas.height = imgHeight;

Bon, et comment on met l'image dans le canvas ?

context.drawImage(image , 0, 0);

C'est d'une simplicité, vraiment ... On demande tout simplement de dessiner l'image ligne par ligne à partir du coin supérieur gauche du canvas.

Et ça donne ceci :

Votre naviguateur n'affiche pas les canvas.

C'est bien beau tout ça me direz-vous, mais il faut aussi lire le texte, et on en est pas encore là ...

_{Si vous n'êtes pas convaincu, cliquez droit sur l' «image». Le menu est différent, non ? =)}

Pixellisation

On va faire une petite étape utile mais pas indispensable, elle permet de se simplifier le travail. On va rechercher tous les pixels gris, du moment qu'ils sont opaques (le fond est transparent) et les passer en noir. En gros, on fait pixelliser. Dans la foulée, on vire la transparence du fond.

var imageData = context.getImageData(0, 0, imgWidth, imgHeight); //On lit les données du canvas
var pixels = imageData.data; //On obtient le tableau des pixels
for ( var i = 0, n = pixels.length ; i < n ; i += 4 )
{
	//On lit les trois composantes R,V,B du pixel et sa transparence alpha.
	var red = pixels[i];
	var green = pixels[i+1];
	var blue = pixels[i+2];
	var alpha = pixels[i+3];

	//if(red != 255 && green != 255 && blue != 255)
	//Condition alternative : les pixels de fond sont transparents, pas le texte, ce qui diminue la condition et augmente donc la vitesse du code.
	if(alpha != 0)
	{
		//On est tombé sur un pixel non blanc / transparent, on le met en noir et opaque.
		pixels[i] = 0;
		pixels[i+1] = 0;
		pixels[i+2] = 0;
	}
	else
	{
		//C'est un pixel blanc, on le passe en opaque.
		pixels[i] = 255;
		pixels[i+1] = 255;
		pixels[i+2] = 255;
		pixels[i+3] = 255;
	}
}

Oui, je vous dois pas mal d'explications.

La première chose à savoir, c'est que les pixels ont 4 informations dans un canvas : les trois composantes des couleurs primaires, et leur transparence alpha. Pour lire tous les pixels, il ne faut donc pas lire le tableau des pixels un à un, mais 4 à 4, et lire chaque valeure. Le pixel 1 est en position 0, et le 2 en position 4, le 3ème en 8, etc...

Ensuite, je lis les composantes du pixel et sa transparence. Une bête condition me permet de distinguer les pixels transparents des gris (la condition alternative est superbe). Si je tombe sur un pixel grisé ou noir, je met ses 3 composantes RVB à 0, et dans le cas échéant, je met le pixel en blanc opaque.

Vous voulez un rendu, petits chanceux ?

Votre naviguateur Web ne supporte pas les canvas.

Pas mal, hein ?

Je ne vous ai pas parlé de la fonction permettant d'envoyer les données du canvas. La voici :

context.putImageData(imageData, 0, 0);

Encore une fois, très simple, on envoie les données des pixels dans le canvas en écrasant les anciennes données.

On a fait la moitié, les enfants ... x) Maintenant, on va faire un peu de théorie.

Lecture des chiffres

Comment l'œil humain lit-il un caractère ? Il le voit dans sa globalité. Mais un script, lui, doit le lire colonne par colonne. On va donc créer un array contenant toutes les colonnes de pixels de l'image. Cette solution est suffisante ici car l'image n'est pas dans des dimensions gigantesques. Dès qu'on touche à des canvas plus complexes, il faudrait spécifier au script à quel pixel précisement commencer et finir, pour éviter de collecter des données inutiles.

Voici mon code source. L'explication le suit

    var columns = new Array(); //On déclare le tableau des colonnes
    var imageDataWidth = imageData.width;
    var imageDataHeight = imageData.height;
    //On lit les pixels
    for ( var x = 0 ; x < imageDataWidth ; x += 1 )
    {
        var column_buffer = new Array(); // Cette variable contiendra chaque colonne.
        for ( var y = 0 ; y < imageDataHeight ; y += 1 )
        {
            var imageDataPixels = imageData.data; //On lit les informations sur l'image
            var i = y * imageDataWidth * 4 + x * 4; //L'index du pixel considéré

            //On teste les composantes R, V ,B
            if (imageDataPixels[i] == 0 && imageDataPixels[i+1] == 0 && imageDataPixels[i+2] == 0)
            {
                //Pixel noir = 1
                column_buffer.push(1);
            }
            else
            {
                //Pixel blanc = 0
                column_buffer.push(0);
            }
        }

        columns.push(column_buffer); //On envoie la colonne de pixels dans l'array les contenant tous.
    }

D'abord, on récupère les dimensions des données sur l'image. imageData est un objet contenant un mappage des pixels du canvas.

Ici, les variables x et y sont trompeuses.x parcourt toutes les colonnes de pixels, et y les pixels des lignes. C'est un peu compliqué et je ne vois pas trop comment expliquer ça. Le mieux est que vous testiez le code source.

Ah, et i, c'est quoi ? La documentation Mozilla (anglaise) l'explique très bien :

For example, to read the blue component's value from the pixel at column 200, row 50 in the image, you would do the following:

blueComponent = imageData.data[((50*(imageData.width*4)) + (200*4)) + 2];

Ce qui se traduit par : « Pour lire la composante bleue du pixel aux coordonnées X = 200 et Y = 50 dans une image, vous écririez ceci : ... »

J'ai repris la formule, en supprimant le + 2, puisque je veux lire toutes les composantes.

On va donc se retrouver avec un tableau de tous les pixels : s'ils sont blancs, ils sont représentés par un 0, sinon par un 1. Simple, non ? ^_^

Je ne colle pas ici l'état de l'array, c'est inutile puisque le code source fonctionne parfaitement comme vous allez le voir à la suite de cette partie.

La cerise sur le gateau : le dechiffrage !

Allez, maintenant, on va faire encore un peu de théorie.

On a un tableau des colonnes de pixels. Comment détecter la fin d'un caractère ? S'il est suivi d'une colonne entièrement vide, autrement dit constituée de 0 dans l'array ! Mais il peut y avoir une ou deux colonnes vides ... Alors comment fait-on ? Eh bien, on s'en fout !

Ici, la lecture des caractères est extrêmement simple. Pour des lettres plus difficiles, il faut utiliser un réseau neuronal. Je ne m'y connais pas du tout. Tout ce que je sais, c'est qu'il s'agit d'un script qui, sur la base de valeurs précalculées, est capable de déterminer si tel caractère est un a, un z, un t, etc ... Peut-être qu'Oenix vous éclairera.

On va faire une bête comparaison. Je me suis embêté à obtenir les structures des chiffres de 0 à 9 et du point dans le canvas pixellisé. Les voici en prime time pour vous.

	var empty_column_reference = new Array(0,0,0,0,0,0,0,0); // Référence pour la colonne vide.
	var one = new Array(0,1,0,0,0,0,1,0,1,1,0,0,0,0,1,0,1,1,1,1,1,1,1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,1,0); // Référence pour le 1. Suite des colonnes.
	var two = new Array(1,1,0,0,0,1,1,0,1,1,0,0,1,1,1,0,1,0,0,1,1,1,1,0,1,1,1,1,1,0,1,0,1,1,1,1,0,0,1,0); // Référence pour le 2. ------------------.
	var thr = new Array(1,1,0,0,0,1,1,0,1,1,0,0,0,1,1,0,1,0,0,1,0,0,1,0,1,1,1,1,1,1,1,0,1,1,1,1,1,1,1,0); // Référence pour le 3. ------------------.
	var fou = new Array(0,0,0,1,1,0,0,0,0,1,1,1,1,0,0,0,1,1,1,0,1,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,1,0,0,0); // Référence pour le 4. ------------------.
	var fiv = new Array(1,1,1,0,0,1,1,0,1,0,1,0,0,1,1,0,1,0,1,0,0,0,1,0,1,0,1,1,0,1,1,0,1,0,1,1,1,1,1,0); // Référence pour le 5. ------------------.
	var six = new Array(0,1,1,1,1,1,1,0,1,1,1,1,1,1,1,0,1,1,0,1,0,0,1,0,1,0,0,1,1,1,1,0,0,0,0,1,1,1,1,0); // Référence pour le 6. ------------------.
	var sev = new Array(1,0,0,0,0,0,0,0,1,0,0,0,0,1,1,0,1,0,0,1,1,1,1,0,1,1,1,1,1,0,0,0,1,1,1,0,0,0,0,0); // Référence pour le 7. ------------------.
	var hei = new Array(1,1,1,1,1,1,1,0,1,1,1,1,1,1,1,0,1,0,1,1,0,0,1,0,1,1,1,1,1,1,1,0,1,1,1,1,1,1,1,0); // Référence pour le 8. ------------------.
	var nin = new Array(1,1,1,1,0,0,0,0,1,1,1,1,0,0,1,0,1,0,0,1,0,1,1,0,1,1,1,1,1,1,1,0,1,1,1,1,1,1,0,0); // Référence pour le 9. ------------------.
	var zer = new Array(1,1,1,1,1,1,1,0,1,1,1,0,0,1,1,0,1,0,0,0,0,0,1,0,1,1,1,0,1,1,1,0,1,1,1,1,1,1,1,0); // Référence pour le 0. ------------------.
	var poi = new Array(0,0,0,0,0,1,1,0); // Référence pour le .

Et voici la routine qui lit les caractères.

var matrixBuffer = new Array();
var numerb_sequence = new Array();

//Columsn est la matrice des pixels obtenue à l'étape précédente.
	for ( var x = 0 , arrayLength = columns.length; x < arrayLength ; x += 1 )
	{
		//On vérifie si on a affaire à une colonne vide.
		if( columns[x].join(",") ==  empty_column_reference.join(","))
		{
			//Il s'agit d'une colonne vide
			//Ce qui signifie qu'il y a un chiffre derrière
			//Si la matrice n'est pas vide on la teste
			if(matrixBuffer.length != 0)
			{
				//On teste
				if (matrixBuffer.join(",") == one.join(","))
				{
					number_sequence.push(1);
					matrixBuffer = new Array();
				}
				if (matrixBuffer.join(",") == two.join(","))
				{
					number_sequence.push(2);
					matrixBuffer = new Array();
				}
				if (matrixBuffer.join(",") == thr.join(","))
				{
					number_sequence.push(3);
					matrixBuffer = new Array();
				}
				if (matrixBuffer.join(",") == fou.join(","))
				{
					number_sequence.push(4);
					matrixBuffer = new Array();
				}
				if (matrixBuffer.join(",") == fiv.join(","))
				{
					number_sequence.push(5);
					matrixBuffer = new Array();
				}
				if (matrixBuffer.join(",") == six.join(","))
				{
					number_sequence.push(6);
					matrixBuffer = new Array();
				}
				if (matrixBuffer.join(",") == sev.join(","))
				{
					number_sequence.push(7);
					matrixBuffer = new Array();
				}
				if (matrixBuffer.join(",") == hei.join(","))
				{
					number_sequence.push(8);
					matrixBuffer = new Array();
				}
				if (matrixBuffer.join(",") == nin.join(","))
				{
					number_sequence.push(9);
					matrixBuffer = new Array();
				}
				if (matrixBuffer.join(",") == zer.join(","))
				{
					number_sequence.push(0);
					matrixBuffer = new Array();
				}
				if (matrixBuffer.join(",") == poi.join(","))
				{
					number_sequence.push(" ");
					matrixBuffer = new Array();
				}
			}
		}
		else
		{
			//On ajoute l'array à la matrice sans tenir compte des colonnes : on les met les unes après les autres.
			for ( var y = 0 ; y < columns[x].length; y += 1 )
			{
				matrixBuffer.push(columns[x][y]);
			}
		}
	}

Je ne sais pas si vous avez compris. En gros, chaque lettre est référencée par l'ensemble des colonnes de pixels la composant qui possèdent au moins 1 pixel noir. Cet ensemble de colonnes est mis bout à bout.

Ensuite, je créée une variable qui est un tableau, matrixBuffer. Dans cette variable, je stocke les pixels en lecture, tant que je ne tombe pas sur une colonne vide ou une lettre. Dans le cas d'une lettre, je l'envoie dans le tableau contenant la liste des chiffres, et je vide matrixBuffer pour ne pas avoir les données de précédentes lettres.

Si matrixBuffer est vide, on la remplit. Il est vrai que je peux le faire hors du code source mais c'est plus classe comme ça, je trouve.

La vérification de la présence d'un caractère se fait si on tombe sur une colonne vide : on compare matrixBuffer aux références pour déterminer le caractère. Dans tous les cas, on vide matrixBuffer.

Et voici donc pour vous, en exclusivité, le décodage de cette image. Le code n'est pas optimisé du tout et n'a pas été concu dans cette approche.

Rappel de l'image :

Pas mal, hein ? À bientôt !

Freezy

Attention, ceci est une note aux éditeurs : Ce billet doit être édité sous le mode HTML et non Visuel de WordPress.
Raison : Le parseur de WordPress supprime les canvas.
Merci.

Oh, et tant que j'y suis ...

[Site "Chess.com"]
[Date "2010.09.10"]
[White "Freezy"]
[Black "U.N. Owen"]
[Result "1-0"]

1.d4 d5 2.Nc3 e6 3.Nf3 c5 4.e3 Nf6 5.Ne5 Nc6 6.Nxc6 bxc6 7.f4 cxd4 8.exd4 c5 9.Bb5+ Bd7 10.Be2 Bd6
 11.O-O O-O 12.f5 e5 13.dxe5 Bxe5 14.Nxd5 Bxf5 15.Rxf5 Bd4+ 16.Kh1 Nxd5 17.Bg5 Qd7 18.Bg4 Ne3 19.Bxe3 { Cette prise est un piège. Si le fou prend, la dame noire disparaît. Et effectivement ... } Bxe3 20.Qxd7 Rad8
 21.Qxa7 Rd2 22.Rxf7 { 2 variantes ici. Si Rxf7, alors la suite de la partie vous intéressera. Si la tour n'est pas capturée, alors Rxg7+, Kh8, Rxh7+, Kg8, Qh7# } Rxf7 23.Be6 { Clouant la tour. } Rdf2 { Prévenant du mat par Qxf7+, mais pas de celui qui s'en suit. } 24.Qb8# 1-0