文件 API 不适用于 Google Chrome 扩展程序中的 Blob

Question

我正在为 Google Chrome 编写一个扩展程序，我需要在其中下载页面图像并将它们保存在磁盘上的临时文件中。为此，我创建了一个 XMLHttpRequest 并使用它来下载图像。在回调函数中，当我在 request.response 中有图像时，我使用 window.webkitRequestFileSystem(window.TEMPORARY, 1024 * 1024 * 20, writeImageToFile, errorHandler) 从 Windows 请求一个临时文件。在回调函数 writeImageToFile 中，我创建了 FileWriter 对象并将 blob 写入其中。该文件正在创建，但我无法找到它的创建位置。我需要扩展文件的 Windows 路径。请帮忙！

Answer 1

出于您的目的，您不需要虚拟文件系统。使用 webkitURL.createObjectURL 方法从 blob 创建 URL：

window.webkitURL.createObjectURL(blob);

从Chrome 19开始，可以直接使用responseType获取Blob对象：

var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function() {
    // xhr.response is a Blob
    var url = webkitURL.createObjectURL(xhr.response);
    console.log('URL: ', url);
};
xhr.open('GET', 'http://example.com/favicon.ico');
xhr.send();

从 Chrome 10 开始，您可以获得ArrayBuffer 响应，并将其转换为 blob (demo)：

var xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';
xhr.onload = function() {
    // Create blob from arraybuffer
    var bb = new (window.BlobBuilder || window.WebKitBlobBuilder)();
    bb.append(xhr.response);
    var url = webkitURL.createObjectURL(bb.getBlob());
    console.log('URL: ', url);
};
xhr.open('GET', 'http://example.com/favicon.ico');
xhr.send();

（如果您想对 Firefox 使用相同的代码，请使用 window.URL 和 MozBlobBuilder）。