Obraz & Zdjęcie

Anotator zdjęć

Dodaj strzałki, dymki, prostokąty, rysunki odręczne i etykiety na dowolnym zdjęciu lub zrzucie ekranu — przeciągnij, aby zmienić położenie, cofnij w dowolnym momencie, eksportuj jako PNG, JPG lub WebP.

Drop a photo to annotate

or click to browse — JPG, PNG, or WebP up to 50 MB.

Private by design. Your photo, the annotations, and the export are all processed in your browser via the Canvas API. Nothing leaves your device.

Czym jest adnotator zdjęć?

Adnotator zdjęć pozwala rysować na zdjęciu lub zrzucie ekranu, aby podkreślić, wskazać lub oznaczyć coś. W przeciwieństwie do pełnego edytora, nie zmienia podstawowych pikseli — Twoje oznaczenia żyją jako warstwa wektorowych kształtów (strzałki, prostokąty, tekst, rysunki odręczne), które są nakładane na obraz dopiero podczas eksportu. To sprawia, że jest idealny do raportów błędów, opinii projektowych, kroków przepisu, oznaczania prac domowych dzieci, ogłoszeń nieruchomości i codziennego problemu 'zobacz ten element tutaj'. To narzędzie daje Ci pięć narzędzi (wybór, tekst, strzałka, prostokąt, rysunek odręczny), paletę kolorów oraz pełny wybór kolorów niestandardowych, a także cztery grubości linii. Wszystko działa w Twojej przeglądarce, więc zrzuty ekranu z wrażliwą zawartością nigdy nie opuszczają Twojego urządzenia.

Jak adnotować zdjęcie

1
Przeciągnij zdjęcie lub zrzut ekranu
Przeciągnij plik JPG, PNG lub WebP na obszar przesyłania lub kliknij, aby wybrać z urządzenia. Zrzuty ekranu, zdjęcia telefonem, zdjęcia produktów — wszystko, co przeglądarki mogą renderować, działa.
2
Wybierz narzędzie i kolor
Użyj Strzałki, aby wskazać coś, Prostokąta, aby to obramować, Rysunku odręcznego, aby okrążyć lub bazgrać, oraz Tekstu, aby dodać etykietę. Wybierz kolor z palety lub otwórz wybór koloru niestandardowego dla dowolnej wartości hex.
3
Kliknij i przeciągnij na obrazie
Przeciągnij, aby rysować strzałki i prostokąty. Przeciągnij z Rysunkiem odręcznym, aby bazgrać. Z narzędziem Tekst najpierw wpisz swoją etykietę, a następnie kliknij na zdjęcie, aby umieścić ją tam, gdzie chcesz.
4
Przesuń lub cofnij
Przełącz się na Wybór, a następnie przeciągnij dowolną adnotację, aby ją przenieść. Kliknij Cofnij, aby usunąć ostatnią, lub kliknij adnotację i naciśnij Usuń. Wyczyść wszystko, aby usunąć warstwę w jednym kroku.
5
Eksportuj adnotowane zdjęcie
Wybierz PNG (bezstratny, zalecany do zrzutów ekranu), JPG (mniejszy, zdjęcia) lub WebP (najlepszy stosunek rozmiaru do jakości), a następnie kliknij Pobierz. Adnotacje są nakładane na eksport w pełnej rozdzielczości źródłowej.

Jak działa adnotacja po stronie przeglądarki

1. Dekoduj obraz źródłowy za pomocą createImageBitmap() — natywne, bez biblioteki.
2. Renderuj zdjęcie na ekranie na płótnie w skali podglądu (≤ 900 px po dłuższym boku).
3. Każda adnotacja jest przechowywana jako obiekt typowany (rodzaj, współrzędne, kolor, grubość linii).
4. Podczas eksportu najpierw narysuj obraz w oryginalnej rozdzielczości na nowym płótnie.
5. Odtwórz każdą adnotację na górze za pomocą ctx.drawImage / strokeRect / itd.
6. Zakoduj za pomocą canvas.toBlob(format, jakość) i zaoferuj jako pobranie.

Przechowywanie adnotacji jako obiektów, a nie bezpośrednio na pikselach, ma dwie rzeczywiste zalety. Po pierwsze, zachowujesz oryginalne zdjęcie w nienaruszonym stanie — cofanie, usuwanie i przestawianie to tylko edycje stanu, nie potrzebujesz destrukcyjnego narzędzia 'wymazywania'. Po drugie, eksport wykorzystuje pełną rozdzielczość źródłową: podgląd na ekranie może być zmniejszony do 900 pikseli, ale gdy klikniesz Pobierz, narzędzie ponownie rasteryzuję wszystko w odniesieniu do obrazu w oryginalnym rozmiarze. Współrzędne są przechowywane w przestrzeni obrazu i przeskalowywane przy renderowaniu, więc zrzut ekranu telefonu 4032×3024 produkuje 4032×3024 adnotowany eksport z wyraźnymi strzałkami i tekstem.

Źródło: MDN — CanvasRenderingContext2D

Typowe zadania adnotacyjne

Zdjęcie	Najlepsze narzędzia do użycia
Zrzut ekranu aplikacji do zgłoszenia błędu	Czerwony prostokąt wokół uszkodzonego interfejsu + czerwona strzałka z etykietą tekstową 'ten przycisk jest źle wyrównany'. Trzymaj się jednego koloru akcentu, aby oznaczenie było odczytywane jako jedna wiadomość.
Zdjęcie przepisu z etykietami krok po kroku	Żółte strzałki ponumerowane 1, 2, 3 wskazujące na składniki + małe etykiety tekstowe dla każdego. Mniejszy rozmiar tekstu (16–24 px) utrzymuje zdjęcie czytelne pod spodem.
Zdjęcie tablicy białej z spotkania	Ręcznie rysowane okręgi wokół kluczowych pól + adnotacje tekstowe dla brakującego kontekstu. Użyj koloru o wysokim kontraście (czerwony lub różowy), aby był widoczny na zajętych tablicach białych.
Zdjęcie ogłoszenia nieruchomości	Prostokąty do podkreślenia cech (stalowe urządzenia, podłoga drewniana itp.), krótkie etykiety tekstowe. Czarny z subtelnym konturem dobrze wygląda na większości zdjęć wnętrz.

Kiedy używać narzędzia do adnotacji zdjęć

Zgłoszenia błędów z czerwonymi ramkami i strzałkami wskazującymi dokładnie na uszkodzony element.
Opinie projektowe dla interesariuszy, którzy nie chcą logować się do Figma, aby zostawić komentarz.
Instrukcje krok po kroku na jednym zdjęciu (przepisy, przewodniki naprawcze, instrukcje oprogramowania).
Ogłoszenia nieruchomości lub produktów, w których chcesz podkreślić konkretne cechy na zdjęciu.
Oznaczenie arkusza roboczego w klasie — okrąg wokół poprawnej odpowiedzi, narysuj strzałkę, dodaj notatkę.
Szybkie podpisy na zrzucie ekranu przed wklejeniem go do Slacka, Discorda lub e-maila.
Zdjęcia tablicy białej lub notatnika, które potrzebują oznaczeń, aby były czytelne jako samodzielne obrazy.

Powiązane narzędzia

Usuwacz Tła

Wytnij obiekt z dowolnego zdjęcia za pomocą AI na urządzeniu — bez potrzeby przesyłania.

Kompresor Obrazów

Zmniejsz pliki JPG, PNG lub WebP w swojej przeglądarce za pomocą interaktywnego suwaka jakości.

Edytor zdjęć

Dostosuj, filtruj, obracaj i przycinaj zdjęcia w przeglądarce — bez przesyłania, bez znaku wodnego.

Twórca Memów

Twórz memy i kolaże zrzutów ekranu z prawdziwymi warstwami — wklejaj, przeciągaj, przycinaj, podpisuj, eksportuj.

Najczęściej zadawane pytania

Czy adnotacje są wbudowane w zdjęcie, czy są osobną warstwą?

Na ekranie żyją jako edytowalne obiekty, więc cofanie, usuwanie i przeciąganie do przestawienia działają. Gdy klikniesz Pobierz, narzędzie rasteryzuję je na kopii obrazu źródłowego — wyeksportowany plik to płaskie zdjęcie z adnotacjami trwale scalonymi.

Czy moje eksporty będą niższej rozdzielczości niż oryginał?

Nie. Podgląd na ekranie jest zmniejszany, aby pasował (maks. 900 px na dłuższym boku), ale eksport wykorzystuje oryginalne wymiary obrazu. Adnotacje są przechowywane w współrzędnych przestrzeni obrazu i ponownie renderowane w pełnym rozmiarze, więc zrzut ekranu o szerokości 4000 pikseli produkuje adnotowany PNG o szerokości 4000 pikseli.

Dlaczego tekst ma czarny kontur, którego nie prosiłem?

Zwykły tekst może zniknąć na jasnych lub ciemnych tłach. Cienki czarny kontur utrzymuje każdą etykietę czytelną na białej tablicy, ciemnym zrzucie ekranu lub zajętym zdjęciu. Jeśli nie chcesz, aby był widoczny, wybierz czarny kolor tekstu, a kontur wtopi się.

Czy mogę edytować etykietę po jej umieszczeniu?

Możesz ją przesunąć, przełączając się na Wybierz i przeciągając ją, lub usunąć i umieścić nową z poprawionym tekstem. Nie ma jeszcze edycji tekstu w miejscu — większość użytkowników uważa, że szybciej jest usunąć i przepisać niż zarządzać skupionym wprowadzeniem tekstu.

Czy rysowanie ręczne ma jakieś wygładzanie?

Rejestruje każdy ruch wskaźnika i łączy je za pomocą zaokrąglonych połączeń linii, więc stabilna ręka daje stabilne linie. Nie ma wygładzania Bezier — to świadomy wybór, ponieważ wygładzanie ma tendencję do zaokrąglania dokładnych gestów, których chciałeś (ostry koniec strzały, zygzakowata podkreślenie). Użyj narzędzia Strzała, gdy chcesz uzyskać czystą geometrię.

Czy moje zdjęcia są gdzieś przesyłane?

Nie. Obraz jest dekodowany, renderowany, adnotowany i eksportowany całkowicie w twojej przeglądarce. Nie ma żadnej wymiany z serwerem. Możesz zweryfikować w zakładce sieciowej przeglądarki, że nic nie jest wysyłane po pierwszym załadowaniu strony.

Jaka jest różnica między tym a Edytorem zdjęć?

Edytor zdjęć dostosowuje samo zdjęcie — jasność, kontrast, kolor, przycinanie, obracanie. Narzędzie do adnotacji zdjęć pozostawia zdjęcie w spokoju i dodaje warstwę oznaczeń na górze. Użyj edytora, gdy chcesz poprawić zdjęcie, a narzędzia do adnotacji, gdy chcesz wskazać coś na zdjęciu.

Ostatnia aktualizacja 2026-04-28

Czym jest adnotator zdjęć?

Jak adnotować zdjęcie

Przeciągnij zdjęcie lub zrzut ekranu

Przeciągnij plik JPG, PNG lub WebP na obszar przesyłania lub kliknij, aby wybrać z urządzenia. Zrzuty ekranu, zdjęcia telefonem, zdjęcia produktów — wszystko, co przeglądarki mogą renderować, działa.

Wybierz narzędzie i kolor

Użyj Strzałki, aby wskazać coś, Prostokąta, aby to obramować, Rysunku odręcznego, aby okrążyć lub bazgrać, oraz Tekstu, aby dodać etykietę. Wybierz kolor z palety lub otwórz wybór koloru niestandardowego dla dowolnej wartości hex.

Kliknij i przeciągnij na obrazie

Przeciągnij, aby rysować strzałki i prostokąty. Przeciągnij z Rysunkiem odręcznym, aby bazgrać. Z narzędziem Tekst najpierw wpisz swoją etykietę, a następnie kliknij na zdjęcie, aby umieścić ją tam, gdzie chcesz.

Przesuń lub cofnij

Przełącz się na Wybór, a następnie przeciągnij dowolną adnotację, aby ją przenieść. Kliknij Cofnij, aby usunąć ostatnią, lub kliknij adnotację i naciśnij Usuń. Wyczyść wszystko, aby usunąć warstwę w jednym kroku.

Eksportuj adnotowane zdjęcie

Wybierz PNG (bezstratny, zalecany do zrzutów ekranu), JPG (mniejszy, zdjęcia) lub WebP (najlepszy stosunek rozmiaru do jakości), a następnie kliknij Pobierz. Adnotacje są nakładane na eksport w pełnej rozdzielczości źródłowej.

Jak działa adnotacja po stronie przeglądarki

1. Dekoduj obraz źródłowy za pomocą createImageBitmap() — natywne, bez biblioteki.
2. Renderuj zdjęcie na ekranie na płótnie w skali podglądu (≤ 900 px po dłuższym boku).
3. Każda adnotacja jest przechowywana jako obiekt typowany (rodzaj, współrzędne, kolor, grubość linii).
4. Podczas eksportu najpierw narysuj obraz w oryginalnej rozdzielczości na nowym płótnie.
5. Odtwórz każdą adnotację na górze za pomocą ctx.drawImage / strokeRect / itd.
6. Zakoduj za pomocą canvas.toBlob(format, jakość) i zaoferuj jako pobranie.

Typowe zadania adnotacyjne

Zdjęcie	Najlepsze narzędzia do użycia
Zrzut ekranu aplikacji do zgłoszenia błędu	Czerwony prostokąt wokół uszkodzonego interfejsu + czerwona strzałka z etykietą tekstową 'ten przycisk jest źle wyrównany'. Trzymaj się jednego koloru akcentu, aby oznaczenie było odczytywane jako jedna wiadomość.
Zdjęcie przepisu z etykietami krok po kroku	Żółte strzałki ponumerowane 1, 2, 3 wskazujące na składniki + małe etykiety tekstowe dla każdego. Mniejszy rozmiar tekstu (16–24 px) utrzymuje zdjęcie czytelne pod spodem.
Zdjęcie tablicy białej z spotkania	Ręcznie rysowane okręgi wokół kluczowych pól + adnotacje tekstowe dla brakującego kontekstu. Użyj koloru o wysokim kontraście (czerwony lub różowy), aby był widoczny na zajętych tablicach białych.
Zdjęcie ogłoszenia nieruchomości	Prostokąty do podkreślenia cech (stalowe urządzenia, podłoga drewniana itp.), krótkie etykiety tekstowe. Czarny z subtelnym konturem dobrze wygląda na większości zdjęć wnętrz.

Kiedy używać narzędzia do adnotacji zdjęć

Zgłoszenia błędów z czerwonymi ramkami i strzałkami wskazującymi dokładnie na uszkodzony element.

Opinie projektowe dla interesariuszy, którzy nie chcą logować się do Figma, aby zostawić komentarz.

Instrukcje krok po kroku na jednym zdjęciu (przepisy, przewodniki naprawcze, instrukcje oprogramowania).

Ogłoszenia nieruchomości lub produktów, w których chcesz podkreślić konkretne cechy na zdjęciu.

Oznaczenie arkusza roboczego w klasie — okrąg wokół poprawnej odpowiedzi, narysuj strzałkę, dodaj notatkę.

Szybkie podpisy na zrzucie ekranu przed wklejeniem go do Slacka, Discorda lub e-maila.

Zdjęcia tablicy białej lub notatnika, które potrzebują oznaczeń, aby były czytelne jako samodzielne obrazy.