Jak przechowywać 40 000 obrazów za pomocą HTML5 lub Phonegap?

Długo szukałem sposobu na zapisanie dużej liczby obrazów w HTML5 lub uzyskałem dostęp do nich przechowywanych lokalnie i wyświetlałem je.Jak przechowywać 40 000 obrazów za pomocą HTML5 lub Phonegap?

Aplikacja to zamawianie i katalog produktów, np. Strona internetowa e-commerce, ale dla zamówień masowych, a nie klientów końcowych, każdy obraz jest produktem, dlatego istnieje potrzeba posiadania 40k obrazów. Potrzeba wynika z wymogu, aby sprzedawca mógł korzystać z tabletu w trybie offline przez kilka dni, tygodni i tylko zsynchronizować się z ERP po nawiązaniu połączenia lub zsynchronizowaniu.

Każdy sprzedawca ma dedykowany tablet z systemem Android Tegra3 Quad-Core, 32 GB dla aplikacji. Ale aplikacja obsługuje również iPada i Chrome na pulpicie.

Jednak mam do czynienia z następującymi ograniczeniami:

Używaj HTML5 offline (aplikacja cache) - jest to ograniczone w urządzeniach z systemem iOS do 50MB, i trudne do zarządzania plik manifestu.
Użyj bazy danych webSQL z kodowanymi obrazami base64. Takie same ograniczenia wielkości (50 Mb).
Użyj localCache z base64, ponownie ograniczenia rozmiaru (od 5 do 10 MB).
Konwertuj moją aplikację HTML5, aby korzystała z interfejsu API pliku PhoneGap, ale potem stracę wsparcie dla komputerów stacjonarnych na komputery z systemem Windows i mam pewne problemy z usługami internetowymi.

Może brakuje mi alternatywnego sposobu na zrobienie tego?

Czy istnieje sposób HTML5 do przechowywania dużej liczby zdjęć do przeglądania w trybie offline? Interfejs API FileSystem nie jest obsługiwany na urządzeniach mobilnych, a możliwość pracy na urządzeniach mobilnych jest silnym wymogiem.

Źródło

2013-03-01 Astronaut

Dlaczego musisz zapisać wszystkie obrazy 40k? Opisane przez ciebie ograniczenia istnieją z jakiegoś powodu - więc aplikacje nie będą niszczyć pamięci urządzenia. Spróbuj dynamicznie zmniejszać listę w zależności od tego, co użytkownik faktycznie "potrzebuje", aby wyświetlić w trybie offline. – freejosh

To katalog produktów, każdy produkt ma obraz, który zawiera 43 000 produktów. Dlatego muszę mieć obrazy 40k, zaktualizowane pytanie, aby odzwierciedlić wymóg. – Astronaut

To jest okropny pomysł. Musisz wrócić do swojego klienta i dowiedzieć się, jakie są najlepsze oferty i umieścić w pamięci podręcznej te obrazy w aplikacji. W przeciwnym razie załaduj obrazy zdalnie, zgodnie z wymaganiami. –

Rozwiązanie zostanie przekazane do portu aplikacji HTML5 do aplikacji phoneGap za pomocą File API.

HTML5 różnych implementacji jest przyczyną tej decyzji. Ponieważ AppCache jest bardzo ograniczony w większości przeglądarek mobilnych, podobnie jak brak obsługi interfejsu API FileSystem. Fakt, że można przechowywać tylko od 16-52 MB w przeglądarkach mobilnych, jest czynnikiem ograniczającym dla aplikacji sieci web HTML5, która wymaga dużej ilości lokalnie przechowywanych danych (dostępnych w trybie offline).

Źródło

2013-03-05 23:20:19 Astronaut

Ciekawi mnie, czy udało się osiągnąć obiekt przechowujący tysiące obrazów na urządzeniu, z aplikacją HTML5 Cordova, za pomocą interfejsu API File. A jeśli tak, to jeśli masz jakieś zasoby, które pomogły. Zasadniczo znajduję się w tej samej sytuacji. – BradGreens

Cześć Brad, na koniec stworzyłem zamek i rozpakowałem wiele obrazów. hundreads jest ok, ale tysiące nie są łatwe do zarządzania. Jest to możliwe, po prostu niezbyt miłe. – Astronaut

Ach tak, nasza natywna aplikacja na iOS używa spakowanych zasobów, ma to sens. – BradGreens

Czy nie powinno być Phonegap's own Implementation of the Filesystem API pracować na urządzeniach mobilnych? Chodzi mi o to, że właśnie dlatego Phonegap został stworzony.

Prosto z Cordova API Docs dla FileReader:

obsługiwanych platform

Android

BlackBerry WebWorks (OS 5.0 i wyższe)

iOS

Windows Phone 7 i 8

Windows 8

Źródło

2013-03-04 10:16:29

Testuję to rozwiązanie już teraz. Problem polega na tym, że nie działa on na pulpicie, który również musi być wspierany. – Astronaut

Z tego wyglądu interfejs API Phonegap FS powinien być dostępny wraz z implementacją zasobów FS Api, zaimplementowaną przez Desktop Browsers. W przeciwnym razie utworzyłbym bardzo cienką warstwę abstrakcji. –

Dzięki za opinie, niestety nie mam innej alternatywy. Muszę przenieść aplikację do PhoneGap, webSQL i webServices, więc nie jest to banalne ... jest do bani, że nie mogę znaleźć czystej metody HTML5. Ale musiałem spróbować zadzwonić do społeczności. – Astronaut

Losowe choć arkusz sprite? wykonałby tylko jeden plik i zminimalizowałby żądania:

Źródło

2013-03-05 13:33:52 user2135947

Witamy w Stack Overflow! Czy możesz rozwinąć odpowiedź i podać więcej informacji na temat tego, jak to zrobić i jakie korzyści przynosi? –

Tak naprawdę o tym myślałem. Istnieje jednak potrzeba odwoływania się do obrazów po nazwie i nie ma łatwego sposobu na ich pogrupowanie. – Astronaut

Co powiesz na uruchomienie lokalnego serwera WWW, który akceptuje tylko połączenia lokalne? W Apache, coś takiego jak "Allow from 127.0.0.1" w pliku konfiguracyjnym powinno załatwić sprawę. Korzystanie z lokalnego serwera WWW pozwala pominąć wszelkie ograniczenia HTML.

Źródło

2013-03-08 21:35:57

Hum, o czym nie myślałem ... Ale czy możesz uruchomić lokalny serwer internetowy na iPadzie lub tablecie z Androidem? Próbuję trochę tego zepsuć, a także muszę się dowiedzieć, jak sobie z tym poradzić po stronie klienta. – Astronaut

Istnieje również problem aktualizacji lokalnego serwera WWW o nowe obrazy ... nadal i interesująca opcja do zbadania. – Astronaut

Możesz po prostu zapisać go w swojej bazie danych SQLite. Możesz dodać jeszcze jedno pole (kolumnę) do swojej tabeli szczegółów produktu.

Możesz przechowywać obraz w formacie BLOB LUB w formacie base64. (w twojej bazie danych).

przy użyciu phoneGap można łatwo uzyskać dostęp do bazy danych i różnych tabel z DB.

Aby zwiększyć wydajność i zaoszczędzić przepustowość: Co można zrobić, to zastosować leniwe ładowanie obrazów. Kiedykolwiek pobierzesz nowy obraz, po prostu zapisz go w bazie danych.

W ten sposób można uniknąć operacji we/wy, a także wtedy, gdy używa się MVC, a następnie w obiekcie szczegółowym produktu (klasa modalna), będzie również dostępny obiekt obrazu.

Mam nadzieję, że ta sugestia działa dla Ciebie :)

Źródło

2013-03-11 09:40:53 Umang9

Jak przechowywać 40 000 obrazów za pomocą HTML5 lub Phonegap?

Odpowiedz

Powiązane problemy