Lesen binärer Daten aus einem Bild und speichern Sie es mit JavaScript

Ich habe getestet dieses code auf Ihrer fiddle und es hat funktioniert wie ein 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);
  }

Ich bin kein Experte auf dem neuen HTML5 APIs, aber ich werde versuchen zu erklären, etwas, was ich getan habe.

1) ich habe gespart PNG auf der Festplatte. (Foto.png)

2) Wenn Sie Linux haben, können Sie sehen den Inhalt der Datei in hexadezimal-format mit diesem Befehl od -cx photo.png. Wenn nicht, müssen Sie einige hexadezimal-editor.

Den ersten Zeilen von Foto.png-Datei im hexadezimal-show so etwas wie dieses:

       211   P   N   G  \r  \n 032  \n  \0  \0  \0  \r   I   H   D   R

       5089    474e    0a0d    0a1a    0000    0d00    4849    5244

Jedes paar von zahlen in der zweiten Zeile stellen die hexadezimale Kodierung das symbol oben: 5089 ist die Kodifizierung der 211 S., 50 ist der hex-Wert für P und 89 für 211 (little-endian-Kodifizierung, die ersten zwei bytes kodiert, das zweite symbol, die letzten zwei kodiert, das erste symbol)

3) Anstelle der Lesen Sie die Datei als binaryString lese ich es als eine ArrayBuffer (es macht nicht die Kodierung Konvertierungen).

4), Wenn die Datei gelesen wird, gestalte ich die ArrayBuffer in eine Uint16Array, und speichern Sie jeden Wert in einem array zu zeigen, decimal-Wert auf Ihre text-Bereich. Es zeigt die Werte als eine Liste von Dezimalzahlen, getrennt durch ein Komma.
Die erste Dezimalzahl wird in diesem Fall 20617, die die dezimale Entsprechung für das 5089 hexadezimal.

5) Vor dem speichern der Datei, einige einfache code teilt die dezimal-Werte und fügen Sie Sie eine neue Uint16Array.

Es funktionierte für mich... Es ist ein bisschen verwirrend und vermutlich auch jemand eine bessere & effizienter Umgang mit den APIs in einer anderen Art und Weise.