从有效负载XHR发布请求中提取图像

Question

我正在编写一个chrome扩展程序，它应该在使用网站发布的请求上传之前获取图像。

我正在做的是我创建了一个XMLHttpRequest hook。每当post发出特定请求时，都会调用回调，并且我可以访问所请求的数据。这是我的代码。

var s_ajaxListener = new Object();
s_ajaxListener.tempOpen = XMLHttpRequest.prototype.open;
s_ajaxListener.tempSend = XMLHttpRequest.prototype.send;
s_ajaxListener.callback = function () {
  // this.method :the ajax method used
  // this.url    :the url of the requested script (including query string, if any) (urlencoded) 
  // this.data   :the data sent, if any ex: foo=bar&a=b (urlencoded)
}

XMLHttpRequest.prototype.open = function(a,b) {
  if (!a) var a='';
  if (!b) var b='';
  s_ajaxListener.tempOpen.apply(this, arguments);
  s_ajaxListener.method = a;  
  s_ajaxListener.url = b;
  console.log(this);
  if (a.toLowerCase() == 'get') {
    s_ajaxListener.data = b.split('?');
    s_ajaxListener.data = s_ajaxListener.data[1];
  }
}

XMLHttpRequest.prototype.send = function(a,b) {
  if (!a) var a='';
  if (!b) var b='';
  s_ajaxListener.tempSend.apply(this, arguments);
  if(s_ajaxListener.method.toLowerCase() == 'post')s_ajaxListener.data = a;
  s_ajaxListener.callback();
}

回调中的

this.data具有请求的数据。它的类型是arraybuffer。

问题在于，当我将此缓冲区转换为blob并尝试渲染图像时，它总是会被破坏。我正撞在墙上。

我检查过，图像二进制文件始终在Request Payload中发送。屏幕截图附有

我做错了吗？为什么arraybuffer总会导致图像损坏？有没有办法监控发送的有效负载并从那里提取图像？