Javascript 从负载XHR post请求中提取图像

我正在写一个chrome扩展，它应该在上传图片之前通过一个网站的post请求获得图片

我所做的是创建了一个

XMLHttpRequest钩子

。每当发生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();
}

回调中的此.data

包含请求的数据。它的类型是arraybuffer

问题是，当我将这个缓冲区转换成一个blob并试图渲染图像时，它总是被破坏。我的头撞在墙上

我检查了，图像二进制文件总是在

请求负载中发送。附截图

我做错什么了吗？为什么arraybuffer总是导致图像损坏？是否有一种方法可以监视正在发送的负载并从中提取图像？
请求可能发送的不仅仅是图像。。。这是一个多部分请求，因此您必须首先在边界处拆分它以获得各个部分…@CBroe这就是我的想法。你能帮我从哪里开始吗？实际上，我对组成多部分请求的部分不是很熟悉，通常这将在服务器上完成，而不是在客户端JavaScript中完成。但是，如果您研究如何使用服务器端JavaScript（node.js）实现这一点，这可能会给出一些关于如何实现这一点的提示。