Miesiąc: maj 2021

Spis treści

1. Wprowadzenie
2. Kod bazowy dla porównania ImageCapture vs canvas
3. Robienie zdjęcia
   1. Stary sposób z canvas
   2. Nowy sposób z ImageCapture
4. Wsparcie ImageCapture
5. Kod przykładu na Github
6. Klikalny przykład na Github Pages
7. Podsumowanie

Wprowadzenie

We wszystkich aplikacjach WWW w których pracowałem do tej pory robienie zdjęcia polegało na podpięciu się do wideo z kamery i przechwyceniu pojedynczej klatki strumienia. Klatka ta była potem rysowana na elemencie <canvas> a następnie zapisywana jako blob.

To podejście jest hakiem, wymaga nadmiarowych elementów. Niedawno natknąłem się na dedykowane przeglądarkowe API ImageCapture, opisane m.in. na Mozilli. Pozwala ono zrobić zdjęcie w znacznie prostszy sposób, bez elementów pośrednich i obejść.

Sprawdźmy więc czym różni się nowe podejście od starego.

Czytaj dalej „Sprawdź jak dzięki ImageCapture zrobisz zdjęcie prościej w swojej aplikacji”

Spis treści

1. Wprowadzenie
2. Notka o modułach
3. Obecny sposób obsługi plików
   1. Implementacja
   2. Niedogodności
4. Nowy sposób obsługi plików z File System Access API
   1. Implementacja
   2. Wątpliwości dotyczące File System Access API
5. Kod przykładu na Github
6. Klikalny przykład na Github Pages
7. Podsumowanie

Wprowadzenie

Kiedy ostatnio spojrzałeś w katalog plików pobranych na Twoim dysku? Czy przeszukiwanie go zawsze jest koszmarem, z ogromną ilością duplikatów i plikami nazwanymi w taki sposób: somefile.txt, somefile (1).txt, somefile (2).txt, somefile (2) (1).txt itd.

Jeżeli miałeś przyjemność pracować na dokumentach do których zmiany dodaje kilka osób to praca wygląda często tak:

1. Pobierasz plik somedocs.txt bo chcesz coś dodać
2. Wpisujesz ważne rzeczy i wrzucasz na Slacka/Teamsy.
3. Ktoś doda zmiany, pobierasz plik i trafia on do katalogu Pobrane, ale ma nazwę somedocs (1).txt żeby nie nadpisać obecnego pliku
4. Wrzucasz, ktoś bierze pliczek, znowu coś dopisuje
5. Pobierasz, tym razem ma nazwę somedocs (1) (1).txt
6. Robi się nieporządek

I jestem w stanie wymienić bez zastanowienia sytuację, gdy spotkałem się z takim namnażaniem się chaosu 🙂 Mianowicie:

Pliczek z pytaniami do rekrutacji – nie chcesz by ten plik był dostępny dla wszystkich, by współpracownicy nie wrzucali go swoim znajomym aplikującym do firmy w której pracujesz, a fajnie mieć plik z którego możesz brać pytania.

Na szczęście pojawia się API, które pozwoli nam zapanować nad chaosem – File System Access API. Pozwala ono między innymi na zapis plików na dysku z wyborem nazwy – w analogiczny sposób jak zapisują pliki natywne aplikacje.

W tym poście porównamy obie wersje.

Czytaj dalej „Obsługuj pliki lepiej dzięki File System Access Api”