Przesyłanie dużych tablic do klienta

Question

Potrzebuję przenieść dużą liczbę 16-bitowych liczb całkowitych do klienta za pomocą żądania AJAX do usługi internetowej. Ta tablica jest w istocie pikselowymi danymi w skali szarości dla obrazu z dodatkowymi metadanymi.

Oryginalny obraz jest w zastrzeżonym formacie, który nie jest obsługiwany przez przeglądarki. Typowy obraz to 2000 x 4000 pikseli, więc tablica może zawierać wartości 8 000 000+ 16 bitów.

Czy dopuszczalne jest złożenie jednego żądania AJAX i zwrócenie całej tablicy w jednej odpowiedzi, czy powinienem podzielić na mniejsze części i zażądać każdego z osobna? Jeśli jest to zaakceptowana praktyka polegająca na przeniesieniu całej tablicy w jednej odpowiedzi, czy będę musiał obsłużyć niewiarygodne połączenia podczas żądania (czy też nieoczekiwane "wyskakujące" w przeglądarkach)?

Piszemy zarówno klienta, jak i serwis internetowy, dzięki czemu jesteśmy całkowicie elastyczni w stosunku do naszego podejścia.

Answer 1

Dane do przesłania mają rozmiar ponad 16 MB, ale powinieneś uzyskać mniejszy rozmiar za pomocą gzip, biorąc pod uwagę fakt, że pracujesz z niearchiwizowanymi danymi. Również powinieneś pomyśleć o bardzo szybkim formacie serializacji (ponieważ będziesz potrzebował dużej ilości przetwarzania zarówno na kliencie, jak i serwerze, aby serializować/deserializować dane).

Answer 2

Jak wspomnieli inni, jeśli włączysz skompresowany transfer gzip na serwerze, przeglądarka powinna automatycznie rozpakować obraz. Jeśli obraz jest zeskanowanym dokumentem z dużymi obszarami tego samego koloru, może on faktycznie skompresować obraz całkiem sporo; jeśli to raczej zdjęcie lotnicze, to nie tak bardzo.

Teraz, gdy masz obraz po stronie klienta, masz kolejny problem: co zrobić z tymi 8 milionami 16-bitowych pikseli.

Zanim wprowadziliśmy tablice, musieliśmy użyć ciągów do reprezentowania dowolnych danych. Jest to bezpieczniejsze, niż się wydaje, ponieważ w ciągach JavaScript sekwencje 16-bitowych jednostek kodowych mogą być interpretowane jako kodowane w UTF-16. JavaScript nie ma problemu z ciągami z nieprawidłowym kodowaniem.

Oznacza to, że można zapisać obraz jako jeden długi ciąg i uzyskać dostęp do poszczególnych pikseli za pomocą charCodeAt. Powinno to być rozsądnie szybkie dla większości celów manipulacyjnych.

Oto przykład ładowanie 16-bitowych danych binarnych (właściwie ikoną PNG) na ciąg i wyprowadzanie pierwsze 16 elementy:

$.ajax({ 
    url:"http://fiddle.jshell.net/favicon.png", 
    success: function(data) { 
     // Now we have the data, let's show it: 
     var out = ""; 
     for (var i = 0; i < 16; i++) { 
      out += ","+data.charCodeAt(i).toString(16); 
     } 
     console.log(out.substring(1)); 
    }, 
    beforeSend: function (xhr) { 
     xhr.overrideMimeType("text/plain; charset=utf-16be"); 
    }, 
    error: function(jqXHR, textStatus, errorThrown) { 
     console.log("ERROR: "+textStatus+" "+errorThrown); 
     console.log(jqXHR); 
    }, 
}) 

(na żywo przykład na jsfiddle)