ściągnięcie bloba i podzielenie go na "pliki"

0

Przepraszam za ewentualnie dziwny temat, ale jestem amatorem który bawi się w robienie crapowej gry dla samej frajdy. Chciałbym wykonać następującą czynność.

  1. Na serwerze jest plik składający będący złączeniem kilku plików. Typy plików mogą być różne. Obrazki, dźwięk, tekst...
  2. Funkcja w JS po stronie przeglądarki ściąga plik, rozbija go na pliki z których został sklejony i zwraca w takiej postaci jakby były łapane getem, tak jak robi się to standardowo. Czyli ze ściągniętego bloba ripujemy dane i udostępniamy na przykład jako IMG. Gdzie tego bloba pociąć, to będzie w metadanych bloba albo apka będzie wiedziała skądinąd.

Da się? Jeśli sprawa jest wykonalna, to wystarczy mi jakieś hasło, jakiś punt zaczepienia. Byle to działało w różnych przeglądarkach. Troszkę poszukałem i na przykład na MDN coś trafiłem, ale trochę odrzucił mnie tekst "This is an experimental technology". Za wolno uczę się aby łykać niepewne sprawy. Brakuje wujka dobra rada.

Na razie robię tak że obrazki łączę w jeden, ściągam go i potem dzielę w canvas na mniejsze. Nie jest to wygodne i efektywne gdy rozmiary obrazków są bardzo różne, pewnie psuje JPEG na brzegu, a poza tym nie rozwiązuje kwestii plików innych typów.

Z góry dzięki

2

Jeśli chodzi o same grafiki, to zerknij tu:
https://www.w3schools.com/css/css_image_sprites.asp
robisz ze wszystkich jedną grafikę i wyświetlasz tylko zadany obszar.
Jak nie chcesz dłubać ręcznie, to są do tego różne narzędzia, generatory itp.

Co do innych typów plików, to chyba najmniej upierdliwe byłoby postąpienie w podobny sposób. Czyli np. pobranie dużego pliku audio i odtwarzanie wybranych fragmentów. Zassanie tekstu i wyświetlanie wybranych wierszy.

0

Dzięki za odpowiedź. Czyli proponujesz cięcie w ramach mediów.
Z grafikami uporałem się z palca, bo to kwadraty. Piszę coś co mieści się między Robbo na Atari a Boulder Dash. Sprajty mam ładnie podzielone w matryce. Problem w tym, że chciałbym aby cała gra (poza kodem) ładowała się jako jedno żądanie http. Taka fanaberia / teoretyczna rozkmina. Mam bardziej rozwojowe pomysły na oku i możliwość cięcia blobów bardzo by mnie urządzała.

1

chciałbym aby cała gra (poza kodem) ładowała się jako jedno żądanie

No to jesteś jeszcze większy hardkor ode mnie :p I w moim odczuciu to faktycznie fanaberia. Strony walą teraz dziesiątki zapytań i nikt się tym nie przejmuje. Jak będziesz miał ich zamiast tego z pięć to i tak będzie nadal mistrzostwo świata, a może się nawet szybciej wczytywać, bo kilka różnych plików będzie mogło iść równolegle.

BTW: prawdziwie oldskulowy soft potrafił wszystko zmieścić w jednym pliku, więc jak byś chciał zatańczyć na rzęsach, to pewnie da się nawet to wszystko upchać w ramach JS ;)

1

Możesz, wystarczy uzyć res.blob() i Blob.slice() by pociąć sobie odpowiedź serwera na kawałki. Zamiast res.blob() możesz też użyć res.arrayBuffer() by mieć dostęp do poszczególnych bajtów. Prosty przykład (tutaj mamy pojedynczy plik który tnę, ale idea jest ta sama):

const doStuff = async () => {
  const response = await fetch("https://placekitten.com/300/300");
  const blob = await response.blob();
  
  const imgBlob1 = blob.slice(0, blob.size)
  const url1 = URL.createObjectURL(imgBlob1)
  const img1 = new Image()
  img1.src = url1
  
  const imgBlob2 = blob.slice(0, blob.size / 2)
  const url2 = URL.createObjectURL(imgBlob2)
  const img2 = new Image()
  img2.src = url2
  
  document.body.appendChild(img1);
  document.body.appendChild(img2);
};

doStuff();

CodePen: https://codepen.io/caderek/pen/Jjjevbw?editors=0010

1 użytkowników online, w tym zalogowanych: 0, gości: 1