Skalowanie zdjęć umieszczanych na stronach internetowych

Autorzy: Szymon Tengler


C#, ASP.NET, Skalowanie, ASHX


Zamieszczając zdjęcia na stronie internetowej dosyć często spotykamy się z problemem ich skalowania. Nieraz to samo zdjęcie chcemy żeby w jednym miejscu miało rozmiar np. 400x200 a w innym 200x100. Dodatkowo chcemy by w obu miejscach zachowana była proporcja. Zazwyczaj, tworzymy wówczas dwa osobne obrazki sięgając po graficzne narzędzia, np.: Image resizer, Gimp, Paint .Net itp. Dziś w artykule zaprezentowany zostanie sposób, który pozwoli na automatyczne („w locie”) skalowanie grafiki, co z pewnością pozwoli web masterowi zaoszczędzić czas.

Wstęp

Przypuśćmy, że poniższy obrazek o wymiarach 400x200 i rozmiarze 19.5KB chcemy zmieścić na stronie w mniejszych wymiarach np. 200x100.

aspnet1

Możemy to zrobić w bardzo prosty i szybki sposób, po porostu ustawiając w znaczniku img atrybuty width i height:

<img src="/Img/aspnet1.png" width="200" height="100" />

Co oczywiście spowoduje, że wizualnie nasz obrazek będzie mniejszy:

aspnet2

Jak łatwo się przekonać (np. w firefox klikając prawym przyciskiem myszy na obrazku i wybierając "Pokaż informacje o obrazku") obrazek w rzeczywistości jest wciąż rozmiarów 400x200 i zajmuje 19.6KB. Można powiedzieć, że nie takiego efektu się spodziewaliśmy. Zobaczmy zatem jak może wyglądać prawidłowe rozwiązanie.

Potrzebne narzędzia

Do skalowania obrazków wykorzystamy tzw. HTTP Handler. Jest to coś w rodzaju strony internetowej lecz nie posiada wizualnej reprezentacji. Przetwarza jedynie żądanie klienta i zwraca wynik (text, plik, obrazek itp.). Możemy coś takiego napisać sami od zera, ale szkoda czasu, skorzystajmy z gotowego darmowego narzędzia jakim jest ImageGen . Wchodzimy zatem na stronę produktu i w sekcji download pobieramy archiwum. Zobaczmy teraz jak z tego skorzystać.

Image gen w akcji

Spośród plików, które znajdują się w archiwum będą nas interesowały dwa pliki ImageGen.dll, ImageGen.ashx. Co z nimi należy zrobić?

  1. Pierwszy z nich  kopiujemy do katalogu Bin aplikacji (jeśli takiego katalogu nie mamy to go tworzymy).
  2. Plik ImageGen.ashx kopiujemy do np. do głównego katalogu aplikacji.

Po wykonaniu tych czynności, nasz projekt powinien składać się z następujących plików:

solutionex

Teraz wystarczy wyrzucić atrybuty width i height ze znacznika img i zmodyfikować ścieżkę do obrazka:

<img src="/Imagegen.ashx?image=/Img/aspnet1.png&width=200&height=100" />

Jak teraz uruchomimy stronę i zbadamy wielkość obrazka (już wcześniej to robiliśmy) to okaże się że będzie on miał faktycznie rozmiar 200x100, a jego wielkość będzie około 10KB. Zatem cel został osiągnięty. W porządku, ale skąd wiadomo, że takie a nie inne parametry należy ustawić w ścieżce obrazka? Bardzo łatwo znaleźć odpowiedź na to pytanie. Na stronie produktu, wystarczy zapoznać się z dokumentacją - tam odnajdziemy wszystkie możliwości  prezentowanego gadżetu.


Autor artykułu zachęca do eksperymentów.

Liczba ocen: 23 | Średnia ocen: 4.51

Czytaj także

 

Skomentuj

Twój komentarz
Dodaj

Komentarze

Nasz Fanpage

Popularne treści

  • .NET  
  • 3D  
  • 8  
  • ActiveDirectory  
  • AJAX  
  • amazon web services  
  • Android  
  • Android Market  
  • AngularJS  
  • Animacja  
  • API  
  • aplikacje  
  • Aplikacje wielojęzyczne  
  • asembler  
  • ASHX  
  • ASP.NET  
  • ASP.NET MVC  
  • assembler  
  • Automated Installation Kit  
  • Azure  
  • bezpieczeństwo  
  • bing  
  • Blender  
  • C#  
  • certyfikat  
  • chmura  
  • cloud computing  
  • cmd  
  • Cmdlet  
  • Cmdlet’ów  
  • core  
  • CSS  
  • Cycles  
  • developer  
  • Entity Framework  
  • Expression Blend  
  • fitl  
  • google  
  • google app engine  
  • googlemaps  
  • GPU  
  • Grafika  
  • GroupPolicy  
  • hamachi  
  • hyperv  
  • hyper-v  
  • IaaS  
  • ImageX  
  • instalacja aplikacji  
  • interface  
  • interfejs  
  • Iron Speed  
  • java  
  • JavaScript  
  • jQuery  
  • Kinect  
  • Knockout  
  • kolokacja  
  • konsola  
  • LINQ  
  • LINQ to SQL  
  • Linux  
  • MakeCert  
  • maps  
  • microsoft  
  • mobile  
  • moduły  
  • MVC  
  • mySQL  
  • OpenSource  
  • openstreet  
  • openvpn  
  • PaaS  
  • partycja  
  • PHP  
  • pliki apk  
  • pon  
  • powershell  
  • preview  
  • programowanie  
  • przeglądarka  
  • przetwarzanie w chmurze  
  • przewodnik  
  • Qt  
  • RAD  
  • Rendering  
  • SaaS  
  • script  
  • SDK  
  • server  
  • serwer  
  • Skalowanie  
  • SQL  
  • Systemy operacyjne  
  • światłowody  
  • Światłowód  
  • Template  
  • ubuntu  
  • virtual  
  • Visual Studio  
  • vpn  
  • WAIK  
  • WCF  
  • WebAdministration  
  • WebApi  
  • Windows  
  • windows azure  
  • Windows PE  
  • Windows Phone  
  • WinFroms  
  • wirtualizacja  
  • WPF  
  • XAML  
  • zdalny  
  • zdjęcia  
Komu polecasz tą stronę? (email)
Poleca (twoje imie/pseudonim)
Treść (opcjonalnie) Do Twojej treści zostanie dodany link polecanej strony
POLECAM