캔버스에서 이미지 데이터를 캐싱 할 수 없습니다.

이미지를 그레이 스케일로 변환하는 기능이 있습니다. 원본 이미지의 경우 URL을 가져오고 출력 캔버스를 사용하면 출력을 넣을 수 있습니다. 이 기능은 대부분의 브라우저에서 매우 빠르게 실행되지만 모바일 브라우저에서는 매우 느립니다 (700x700 이미지의 경우 ~ 3-4s). 이러한 이유로 (클라이언트에서) 그레이 스케일 이미지 데이터를 캐시하고 싶다면 이미지 요청이 여러 번 오면 캐시 된 그레이 스케일 데이터를 제공하고 다시 계산할 필요가 없습니다.캔버스에서 이미지 데이터를 캐싱 할 수 없습니다.

나는 jsfiddle에 대한 테스트를 수행했습니다. 여기에 있습니다 : http://jsfiddle.net/RCkDX/4/ 테스트 페이지에서 상단에 원형 이미지를 표시하고 하단에서 계산을 수행하는 데 사용되는 캔버스를 출력하고 두 캔버스를 중간에 출력하여 하단 이미지와 동일한 결과를 출력해야합니다 (캐시 된 데이터 제외).

순간에 'Uncaught TypeError : Type error'가 발생합니다. 캐시 데이터가 마음에 들지 않아 다른 방법을 시도했지만 아무런 행운이 없었기 때문에 생각합니다.

내가 사용하는 Android 모바일 브라우저가 현재 캔슬에 올바른 데이터가 아닌 작은 파란색 물음표 아이콘을 표시하므로 캐시 할 때 dataurls를 사용하지 않는 것이 중요하므로 dataurls가없는 모든 옵션은 작업.

출처

2012-05-29 Josh Mc

그레이 스케일 변환 기능이 느리게 실행되므로 모바일 장치에서 속도가 어떻게 저하되는지 확인하십시오. 모바일 연결 속도가 데스크톱 연결보다 느릴 수 있으므로 속도가 느려지십니까? –

Expires 서버 쪽 헤더를 사용하여 캐시 된 이미지도 있기 때문에 이미지 다운로드 속도는 확실히 아닙니다. –

업데이트 된 코드보기 : http://jsfiddle.net/RCkDX/5/ 도움이 될 수도 있습니다. –

@jezternz, 나는 returnFunc에서 매번 readyCanvas 함수가 호출되었으므로 코드에 'Uncaught TypeError: Type error'이 발생한다고 생각합니다 (차이점이 없으면 : 캐시 존재 여부와 상관 없음); 그리고 내부 readyCanvas그레이 스케일 캐시 [src]은 을 반환 할 수 있습니다. 캐시가 없으면입니다. 내 코드 예제에서는 grayscaleCache [src]이 정의 된 경우에만 (캐시가 생성되고 저장되는 경우) returnFunc에서 호출 된 readyCanvas이 호출됩니다 (jsfiddle.net/RCkDX/5). 내 코드에서 setTimeout을 삭제했습니다. 주된 이유 : 단순화를 위해.

블로킹 페이지가없는 코드 (고정 UI 없음)를 작성해야하는 경우 캐시 관리를 위해 더 복잡한 코드를 제공해야합니다. 예를 들면 :

grayscaleCache [SRC]이 을 의미 정의되지 않은입니다는 "더 캐시와 캐시가 이전 요청에 의해 건설하지 않습니다"- 캐싱 절차를 시작해야합니다;
grayscaleCache가 [SRC]이 널 "캐시가 이전의 요청에 의해 건설중인"을 의미 같음 - 당신은, 당신은 단지 기다려야합니다 캐싱 절차를 시작해야 그나마 캐시는 (에서는 setTimeout 확인) 준비된; 사용 캐시 - "캐시 준비입니다"-
는 grayscaleCache [SRC]은 정의되지 않은하지 널이 없습니다.

출처

2012-05-30 09:48:02

캔버스에서 이미지 데이터를 캐싱 할 수 없습니다.

답변

관련 문제