0

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

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

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

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

4

1 回答 1

1

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

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

  • grayscaleCache[src]是未定义的，这意味着“没有缓存，并且任何先前的请求都没有在构建缓存” - 您需要启动缓存过程；
  • grayscaleCache[src]等于null表示“缓存正在由先前的请求构建” - 您不需要启动缓存过程，您只需等待（检查setTimeout）当缓存准备好时；
  • grayscaleCache[src]不是未定义且不是null - “缓存已准备好” - 使用缓存。
于 2012-05-30T09:48:02.163 回答