Czy można wyświetlić dowolną część obrazu w tagu img (za pomocą pikseli) za pomocą JavaScript?uzyskiwanie części obrazu za pomocą JavaScript
Chciałbym mieć przygotowany duży obraz (np. 32x320 pikseli) i zdefiniowaną pozycję początkową (X, Y, np. 0,32) i szerokość/wysokość (np. 32, 32) i chciałbym, żeby skrypt pokazywał sekundę (32x32 piksele) część głównego obrazu.
Można użyć do tego właściwości CSS i zmienić je za pomocą JS. Ustaw obraz jako tło dla elementu o żądanym rozmiarze i dostosuj jego położenie z położeniem w tle, aby widoczna była jego prawidłowa część. Niektórzy nazywają to CSS sprites.
+1 Nie musisz nawet używać DIV. Używam przezroczystego pliku PNG i ustawiam jego obraz tła, który działa tak samo dobrze w tym celu, ale daje mi możliwość korzystania z artefaktu w linii, jeśli chcę bez konieczności zajmowania się zmiennymi itp. – Robusto
Tak, oczywiście, to działa z dowolny element. Używanie elementu img brzmi dla mnie trochę brudno, prawdopodobnie użyłbym wyświetlacza: inline-block; gdybym chciał, aby element płynął z tekstem. –
Aby uzyskać wiele opcji, zawsze można użyć płótna HTML5 i przerysować obraz w razie potrzeby. Możesz znaleźć ładny tutorial na temat tego, jak to zrobić tutaj: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images Metoda sprite CSS byłaby jednak lepsza, ponieważ IE nie obsługuje jeszcze płótna.
można nawet zapisać obraz, który narysowałeś jako URL danych http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/ –
Możliwy duplikat [Jak wyświetlić tylko część obrazu w HTML/CSS?] (Https://stackoverflow.com/questions/57725/how-can-i-display-just-a-portion- of-an-image-in-html-css) – vaxquis
Podczas gdy odniesione pytanie dotyczy html/css, dotyczyło to JavaScript. – Alper
Czy zdajesz sobie sprawę, że skoro twoje pytanie dotyczyło DOM JavaScript, a sam DOM jest jedynie zapleczem programistycznym HTML/CSS, twoje pytanie * dotyczyło * samego HTML/CSS? Przyjęta tu odpowiedź wskazuje na CSS właśnie z tego powodu. Nie możesz * wykonać JS DOM * bez * uwzględnienia HTML/CSS - nawet element canvas HTML5 wymieniony w drugiej odpowiedzi jest po prostu - elementem dokumentu HTML5. – vaxquis