Lire des données binaires à partir d'une image et l'enregistrer avec JavaScript

J'ai testé ce code sur votre violon et cela a fonctionné comme un charme:

  var contentType = '';
window.saveImage = function() {
var textToWrite = document.getElementById("inputTextToSave").value;
var splittedTextToWrite = textToWrite.split(",");
var u16 = new Uint16Array(splittedTextToWrite.length);
for(i=0; i<splittedTextToWrite.length; i++){
u16[i]=splittedTextToWrite[i];
}
var textFileAsBlob = new Blob([u16], {type: contentType});          
var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
if (window.webkitURL !== null) {
//Chrome allows the link to be clicked
//without actually adding it to the DOM.
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
}
else {
//Firefox requires the link to be added to the DOM
//before it can be clicked.
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
}
downloadLink.click();
}
function destroyClickedElement(event) {
document.body.removeChild(event.target);
}
window.loadImage = function() {
var file = document.getElementById("fileToLoad").files[0];
var reader = new FileReader();
reader.onload = function(event) {
var data = event.target.result;
var data16 = new Uint16Array(data);
var text = [];
for(i = 0; i<data16.length; i++){
text.push(data16[i]);
}
document.getElementById("inputTextToSave").value = text;
var imagePreview = document.getElementById("imagePreview");
imagePreview.innerHTML = '';
var dataURLReader = new FileReader();
dataURLReader.onload = function(event) {
//Parse image properties
var dataURL = event.target.result;
contentType = dataURL.split(",")[0].split(":")[1].split(";")[0];
var image = new Image();
image.src = dataURL;
image.onload = function() {
console.log("Image type: " + contentType);
console.log("Image width: " + this.width);
console.log("Image height: " + this.height);
imagePreview.appendChild(this);
};
};
dataURLReader.readAsDataURL(file);
};
//reader.readAsBinaryString(file);
reader.readAsArrayBuffer(file);
}

Je ne suis pas un expert sur le nouveau HTML5 APIs, mais je vais essayer d'expliquer un peu ce que j'ai fait.

1) j'ai sauvé un PNG sur le disque. (photo.png)

2) Si vous avez Linux, vous pouvez voir le contenu du fichier au format hexadécimal avec cette commande od -cx photo.png. Si non vous avez besoin d'un éditeur hexadécimal.

Les premières lignes de la photo.png en hexadécimal montrer quelque chose comme ceci:

       211   P   N   G  \r  \n 032  \n  \0  \0  \0  \r   I   H   D   R
5089    474e    0a0d    0a1a    0000    0d00    4849    5244

Chaque paire de nombres de la deuxième ligne représentent le code hexadécimal de la codification du symbole ci-dessus: 5089 est la codification de 211 P, 50 est la valeur hexadécimale de P et 89 211 (petit-boutiste de la codification, les deux premiers octets de code pour le deuxième symbole, les deux derniers code pour le premier symbole)

3) au Lieu de lire le fichier comme un binaryString, je l'ai lu comme un ArrayBuffer (ça n'a pas de conversions de codage).

4) Lorsque le fichier est lu, je transforme le ArrayBuffer dans un Uint16Array, et de stocker chaque valeur dans un tableau pour montrer sa valeur décimale sur votre zone de texte. Il montre les valeurs d'une liste de nombres décimaux séparés par des virgules.
Le premier nombre décimal sera dans ce cas sera 20617, qui est l'équivalent décimal de la 5089 hexadécimal.

5) Avant d'enregistrer le fichier, un code simple divise les valeurs décimales et les ajouter à une nouvelle Uint16Array.

Il a travaillé pour moi... C'est un peu déroutant et probablement quelqu'un aura une meilleure & approche plus efficace à l'aide de l'Api d'une autre manière.

OriginalL'auteur dbermudez