W tym tutorialu opiszę jak zeskalować obrazek używając czystego JavaScript.

Na początku potrzebujemy pobrać wysokość oraz szerokość zdjęcia. Niestety aby to zrobić obrazek musi być do końca załadowany dlatego użyjemy zdarzenia onload w tagu html. Wstawimy tam funkcję resize_image() z odwołaniem do tego obrazka (this).

Dobra, kod html już mamy czas na JS 🙂

Jak widać na przykładzie (kliknij) wszystko działa jak należy 😉

Jednak niektórym to nie wystarcza, chcieliby dodać jakieś efekty wyglądu zeskalowanego zdjęcia oraz stosowny komunikat. Użyjemy do tego funkcji createElement czyli jak sama nazwa wskazuje stworzymy nowy element html.

Jeszcze dam wam styl css:

Jak widać działa – kliknij.