Javascript 无法从画布缓存图像数据

我有一个函数，可以把图像转换成灰度。 它接收原始图像的url，以及将输出放到其中的输出画布。 该功能在大多数浏览器上运行得非常快，但在移动浏览器上运行得非常慢（700x700图像的运行速度约为3-4s）。因此，我希望缓存（在客户端上）灰度图像数据，然后当图像请求多次出现时，我希望提供缓存的灰度数据，而不必重新计算它

我在JSFIDLE上做了一个测试。这是： 在测试页面中，我在顶部显示原始图像，输出在底部进行计算的画布和中间的两个画布，它们应该输出与底部图像相同的数据（除了缓存数据）。 现在我得到了一个“UncaughtTypeError:TypeError”，我认为这是因为它似乎不喜欢缓存数据，我尝试了移动东西，尝试了不同的方法，但没有任何运气

---

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

@jezternz，我认为您的代码中出现了

'uncaughttypeerror:Type error'

，因为每次都从

returnFunc

调用

readyCanvas

函数（没有区别：缓存是否存在）；如果没有缓存，则内部

readyCanvas

grayscaleCache[src]可以返回未定义。在我的代码示例中（）

readyCanvas

仅在定义了grayscaleCache[src]时从

returnFunc

调用（缓存被构造并保存）。 从我的代码中删除

setTimeout

。主要原因：例如

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

• grayscaleCache[src]未定义，这意味着“没有缓存，并且缓存未根据任何先前的请求进行构建”-您需要启动缓存过程
• grayscaleCache[src]等于null，表示“缓存正在根据以前的请求进行构造”-您不需要启动缓存过程，您只需在缓存就绪时等待（使用setTimeout检查）
• grayscaleCache[src]不是未定义的，也不是null-“缓存已准备就绪”-使用缓存

---

您确定由于灰度转换功能运行缓慢，移动设备会发生什么样的速度损失吗。你可能会因为移动连接速度比桌面连接慢而失去速度？这绝对不是图像下载速度，因为我甚至使用Expires服务器端头缓存了图像。请参阅更新代码：也许它可以帮助你。太棒了，非常感谢！把它作为一个答案贴出来，我会接受的，我不清楚这有什么区别，你能指出吗？我还看到在你的版本中没有超时，我这样做的原因是，在处理过程中UI不会冻结，是计时器阻止了我的原始代码工作吗？