无法从画布缓存图像数据

Unable to caching image data from canvas

本文关键字：缓存 图像 数据 布缓存      更新时间：2023-09-26

所以我有一个将图像转换为灰度的函数。它接收原始图像的 url，以及要将输出放入的输出画布。该功能在大多数浏览器上运行得非常快，但在移动浏览器上运行得非常慢（700x700 图像为 ~3-4 秒）。出于这个原因，我想缓存（在客户端上）灰度图像数据，然后当多次请求图像时，我想提供缓存的灰度数据，而不必重新计算它。

我已经在jsfiddle上进行了测试。这是：http://jsfiddle.net/RCkDX/4/在测试页面中，我在顶部显示原始图像，我在底部输出用于进行计算的画布，中间的两个画布应该输出与底部图像相同的图像（缓存数据除外）。

目前我收到"未捕获的类型错误：类型错误"，我认为是因为它似乎不喜欢缓存数据，我尝试过移动东西，尝试不同的方法，但没有任何运气。

重要的是我不要使用数据网址进行缓存，因为我使用的 android 移动浏览器目前会显示一个小的蓝色问号图标（画布上不是正确的数据），因此任何没有数据网址的选项都可以使用。

@jezternz，我认为你的代码中'Uncaught TypeError: Type error'发生是因为每次readyCanvas从returnFunc调用的函数（没有区别：缓存是否存在）;如果没有缓存，readyCanvas grayscaleCache[src]可以返回未定义。在我的代码示例 （jsfiddle.net/RCkDX/5） 中，只有在定义了 grayscaleCache[src] （构造并保存缓存）时，readyCanvas从returnFunc调用。从我的代码中删除了setTimeout.主要原因：以简化为例。

如果需要生成没有阻塞页（没有冻结 UI）的代码，则必须提供更复杂的代码来管理缓存。例如：

  • grayscaleCache[src] 是未定义的，这意味着"没有缓存并且缓存未被任何先前的请求构建" - 您需要启动缓存过程;
  • grayscaleCache[src] 等于 null，表示"缓存正在根据先前的请求构建中" - 您不需要启动缓存过程，您只需在缓存准备就绪时等待（使用 setTimeout 检查）;
  • grayscaleCache[src] 不是未定义的，也不是空的 - "cache is ready" - 使用缓存。
相关文章：