javascript - 如何获取使用 XMLHttpRequest (XHR2) 下载的 PNG 的像素数据

Question

我使用的代码来自 https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data

var oReq = new XMLHttpRequest();
oReq.open("GET", "/myfile.png", true);
oReq.responseType = "arraybuffer";

oReq.onload = function (oEvent) {
  var arrayBuffer = oReq.response; // Note: not oReq.responseText
  if (arrayBuffer) {
    var byteArray = new Uint8Array(arrayBuffer);
    for (var i = 0; i < byteArray.byteLength; i++) {
      // do something with each byte in the array
    }
  }
};

oReq.send(null);

我正在使用它下载一个 png 文件，然后我想将其显示在 Canvas 元素中。我意识到有更简单的方法可以做到这一点，但我需要能够操纵像素，所以我真的很想将像素数据放在 TypedArray 中，我也尝试使用常规 DOM Image 对象加载它，将其绘制到canvas 并使用 getImageData() 但它太慢了(它是一个大图像) - 所以现在我正在尝试这种方法，我从负载中得到的是我假设的压缩数据，所以我的问题是 - 有没有一种快速的方法解压缩/膨胀此数据以获得图像像素数据，或者我尝试这个完全错误？

Answer 1

你可以制作一个base64并设置为图像的src...如下所示

var oReq = new XMLHttpRequest();
oReq.open("GET", "https://npmjs.org/static/npm.png", true);
oReq.responseType = "arraybuffer";

oReq.onload = function (oEvent) {

  var arrayBuffer = oReq.response; // Note: not oReq.responseText
  var binaryString = '';

  if (arrayBuffer) {

    var byteArray = new Uint8Array(arrayBuffer);

    for (var i = 0; i < byteArray.byteLength; i++) {

      binaryString += String.fromCharCode( byteArray [ i ] ); //extracting the bytes

    }

    var base64 = window.btoa( binaryString ); //creating base64 string


    img.src = "data:image/png;base64," + base64; //creating a base64 uri

  }
};

oReq.send(null);

一个正在工作的 jsfiddle... -> http://jsfiddle.net/Castrolol/mHv4b/