Obróbka zdjęć panoramicznych do potrzebnego rozmiaru

0

Mam taki mały problem, a mianowicie są zdjęcia panoramiczne np. 2000 px szerokość na 1000 px wysokość, ale potrzebuję wstawiać na stronę zdjęcia szerokości 800 px, a długość większa niż szerokość. Chodzi o to aby zdjęcie było dodawane jako prostokąt na stojaka coś jak tutaj:

di-0UBB.jpg

Jak zmniejszyłbym szerokość oryginalnego zdjęcia to przeskalowanie zmniejszy mi też wysokość i cały czas zdjęcie będzie wyglądało tak jak na początku tylko, że będzie mniejszych rozmiarów.
Jak więc obrabiać duże zdjęcia pomniejszać wycinać aby z panoramicznego zdjęcia dało się uzyskać prostokąt, który będzie stał || tak jak wyżej na zrzutach.
Znacie jakieś online narzędzia, aby to przetestować?

Nie chodzi mi jak wycinać w programie graficznym, ale jak opracować algorytm, który np. odpowiednio pomniejszy nam duże zdjęcie, aby nie tracić zbyt wiele ze zdjęcia, ale pozwoli poprzez specjalne narzędzie nałożone na foto wyciąć ten prostokąt o jaki mi chodzi. Coś jak tutaj:

di-5XNQ.jpg

[CIACH!]

0

A jaki język serwerowy? Czy chcesz to w CZYSTO javascripcie robić (z pomocą canvas)?

A może wystarczy Ci tylko background-size z css?

0

Nie spamuje linkami w dodatku jakimi?

Nie wiem w czym to zrobić coś musi działać po stronie klienta aby widział w czasie rzeczywistym jak ustawiać sobie wybrany fragment zdjęcia, który ma być wybrany jako to właściwe inaczej np. będzie algorytm, który automatycznie wybiera środek zdjęcia, ale postać jest na prawym boku i będziemy mieli taki efekt, że dziewczyna będzie w połowie tylko widoczna.
Gdzieś już widziałem taki rozwiązani, ze ładowało się zdjęcie o dłuższym boku wysokości mniejszej, ale po odpowiednim wybraniu elementu zdjęcie miało wysokość większą od szerokości więc boki zdjęcia były przycinane i powstawało to co szukam.

0

Ok, czyli potrzebujesz jednego z tych: http://www.jqueryrain.com/demo/jquery-crop-image-plugin/
Wybierz sobie co Ci pasuje

0

Taaa właśnie :-) dzięki stary o takie cośik mi chodziło.

Powiedz mi jeszcze czy dałoby się zrobić, tak, że np. daję na stronę obrazki gif (animowane) ale wstawionych np. 10 jeden po drugim nie animują się od razu po załadowaniu strony po najechaniu na niego myszką rozpoczyna się dopiero proces odtwarzanie albo jeszcze lepiej w momencie kiedy obrazek znajdzie się określonej strefie wiec kiedy przesuwam paskiem przewijania w strefie odtwarzania pojawia się dany obraz gif i to on będzie się wtedy odtwarzał inne będą w tym czasie statyczne. Coś takiego 1 obraz na górze i 3 ostatni na samym dole stoją bez animacji, środkowy czyli 2 obrazek gif się animuje. Czy to wykonalne proste do zrealizowania?

user image

0

zrób sobie statyczny obrazek png z pierwszej klatki i gifa. podmieniaj src w zależności od strefy. waypoint to biblioteka do jquery ktora moze Ci ulatwic temat widocznosci elementu na ekranie itd.

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