从图像中读取二进制数据并用JavaScript保存

我想读取图像的二进制数据，然后用JavaScript再次将其保存到本地磁盘

我编写了一个小演示，展示了这个用例。要读取文件，我使用文件读取器API（HTML5）获取二进制数据

我将二进制字符串写入一个文本字段，然后从中再次读取数据并将其写入文件。如果我保存文件，我的图像（我测试了几个JPEG）会被破坏，因此你看不到任何有用的东西

“readAsBinaryString”进行的转换是否会导致二进制数据不正确

为了查看我的演示应用程序，我制作了一个。主要部分从这里开始：

reader.readAsBinaryString(file);

---

我已经在你的小提琴上测试了这段代码，它的效果非常好：

  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);
  }

第二行中的每对数字代表上述符号的十六进制编码：5089是211 p的编码，50是p的十六进制值，89是211的十六进制值（小端编码，前两个字节编码第二个符号，后两个字节编码第一个符号）

3） 我没有将文件作为

二进制字符串

读取，而是将其作为

数组缓冲文件

读取（它不进行编码转换）

4） 读取文件时，我将

ArrayBuffer

转换为

Uint16Array

，并将每个值存储在一个数组中，以在文本区域显示其十进制值。它以逗号分隔的十进制数字列表形式显示值。 在这种情况下，第一个十进制数将是20617，这是5089十六进制的十进制等价物

5） 在保存文件之前，一些简单的代码会拆分十进制值，并将它们添加到新的

uint16数组中

它对我有用。。。这有点让人困惑，可能有人会以另一种方式使用API获得更好、更高效的方法。
非常感谢您提供了这一伟大而详细的答案！我只是在Windows8上用一个十六进制编辑器追踪了一切。它工作得很好！甚至JPEG文件也可以读写。我已经修改了我的小提琴，这样每个人都可以看到解决方案：-非常感谢！那把小提琴破坏了我在拯救中的形象。这对你仍然有效吗？对不起，克里斯蒂安，我直到几天前才看到你的问题。如果你看看Benny的小提琴，你会发现它的js代码与我建议的不同。如果你用这把小提琴，我希望你会发现它很好用。对不起，有点晚了：）
       211   P   N   G  \r  \n 032  \n  \0  \0  \0  \r   I   H   D   R

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