添加img.crossOrigin ="*"干扰img.complete [英] Adding img.crossOrigin = "*" interferes with img.complete

问题描述

我有一个读取地图图块图像的功能.我想跟踪某个图像是否已经被缓存.我正在使用此线程中的此功能:

I have a function that reads map tile images. I want to keep track of whether or not a certain image has already been cached. I'm using this function from this thread:

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

    return image.complete;
}

这很好.但是然后我需要做一些图像处理.为了将图像数据复制到画布并按像素进行处理，我需要使用 CanvasRenderingContext2D.drawImage(image，0，0).但这使我错了一个跨域错误.因此，我可以添加一个 image.crossOrigin ="*" ，它可以解决该问题，并且可以写到画布上并进行所需的图像处理.那看起来像这样:

This was working great. But then I needed to do some image processing. In order to copy the image data to a canvas and process it pixel by pixel, I need to use CanvasRenderingContext2D.drawImage(image, 0, 0). But it bugs me with a cross-origin error. So I can add a image.crossOrigin = "*", which solves that problem, and I can write to a canvas and do the image processing I need. That bit looks like this:

  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的延迟加载(与调用一个新颖的图像相反，这需要一些时间才能从中获取图像)服务器).

The issue that arises is that every time I run the larger function which contains these two bits of code, the is_cached function returns false every time, except the first time. But I know that even though is_cached is returning false, the images are indeed cached, as they are loading with 0 lag (as opposed to when a novel image is called and it takes a moment to grab it from the server).

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

Why might .crossOrigin = "*" be interfering with the .complete status of an image?

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

This is happening within an ObservableHQ notebook. Might that have something to do with it? ObservaleHQ gets weird sometimes.

您可以在底部的 getTileUrl 单元格中找到此代码.该笔记本尚未完成.在地图周围单击提交更改到输入之后，您可以在之前的缓存行中看到缓存的状态.

You can find this code in the getTileUrl cell at the bottom. This notebook is not yet finished. You can see the cached status at the Tile Previously Cached line after you click around the map of submit changes to the inputs.

感谢阅读.

推荐答案

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

Maybe fetch api can enforce cache using the param {cache:"force-cache"}, however images should be cached as expected. You can fetch the image and pass its blob as an image source.

用

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

使您的 getTileURL 函数 async 成为必需，因为我们必须等待提取和Blob才能准备好作为图像源传递

make your getTileURL function async as we have to await fetch and blob to be ready to be passed as image source

  async function getTileURL(latArg, lngArg, zoomArg) {

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

Use devtools to inspect network and see tile images coming from disk cache

只需尝试使用原始代码并通过devtools检查网络.切片图像将按预期进行缓存.因此，无需入侵获取blob src.

just try your original code and inspect network via devtools. The tiles images are cache as expected. So no need to hack into fetch blob src.

这篇关于添加img.crossOrigin ="*"干扰img.complete的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！