1

我正在使用来自 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 对象加载它，将其绘制到画布并使用 getImageData() 但它太慢（它是一个大图像） - 所以现在我正在尝试这种方法，我从负载中得到的是我假设是压缩数据，所以我的问题是 - 有没有快速的方法解压缩/膨胀此数据以获取图像像素数据，还是我尝试这个完全错误？

4

1 回答 1

2

你可以制作一个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/

于 2013-08-30T00:43:05.133 回答