添加 img.crossOrigin = "*" 会干扰 img.complete

Question

我有一个读取地图图块图像的函数。我想跟踪某个图像是否已经被缓存。我正在使用来自this thread的这个功能：

function is_cached(src) {
    var image = new Image();
    image.src = src;

    return image.complete;
}

这工作得很好。但后来我需要做一些图像处理。为了将图像数据复制到画布并逐像素处理，我需要使用CanvasRenderingContext2D.drawImage(image, 0, 0)。但它让我感到困扰的是一个跨域错误。所以我可以添加一个image.crossOrigin = "*"，它解决了这个问题，我可以写到画布上并进行我需要的图像处理。那一点看起来像这样：

  imageOutput.crossOrigin = "*"
  var demCtx;
  imageOutput.onload = function(){
    var c = document.createElement('canvas')
    c.width = c.height = 256
    demCtx = c.getContext('2d')
    demCtx.drawImage(imageOutput, 0, 0)
    var imageData = demCtx.getImageData(0, 0, 256, 256)
  }

出现的问题是，每次我运行包含这两位代码的较大函数时，is_cached 函数每次都返回 false，除了第一次。但我知道，即使 is_cached 返回 false，图像也确实被缓存了，因为它们以 0 延迟加载（而不是在调用新图像时需要一些时间从服务器获取它）。

为什么.crossOrigin = "*" 会干扰图像的.complete 状态？

这发生在 ObservableHQ 笔记本中。这可能与它有关吗？ ObservaleHQ 有时会变得很奇怪。

ObservableHQ Notebook with the problem

您可以在底部的getTileUrl 单元格中找到此代码。这个笔记本还没写完。点击提交更改到输入的地图后，您可以在Tile Previously Cached 行看到缓存状态。

感谢阅读。

Answer 1

也许 fetch api 可以使用参数{cache:"force-cache"} 强制缓存，但是应该按预期缓存图像。您可以获取图像并将其 blob 作为图像源传递。

用

替换您的 imageOutput.src

    imageOutput.src = URL.createObjectURL(await fetch(imageUrl, {cache:"force-cache"}).then(r => r.blob()));

让你的 getTileURL 函数 async 因为我们必须等待 fetch 和 blob 准备好作为图像源传递

  async function getTileURL(latArg, lngArg, zoomArg) {

使用 devtools 检查网络并查看来自磁盘缓存的平铺图像

编辑：

只需尝试您的原始代码并通过 devtools 检查网络。切片图像按预期缓存。所以不需要破解 fetch blob src。