Не може да се кешират данни за изображение от платно

Така че имам функция, която преобразува изображение в нива на сивото. Взема URL адрес за оригиналното изображение и изходно платно, върху което да постави изхода. Функцията работи много бързо на повечето браузъри, но много бавно на мобилните браузъри (~3-4s за изображение 700x700). Поради тази причина искам да кеширам (на клиента) данните за изображението в сивата скала, след което, когато заявка за изображението дойде няколко пъти, искам да обслужвам кешираните данни в сивата скала и да не се налага да ги преизчислявам.

Направих тест на jsfiddle. Ето го: http://jsfiddle.net/RCkDX/4/ В тестовата страница, която показвам оригиналното изображение в горната част, извеждам платното, което се използва за извършване на изчислението в долната част и двете платна в средата, те трябва да извеждат същото като долното изображение (освен с кеширани данни).

В момента получавам „Uncaught TypeError: Type error“, мисля, че това е, защото изглежда не харесва данните от кеша, опитах да преместя нещата, опитвайки различни методи, но нямах късмет.

Важно е да не използвам dataurls за кеширане, тъй като мобилният браузър на android, който използвам, ще покаже малка синя икона на въпросителен знак в момента (не са правилните данни на платното), така че всяка опция без dataurls ще работи.


person Josh Mc    schedule 29.05.2012    source източник
comment
Сигурни ли сте каква загуба на скорост на мобилните устройства възниква, защото функцията за преобразуване на сивата скала работи бавно. Може би сте загубили скорост, защото скоростта на мобилната връзка може да бъде по-бавна от връзката с настолен компютър?   -  person Andrew D.    schedule 29.05.2012
comment
Това определено не е скоростта на изтегляне на изображения, тъй като дори имам кеширани изображения с помощта на заглавката Expires от страна на сървъра.   -  person Josh Mc    schedule 29.05.2012
comment
Вижте актуализиран код: jsfiddle.net/RCkDX/5 Може би може да ви помогне.   -  person Andrew D.    schedule 29.05.2012
comment
Страхотно благодаря ти много! Публикувайте го като отговор и аз ще приема. За мен не е очевидно каква е разликата, която прави тази работа, бихте ли могли да я посочите? Също така виждам, че във вашата версия няма изчакване, причината, поради която имах това, е, че потребителският интерфейс не замръзва, докато извършва обработката, дали таймерите спират работата на моя оригинален код?   -  person Josh Mc    schedule 30.05.2012


Отговори (1)


@jezternz, мисля, че 'Uncaught TypeError: Type error' във вашия код се появява, защото readyCanvas функцията се извиква от returnFunc всеки път (няма разлика: кешът съществува или не); и вътре readyCanvas grayscaleCache[src] може да върне undefined, ако няма кеш. В моя пример за код (jsfiddle.net/RCkDX/5) readyCanvas се извиква от returnFunc само ако grayscaleCache [src] е дефиниран (кешът е конструиран и запазен). От моя код премахнат setTimeout. Основна причина: за опростен пример.

Ако трябва да създадете код без блокираща страница (без замразен потребителски интерфейс), трябва да предоставите по-сложен код за управление на кеша. Например:

  • grayscaleCache[src] е недефиниран, което означава "няма кеш и кешът не е в процес на изграждане от предишна заявка" - трябва да започнете процедурата за кеширане ;
  • grayscaleCache[src] е равно на null, което означава "кешът е в процес на изграждане от предишна заявка" - не е необходимо да стартирате процедура за кеширане, трябва само изчакайте (проверете с setTimeout), когато кешът е готов;
  • grayscaleCache[src] не е undefined и не е null - "кешът е готов" - използвайте кеша.
person Andrew D.    schedule 30.05.2012