無法從畫布緩存圖像數據

Question

因此，我有一個將圖像轉換為灰度的函數。 它接受原始圖像的url，以及將輸出放置到其上的輸出畫布。 該功能在大多數瀏覽器上運行非常快，但在移動瀏覽器上運行非常慢（對於700x700圖像，此速度約為3-4秒）。 因此，我想緩存（在客戶端上）灰度圖像數據，然后在多次請求圖像時，我想提供緩存的灰度數據，而不必重新計算。

我已經對jsfiddle進行了測試。 它是這樣的： http : //jsfiddle.net/RCkDX/4/在測試頁面中，我在頂部顯示原始圖像，在底部輸出用於進行計算的畫布，在底部顯示兩個畫布。中間，它們應輸出與底部圖像相同的圖像（緩存數據除外）。

目前，我收到一個“未捕獲的TypeError：類型錯誤”，我認為是因為它似乎不喜歡緩存數據，所以我嘗試了四處移動，嘗試了不同的方法，但是沒有任何運氣。

重要的是，我不要使用dataurls進行緩存，因為我正在使用的android移動瀏覽器會在此時顯示一個藍色的問號圖標（不是畫布上的正確數據），因此沒有dataurls的任何選項都可以使用。

Answer 1

@jezternz，我認為您的代碼中發生'Uncaught TypeError: Type error' ，因為readyCanvas從returnFunc調用readyCanvas函數（無區別：緩存是否存在）； 如果沒有緩存，則在readyCanvas grayscaleCache [src]中可以返回未定義 。 在我的代碼示例（ jsfiddle.net/RCkDX/5 ）中，僅在定義grayscaleCache [src] （構造並保存緩存）的readyCanvas從readyCanvas調用returnFunc 。 從我的代碼中刪除setTimeout 。 主要原因：為簡化示例。

如果您需要構建沒有阻止頁面的代碼（沒有凍結UI），則必須提供更復雜的代碼來管理緩存。 例如：

• grayscaleCache [src] 未定義 ，表示“沒有高速緩存，並且任何先前的請求都未在構建高速緩存” -您需要啟動高速緩存過程；
• grayscaleCache [src]等於null ，表示“高速緩存正在由先前的請求構建” -您不需要啟動高速緩存過程，僅在高速緩存就緒時才等待（與setTimeout一起檢查）；
• grayscaleCache [src]不是未定義且不為null- “緩存已准備就緒” -使用緩存。