Firefox SDK 错误“图像包含错误，无法显示”答案

【问题标题】：Firefox SDK Error "Image contains errors and cannot be displayed"Firefox SDK 错误“图像包含错误，无法显示”
【发布时间】：2015-03-29 21:34:06
【问题描述】：

我正在为 Mozilla Firefox 开发一个扩展，我用我自己的覆盖本地侦听器并监视所有 HTTP 请求，如下面的帖子所示： http://www.softwareishard.com/blog/firebug/nsitraceablechannel-intercept-http-traffic/

我监视那些驻留在特定域下的请求，并使用我从自己的 XMLHTTPRequest 接收到的响应正文更改其相应的响应正文。对于文本文件，一切正常。

但是，我在下载图像时遇到了问题。由于某种原因，当我将传入的数据写入流中，然后尝试打开图像时，出现图像包含错误且无法显示的错误。

我可能做错了什么？

更新：我提供了一些代码，以阐明我的方法。



    var xmlRequest = Cc['@mozilla.org/xmlextras/xmlhttprequest;1'].createInstance(Ci.nsIXMLHttpRequest);
    ...
    xmlRequest.open('GET', xmlRequestURL, false);
    xmlRequest.send(null);

    function TracingListener() {}

    TracingListener.prototype = {
      originalListener: null,

      onStartRequest: function (request, context) {
        httpChannel = request.QueryInterface(Ci.nsIHttpChannel);
        requestURL = httpChannel.URI.spec;

        try {
          this.originalListener.onStartRequest(request, context);
        } 
        catch (ex) {
          request.cancel(ex);
        }
      },

      onDataAvailable: function (request, context, inputStream, offset, count) {
        httpChannel = request.QueryInterface(Ci.nsIHttpChannel);
        requestURL = httpChannel.URI.spec;

        //Read the contents from the stream, but ignore them.
        var binaryInputStream = CCIN('@mozilla.org/binaryinputstream;1', 'nsIBinaryInputStream');
        binaryInputStream.setInputStream(inputStream);

        var binaryOutputStream = CCIN('@mozilla.org/binaryoutputstream;1', 'nsIBinaryOutputStream');
        var data = binaryInputStream.readBytes(count);

        //Delay the call to the original listener.
      },

      onStopRequest: function (request, context, statusCode) {
        httpChannel = request.QueryInterface(Ci.nsIHttpChannel);
        requestURL = httpChannel.URI.spec;

        //Check if the response is successful.
        if(xmlRequest.status == 200) {
          try {
            var responseLen = xmlRequest.getResponseHeader("Content-Length");
            var response = xmlRequest.response;

            var storageStream = CCIN('@mozilla.org/storagestream;1', 'nsIStorageStream');
            storageStream.init(8192, responseLen, null);

            var binaryOutputStream = CCIN('@mozilla.org/binaryoutputstream;1', 'nsIBinaryOutputStream');
            binaryOutputStream.setOutputStream(storageStream.getOutputStream(0));

            binaryOutputStream.writeBytes(response, responseLen);

            //Make the call to the original listener.
            this.originalListener.onDataAvailable(request, context, storageStream.newInputStream(0), 0, responseLen);
          }
          catch (e) {
            dumpError(e);
          }

          //Pass it to the original listener
          this.originalListener.onStopRequest(request, context, statusCode);
        }
        else {
          console.log('[INFO] onStopRequest not processed, status is ' + xmlRequest.status + ', for URL: ' + requestURL);
        }
      }
    }

    var observer = {
      httpRequestObserver: {
        observe: function (request, aTopic, aData) {
          httpChannel = request.QueryInterface(Ci.nsIHttpChannel);
          requestURL = httpChannel.URI.spec;

          if(mustBeMonitored(requestURL)) {
            console.log('[INFO] Observing URL: ' + requestURL);

            if (aTopic == 'http-on-modify-request') {
              console.log('[INFO] ' + aTopic + ' for URL: ' + requestURL);

              var newListener = new TracingListener();
              request.QueryInterface(Ci.nsITraceableChannel);
              newListener.originalListener = request.setNewListener(newListener);
            }
          }
        },

        register: function () {
          observerService.addObserver(observer.httpRequestObserver, 'http-on-modify-request', false);
        },
        unregister: function () {
          observerService.removeObserver(observer.httpRequestObserver, 'http-on-modify-request');
        },

        QueryInterface: function (aIID) {
          /*if (typeof Cc == "undefined") {
             var Cc = components.classes;
          }
          if (typeof Ci == "undefined") {
             var Ci = components.interfaces;
          }*/

          if (aIID.equals(Ci.nsIObserver) || aIID.equals(Ci.nsISupports))
             return this;
          throw components.results.NS_NOINTERFACE;
        }
      }
    };

【问题讨论】：

没有代码，不可能正确地帮助你。
我用一些示例代码更新了我的帖子。

标签： javascript image firefox xmlhttprequest add-on

【解决方案1】：

最后，我能够检测到问题。对于 XMLHttpRequest，我必须指定它的响应类型如下：

xmlRequest.responseType = 'arraybuffer';

然后，响应存储在 JavaScript ArrayBuffer 中，我必须将其转换为 Uint8Array，然后将其存储到流中。

此解决方案适用于二进制文件和文本文件。

【讨论】：