클라이언트 저장소에 이미지 데이터 저장 : 캔버스 대 xhr, blob 대 배열 버퍼

Question

저장 부분이 완료되는 동안 웹 응용 프로그램을 캐싱하고 오프라인 모드로 이미지를 표시하려고합니다 (기본값은 IndexedDB로, 특정 경우 장치)를 사용하는 경우 다음과 같은 경우 확실하지 않습니다.

1. Canvas 또는 XHR은 이미지 데이터를 가져 오는 데 더 좋은 옵션입니다.

2. 이미지 데이터를 저장하는 데 Blob 또는 ArrayBuffer를 사용하는 것이 더 좋습니다.

3. 이 두 가지 질문에 대한 대안이 있는지 나는 잘 모르겠다.

비슷한 주제를 둘러싼 유래에 많은 토론 (참고 1, 2을)이 있습니다. 그러나 2012 년 FileSystem API가 더 이상 사용되지 않고 IndexedDB 지원이 널리 보급되지 않았던 많은 사람들에게 질문을 받았습니다.

지금은 2014입니다. WebSQL에 대한 몇 가지 고려 사항과 함께 IndexedDB 저장소에 대한 최종/우수 사례에 대한 답변을 원합니다. Q1의 경우

:는 아래 (2014.09 현재) 내 연구이다 방법은 별도의 요청의 장점이있다

• 캔버스하지만 toBlob 방법은 dataUrl 사이의 대부분의 브라우저 변환을 지원하지 않습니다 및 Blob은 CPU를 많이 사용합니다. 또한 이미지 메타 데이터가 손실되어 교차 출처 문제를 처리해야합니다. 이미 브라우저 캐시하지 않는

• XHR 방법 피할 캔버스의 단점하지만, 모든 이미지에 대한 추가 요청을 소개합니다. xhr2를 지원하는 최신 브라우저는 Blob 또는 ArrayBuffer로 이진 응답을 기본적으로 반환 할 수 있습니다. 당신이 필요하기 때문에 바이너리 데이터를 조작하는 작업을하지 않는 경우, 말하기

  일반적으로

  • 는 다음 의 Blob는, 특히 이미지 캐싱 및 표시를 위해, 더 나은 선택이다 : Q2에 대한

  Blob을 사용하여 .createObjectURL을 호출하십시오.

• 하지만 Chrome은 IndexedDB (아직 출시되지 않은 fixed in Chrome 38)의 Blob 유형을 버그가 있으며, WebSQL의 경우 base64를 사용하는 것이 일반적입니다. 둘 다 ArrayBuffer이 더 적합한 선택 일 수 있습니다. 다른 잠재적 인 솔루션에 대한

참고 :

• 로컬 스토리지는 메가 바이트 캡 주어진 컨텐츠 이미지 저장에 적합하지 않습니다. 동기 API (IO 차단) 및 바이너리 컨텐트에 대한 기본 지원을 포함하지 않는 다른 문제.

• appcache은 정적 자산 (리소스 URL을 알고있는 경우)에 적합하지만 콘텐츠 이미지 캐싱의 경우 관리해야 할 두통입니다.

각 선택의 호환성과 성능을 완전히 고려한 토론/문서를 찾을 수 없었습니다. stackoverflow 커뮤니티 나를 도울 수 있습니까?

---

업데이트 : 그것은 가치가 무엇인지에 대한

, 내가 XHR + 물방울 조합로 이동하기로 결정 . 내 주요 추론 :

1. 단순 : with XHR2 검색 덩어리는 xhr.responseType = 'blob'

2. 기본 설정하는 것만 큼 쉽습니다 : 전체 프로세스에, storing Blob in IndexedDB에, XHR 물방울에서 네이티브 API를 기반으로 이미지 디스플레이를 위해 Object URL을 생성합니다. 필연적으로 더 나은 성능을 의미하지는 않지만 응용 프로그램 코드에서 데이터 변환 요구를 확실히 감소시킵니다.

3. 디자인 : 이미지 캐싱은 Google 서비스에 중요하지 않으므로 적절한 IndexedDB 및 XHR2가있는 브라우저 만 지원하기로 결정했습니다.

Answer 1

정확하게 귀하의 유스 케이스를 위해 만들어진 AppCache를 무시하는 것처럼 보입니다. 예, 매니페스트는 사용하기 가장 쉬운 기능은 아니지만 기능이 꼭 필요한 것입니다.

Manifest 파일을 관리하기가 어렵다는 것을 언급했습니다. 그러나 사용자 지정 솔루션에 대해 오프라인으로 저장할 파일 목록을 생성 할 수있는 경우 동일한 논리를 사용하여 Manifest 파일을 동적으로 생성 할 수 있습니다. Manifest 파일이 정적 파일이 아니라 선택한 서버 측 언어를 사용하여 생성되었는지 확인하십시오.

브라우저의 큰 전체 기능을 다시 구현하는 것이 내장 된 것을 사용하는 것보다 항상 어렵 기 때문에 AppCache를 다시 시도해보십시오. 브라우저 지원도 훨씬 넓습니다.