强制Ajax获得缓存版本

Question

我正在创建Google-Chrome扩展程序，我希望能够提取一些网站正在加载的图片并将其放入扩展程序中。在某些情况下，这可能会导致对服务器的大量请求，从而有效地降低服务器的速度。当用户访问页面时加载这些图像，因此扩展不需要再次请求图像。有没有办法在不从服务器再次提取数据的情况下获取数据？

Answer 1

使用binary Ajax，您可以将图片作为Blob对象提取，FileReader可以转换为base64网址字符串。

1. 以ArrayBuffer的形式获取图片的二进制数据，并将其存储在Blob中：

   var oReq = new XMLHttpRequest();
   oReq.open("GET", "/myfile.png", true);
   oReq.responseType = "arraybuffer";
   
   oReq.onload = function(oEvent) {
     var blob = new Blob([oReq.response], {type: "image/png"});
     // step 2 goes here...
   };
   
   oReq.send();
   

   （根据规范，您也可以oReq.responseType = "blob"立即oReq.response Blob而不是ArrayBuffer。我不是100％肯定是否这实际上已得到支持。）

2. 使用Blob：

   阅读FileReader

   var fr = new FileReader();
   fr.onload = function(e) {
       var dataUrl = e.target.result;
       // step 3 goes here...
   }
   fr.readAsDataURL(blob);
   

3. 最后，您将网址存储在dataUrl中。将其直接分配给图像元素的src属性：

   document.getElementById("myimg").src = dataUrl;
   

   为避免将来执行提取，请将数据URL存储在localStorage或IndexedDB存储中。