Convertir une image RVB en code binaire

[invite4d3c0142]

Bonjour,

Je ne suis pas programmeur mais designer, et dans le cadre d'un projet sur le binaire j'aimerais savoir si il est possible de convertir une image en code binaire.
Je ne parle pas de réaliser une image en noir et blanc, où les blanc sont des 0 et les noir des 1. Je parle d'une image RVB couleur.
Je sais qu'il est facilement possible de convertir du texte en binaire où chaque lettre est une suite de 0 et 1, mais après avoir passé plusieurs heures à chercher pour les images je n'ai rien trouvé d'interessant. Est-il donc possible de convertir chaque pixel d'une image en code binaire? Extraire le code Hexadecimal (#XXXXXX) de chaque pixel et de les convertir en binaire peut-être?

Si oui, quel outils/site pourrais-je utilisé pour cela?

Merci!

-----

[invite51d17075]

bjr,
pas sur de comprendre ta question ,tu veux dire décompresser une image déjà encodée ( jpeg , autre, .... ) ?

[roro222]

Bonjour
Un éditeur hexadécimal devrait pouvoir faire ça

[invite4d3c0142]

@ansset : oui c'est bien ça, "convertir" une image .jpg en code binaire en quelque sorte
@roro222 : ok merci j'y ai jeté un oeil, en effet ça m'a l'air d'être proche de ce que je recherche, même si ça n'a pas l'air simple a utiliser

[A voir en vidéo sur Futura]

[azad]

Salut
Avec 16 bits par couleur et par pixel, soit 4096 couleurs, je doute que la résolution suffise à un designer !
Donc tu vas sans doute vouloir 3 fois 32 bits par pixel (16 000 000 de couleurs) ou plus. Fais le calcul pour un écran en 1280x1024 par exemple pour mesurer l’ampleur de la tâche. Et cela sans tenir compte de la position du pixel considéré.
D’autre part, à part les formats BMP et PSD qui, je crois, ne sont pas compressés, les autres formats le sont, et il faut connaître les algorithmes de compression pour retrouver l’information RGB pour chaque pixel.
Si donc, tu persistes, il te faudra sans doute convertir ton fichier d’origine en BMP ou PSD et ensuite lire le fichier obtenu avec un éditeur hexadécimal. La description du BMP est publique.

[JPL]

Ce qui pose le moins de problème c’est le format BMP parce que le fichier commence par un en-tête puis les pixels y sont écrits à la queue leu leu sans aucune compression. Chaque pixel, rouge, vert, bleu a une valeur entre 0 et 254 (ou fe en hexadécimal).

[invite51d17075]

Salut
Avec 16 bits par couleur et par pixel, soit 4096 couleurs, je doute que la résolution suffise à un designer !
.

pourquoi ?
on ne sait pas vraiment sur quoi il travaille.
si limite il y a , ce serait plutôt éventuellement sur la résolution de l'image elle-même (*) , en fct des agrandissements voulus.

(*) c-a-d pas chromatique.

[invite9dc7b526]

Il y a un package pour le logiciel R qui lit les formats d'images les plus courants (jpeg, tiff, gif...) et renvoie une simple matrice de nombres, dont on peut choisir le type. Ca permet de s'amuser à sommer des image (ou en faire le produit), etc. Je l'avais utilisé pour un cours sur l'ACP.

[invite936c567e]

Bonsoir

Le codage binaire constitue la base de l'électronique numérique et de l'informatique moderne. Hormis quelques rares cas où les informations sont physiquement codées sur plusieurs niveaux (transmission modulée, enregistrement sur mémoire de masse, ...), l'unité élémentaire d'information est le bit (deux états possible, notés 0 ou 1).

Le codage hexadécimal, de même que les autres types de codage (octal, décimal BCD, ASCII, Unicode, UTF-8, nombre flottant IEEE754, ...) ne sont que des représentations conventionnelles d'informations stockées sur un ensemble de bits. Par exemple, le code hexadécimal "C8_h" est un moyen commode de représenter l'ensemble de bits 11001000_b, le caractère "1" est représenté par l'ensemble de bits 00110001_b en ASCII et en UTF-8, et la valeur 3,14 est représentée par l'ensemble de bits 010000000100100011110101110000 11_b selon IEEE754 (nombre flottant à simple précision).

Si l'information "pixel" dont tu parles est numérisée, alors elle existe déjà sous forme binaire, et se conforme à une convention de codage particulière. Par exemple, ce codage peut être de type RGB sur 24 bits où les composantes rouge (R), verte (G) et bleue (B) sont codées chacune sur 8 bits, et présentées à la suite ou sur des lignes ou des plans séparés. Mais les composantes peuvent être différentes (luminance + composantes chromatiques YUV ou YCbCr par exemple), de même que le nombre et l'agencement des bits utilisés.

Si l'information "pixel" est encore analogique (représentée par des niveaux continus de tension), alors la conversion vers des valeurs numériques doit être réalisée par du matériel (par un circuit électronique appelé "convertisseur analogique-numérique").


Pour qu'on comprenne ta problématique et ainsi répondre à ta question, il faudrait que tu précises où et sous quelle forme sont les pixels dont tu disposes, et où et sous quelle forme tu souhaites retrouver l'information correspondante après conversion.

[EDIT: désolé, suite à des problèmes de connexion j'ai mis trop de temps à répondre, et la discussion a beaucoup avancé sans moi. Mon intervention n'est donc plus trop d'actualité.]

[invite51d17075]

Salut PA5CAL.
il me semble qu'il avait répondu

@ansset : oui c'est bien ça, "convertir" une image .jpg en code binaire en quelque sorte

mais il faut confirmer, parce que les encodages sont assez différents, et plus ou moins "compressés".
Cdt

[invite936c567e]

il me semble qu'il avait répondu

Oui, mais lorsque j'ai commencé à rédiger mon post, cette réponse n'était pas encore disponible.

La question initiale manquant cruellement de clarté, je n'avais d'ailleurs même pas pensé aux éventuels problèmes de décompression.

[invite936c567e]

En ce qui me concerne, il m'arrive souvent d'utiliser un simple navigateur web pour obtenir les composantes RGB d'images enregistrées dans des fichiers. La conversion peut être réalisée avec Javascript, en mettant l'image dans un objet Canvas à l'aide de la méthode drawImage(), puis en récupérant le tableau des valeurs des composantes de chaque pixel à l'aide de la méthode getImageData(). Ce tableau peut alors être affiché sous forme de nombres lisibles dans un objet Textarea, ou bien directement traité par un programme écrit en Javascript.

La conversion inverse est également possible, avec en prime la visualisation immédiate de l'image résultante.

[invite936c567e]

Voici un exemple de fichier HTML pouvant réaliser la conversion d'une image (JPEG, PNG, etc.) en une liste de codes RGB hexadécimaux. Il fonctionne sous Firefox (je n'ai pas pris le temps de tester sous d'autres navigateurs).

Pour charger l'image, taper son URL dans le premier champ et cliquer sur "Charger" ou bien utiliser le bouton "Parcourir...".
Ensuite, pour démarrer la conversion, cliquer sur "Convertir".

NB: commencer par faire un test sur de petites images, car la conversion n'est pas très rapide.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>//<!--

var fi,fn,ld,cv,canvas,list,img;
var wi=0;
var hi=0;

function addEventHandler(elem,eventType,handler) {
  if (elem.addEventListener)
    elem.addEventListener (eventType,handler,false);
  else if (elem.attachEvent)
    elem.attachEvent ('on'+eventType,handler); 
}

function getElement(id)
{
  if (document.all)
    return document.all[id];
  return document.getElementById(id);
}

function pasteImage()
{
  wi = img.width;
  hi = img.height;
  canvas.width = wi;
  canvas.height = hi;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, wi, hi);
}

function loadImage()
{
  img = new Image();
  img.onload = pasteImage;
  img.src = fn.value;
}

function loadImageE(e)
{
  var URL = window.webkitURL || window.URL;
  var url = URL.createObjectURL(e.target.files[0]);
  img = new Image();
  img.onload = pasteImage;
  img.src = url;
}

var _hexa =  "0123456789ABCDEF";

function hexa(val)
{
  return _hexa.charAt((val&0xF0)>>4)+_hexa.charAt(val&0x0F);
}

function convertImage(e)
{
  var ctx = canvas.getContext("2d");
  var imgData = ctx.getImageData(0,0,wi,hi);
  var s = "/* "+(imgData.data.length/4)+" pixels */\n";
  var i = 0;
  for (var y=0; y<hi; y++) {
    s += "/* "+y+" */ ";
    for (var x=0; x<wi; x++) {
      var R = imgData.data[i++];
      var G = imgData.data[i++];
      var B = imgData.data[i++];
      var A = imgData.data[i++];
      
      s += "#"+hexa(R)+hexa(G)+hexa(B)+",";
    }
    s += "\n";
  }
  list.value = s;
}

onload = function()
{
  canvas = getElement("canvas");
  list = getElement("list");
  list.style.tabSize = "16";
  list.style.mozTabSize = "16";

  fn = getElement("filename");
  ld = getElement("load");
  cv = getElement("convert");
  fi = getElement("fileinput");
  var URL = window.webkitURL || window.URL;
  if (!URL) {
    addEventHandler(ld,"click",loadImage);
  } else {
    addEventHandler(fi,"change",loadImageE);
  }
  addEventHandler(cv,"click",convertImage);
}
//--></script>
<body>
<input type="text" id="filename" value="" size="80"/>
<button id="load">Charger</button><br/>
<input type="file" id="fileinput"/>
<button id="convert">Convertir</button><br/>
<textarea id="list" cols="160" rows="16"></textarea>
<canvas id="canvas" class="noborder"></canvas>
</body>
</html>

Faire un copier-coller de ce code dans un éditeur de texte simple (produisant un format TXT, sans mise en forme), puis l'enregistrer dans un fichier avec une extension ".html" .

[invite4d3c0142]

Il est vrai que ma demande initiale n'était pas vraiment claire, je vais tenté de l'éclaircir.

Prenons cette image :
Une image .jpeg de 400x600 pixels, ce qui donne 240000 pixels.

landscape.jpg

Le premier pixel en haut a gauche à 9a9fa3 comme valeur hexadecimal

hex.jpg

Via ce site, la conversion de la valeur hex 9a9fa3 donne : 1001 1010 1001 1111 1010 0011

L'idée serait de "convertir" l'image entière...histoire que je ne fasse pas les 240000 pixels à la main
J'éspère être plus clair.

[albanxiii]

Avec 16 bits par couleur et par pixel, soit 4096 couleurs, je doute que la résolution suffise à un designer

12 bits suffisent pour aller de 0 à 4095.
Vous ne vouliez pas dire plutôt 16384 couleurs ?

[invite936c567e]

Si c'est un affichage en binaire que tu souhaites, alors l'outil que je viens de donner peut être adapté pour le produire. Il suffit, dans la fonction convertImage(), de remplacer la ligne :

      s += "#"+hexa(R)+hexa(G)+hexa(B)+",";

par :

      s += bin(R)+" "+bin(G)+" "+bin(B)+", ";

et de rajouter la fonction :

function bin(val) {
  var s = "";
  for(var j=0; j<8; j++) {
    s += val&0x80 ? 1 : 0;
    val <<= 1;
    if (j==3)
      s += " ";
  }
  return s;
}

Cet exemple n'est qu'une entrée en matière. Il faudrait améliorer l'affichage pour le rendre plus ergonomique et également le compléter, en fonction du travail à réaliser.

[invite51d17075]

Il doit même exister des logiciels ( même gratuits ) qui doivent faire cela facilement :
https://convertio.co/fr/jpeg-rgb/
par exemple

ps: je ne l'ai pas testé, et j'ai vu qu'il y en avait d'autres.

[JPL]

12 bits suffisent pour aller de 0 à 4095.
Vous ne vouliez pas dire plutôt 16384 couleurs ?

J’avais relevé l’erreur mais je n’ai pas voulu intervenir. En fait les pixels monochromes sont codés en 8 bits et par combinaison de trois pixels on a 255³ soit un peu plus de 16 millions de couleurs ou nuances. Les photosites des capteurs des appareils de photo sont numérisés sur 12 ou de plus en plus sur 14 bits pour avoir une meilleure "profondeur" à la prise de vue mais la conversion en jpeg ramène le résultat sur 8 bits. Les bons photographes traitent le fichier brut (format raw) issu du capteur sur 16 bits et ne font la conversion vers 8 bits qu’une fois que toutes les corrections et tous les ajustements sont faits. Ils peuvent même ne pas convertir et garder l’image définitive en tiff 16 bits.

[invite4d3c0142]

Si c'est un affichage en binaire que tu souhaites, alors l'outil que je viens de donner peut être adapté pour le produire. Il suffit, dans la fonction convertImage(), de remplacer la ligne :

      s += "#"+hexa(R)+hexa(G)+hexa(B)+",";

par :

      s += bin(R)+" "+bin(G)+" "+bin(B)+", ";

et de rajouter la fonction :

function bin(val) {
  var s = "";
  for(var j=0; j<8; j++) {
    s += val&0x80 ? 1 : 0;
    val <<= 1;
    if (j==3)
      s += " ";
  }
  return s;
}

Cet exemple n'est qu'une entrée en matière. Il faudrait améliorer l'affichage pour le rendre plus ergonomique et également le compléter, en fonction du travail à réaliser.

J'ai essayé avec Firefox mais voici ce que j'obtiens :

C'est bizarre non ?

Il doit même exister des logiciels ( même gratuits ) qui doivent faire cela facilement :
https://convertio.co/fr/jpeg-rgb/
par exemple

ps: je ne l'ai pas testé, et j'ai vu qu'il y en avait d'autres.

Ah cool, j'ai testé de convertir en rgb mais que faire avec ce fichier après?

[invite936c567e]

J'ai essayé avec Firefox mais voici ce que j'obtiens :
...
C'est bizarre non ?

J'avais précisé qu'il fallait utiliser un éditeur de texte simple, produisant un format TXT sans mise en forme. Or, de toute évidence, le code a été enregistré au format RTF (Rich Text Format).

Sous Windows, il faudrait utiliser l'éditeur Notepad par exemple.

[invite936c567e]

Et sous Mac OS X, il faudrait utiliser TextEdit et convertir éventuellement le résultat au format texte s'il est en mode RTF.

[invite4d3c0142]

Et sous Mac OS X, il faudrait utiliser TextEdit et convertir éventuellement le résultat au format texte s'il est en mode RTF.

Hehe en effet, je suis sous mac et n'avais pas fait attention.
Voici ce que j'obtiens, c'est exactement ça :


Penses-tu qu'il soit facile de supprimer la "virgule" entre chaque valeur de pixel? J'essaie de décoder ton code qui fonctionne parfaitement, mais reste assez complexe pour moi ^^

[invite4d3c0142]

Ou plutôt comment modifier le code afin de personnaliser l'affichage final des données? avec ou sans virgule, espace, etc...

(désolé pour le doublon, je n'ai pas pu éditer mon précédent post)

[invite936c567e]

Toute la mise en forme étant faite par les quelques lignes de code Javascript, il suffit d'y mettre (ou d'enlever) ce qu'on veut.

Par exemple, la virgule qui semble te gêner se trouve presque à la fin de la ligne :

      s += bin(R)+" "+bin(G)+" "+bin(B)+", ";

Toutefois, sans virgule il sera difficile de distinguer la valeur d'un pixel de celle du suivant ou du précédent.

J'avais mis des espaces tous les quatre bits pour que le résultat ressemble à ce que tu avais donné au post #14, mais si tu souhaites les enlever, alors :
- les espaces entre chaque composante sont rajoutés dans la ligne citée ci-dessus
- l'espace séparant les deux quartets d'une composante est rajouté dans la fonction bin() par le code :

    if (j==3)
      s += " ";

[invite4d3c0142]

Tout compris, au top.
Merci!

[inviteb9f49292]

Je reformule pour voir si j'ai bien compris:
tu cherches un logiciel qui affiche une image, et une info-bulle affiche la valeur RGB en binaire du pixel sous le pointeur de la souris ?

Une 1ère remarque: l'hexadécimal me semble bien souvent plus opportun que le binaire, il est bien plus compact pour les mêmes "caractéristiques"

Si j'ai bien compris ta demande, peut-être ça existe sous forme de plugin pour gimp, ou petite appliquette plus ou moins fonctionnelle. Si tu ne trouves pas, c'est pas bien méchant... si tu sais programmer.

Si je n'ai pas compris, dis nous en plus sur le finalité.

[invite4d3c0142]

Je reformule pour voir si j'ai bien compris:
tu cherches un logiciel qui affiche une image, et une info-bulle affiche la valeur RGB en binaire du pixel sous le pointeur de la souris ?

Une 1ère remarque: l'hexadécimal me semble bien souvent plus opportun que le binaire, il est bien plus compact pour les mêmes "caractéristiques"

Si j'ai bien compris ta demande, peut-être ça existe sous forme de plugin pour gimp, ou petite appliquette plus ou moins fonctionnelle. Si tu ne trouves pas, c'est pas bien méchant... si tu sais programmer.

Si je n'ai pas compris, dis nous en plus sur le finalité.

Non en fait le script de PA5CAL est tout à fait ce que je cherchais. Il "extrait" le code hexadecimal de chaque pixel d'une image compressée type .jpeg et le convertit automatiquement en code binaire. Je ne cherchais pas à analyser pixel par pixel mais bien d'exporter la totalité de l'image au format texte.

[pm42]

mais bien d'exporter la totalité de l'image au format texte.

J'ai du mal à voir l'intérêt du binaire pour ça comme d'autres l'ont déjà dit. L'exporter en hexa ou utiliser un des nombreux formats déjà définis et les outils qui vont avec me semble plus simple :

https://en.wikipedia.org/wiki/Binary-to-text_encoding