javascript - 如何在没有 HTTP 请求的情况下使用不应缓存的 src 复制 img 标签？

Question

所以我有一个 <img>在我的页面上标记。

<img id="the_image" src="/imageServlet">

让我们假设/imageServlet 使用一些 HTTP 响应 header 进行响应，这些 header 指示浏览器永远不应缓存此图像。在这种情况下，原因是图像可能包含敏感的员工信息，并且某些国家/地区的法律规定浏览器不应(未经用户同意)将图像保存在客户端的硬盘上，以防机器被盗。我相信响应 header 是 Cache-Control: no-cache

我真正想做的就是复制这个图像标签，但我不想为这个图像发出另一个 HTTP 请求。

我的应用程序是一个页面，我使用 javascript 动态地显示这些图像标签 - 但现在我想在多个地方显示同一张图像。例如，图像可以是用户个人资料图片的缩略图版本。在一个地方，我将缩略图显示为一个小列表，然后当您单击该用户时，我会在弹出窗口中显示相同的图像。

每次我创建一个新的<img>使用此 src 标记，浏览器将重新调用服务器以检索图像。我不在乎用户是否在浏览器上按下“刷新”并且应该加载该图像的新 HTTP 请求 - 但在单个页面加载中，图像数据不应该在内存中可用，所以我不能重用这个？

我该如何解决这个问题？这极大地影响了页面的性能，图像在多个地方重复使用和显示，并且每次都需要重新加载(即使用户没有导航到任何其他页面或刷新浏览器)。

这是我刚刚编写的一些代码，其中任何时候应用程序想要加载图像时都会调用“loadImage”，最终会使用它可以自由使用的一些 HTML 元素调用回调。这个想法是这个中心函数将创建图像，但它会确保对于任何独特的 src只会发出一个 HTTP 请求 - 无论 HTTP 响应 header 是否包含 Cache-Control: no-cache还是不是。

(function(){
  var HANDLERS = {};

  /**
   * I want to keep around a cached "Image" then the "callback" will be called with a
   * duplicate somehow - whatever comes back from here can be inserted somewhere, but
   * hopefully no additional HTTP requests needs to be made!!
   * @param {Image} img
   * @return {Image} A copy of the incoming img
   */
  function duplicateImage(img) {
    // Does not work!! D'oh, is this even possible to achieve??
    return img.cloneNode(true);
  }

  /**
   * Users can call this to load the image. The callback is called when the image is ready.
   * In case the image fails the callback will be given an object that contains a success flag.
   * 
   * Example:
   * loadImage('/imageServlet?xxxx', function(result) {
   *   if (result.success) { $(body).append(result.image); }
   *   else { console.log("The image failed to load!") }
   * });
   * 
   * @param {string} src The src for the image
   * @param {function({success:boolean, image:Image})} callback Give a callback to be called when ready
   */
  window.loadImage = function(src, callback) {
    if (!HANDLERS[src]) {
      var queue = [];

      // This loadImage can be called more than once with the same src
      // before the image has successfully loaded. We will queue up any
      // callbacks and call them later, then replace this with function
      // that will directly invoke the callback later.
      HANDLERS[src] = function(callback) {
        queue.push(callback);
      }

      // Create the image here, but do it only once!!
      var el = new Image();

      // When the image loads, we will keep it around in the el
      // variable, but the callback will be called with a copy
      el.onload = function() {
        el.onload = el.onerror = null;
        var call = HANDLERS[src] = function(callback) {
          callback({
            success: true,
            image: duplicateImage(el) // This is where the image is duplicated!
          });
        }
        for (var i=0; i<queue.length; i++) {
          call(queue[i]);
        }
      }

      // This is just in case the image fails to load. Call any
      // queued callbacks with the success false.
      el.onerror = function() {
        el.onload = el.onerror = null;
        var call = HANDLERS[src] = function(callback) {
          callback({success: false});
        }
        for (var i=0; i<queue.length; i++) {
          call(queue[i]);
        }
      }
      el.src = src;
    }
    HANDLERS[src](callback);
  }
})();

Answer 1

当页面开始获取图像数据时尝试 ajax 调用，并将其分配给您要将该数据“复制”到的图像的“src”。

$.ajax({
    type: "GET",
    url: 'some url',
    datatype:"image/jpg",
        success: function (data) {
            $('#img1').attr('src', url.createObjectURL(data));
            $('#img2').attr('src', url.createObjectURL(data));
        }
});

因为这会将实际图像写入“src”字段，而不是链接，您稍后可以将此图像从一个控件复制到另一个控件，而无需向服务器发出更多请求，非常简单:

$('#img3').attr('src', $('#img2').attr('src'));

非 jQuery 版本

function myAjax() {
    var xmlHttp = new XMLHttpRequest();
    var url="some url";
    xmlHttp.open("GET", url, true);
    xmlHttp.setRequestHeader("Content-type", "image/jpg");
    xmlHttp.setRequestHeader("Connection", "close");
    xmlHttp.onreadystatechange = function() {
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            document.getElementById('img1').setAttribute('src', xmlHttp.responseBinary);
        }
    }
    xmlHttp.send();
}