Skalowanie obrazków w JavaScript

W tym tutorialu opiszę jak zeskalować obrazek używając Javascript. Na wstępie zaznaczę, że podobne rozwiązanie jest użyte w moim skrypcie "Fafu Board".

To do dzieła!

Aby zeskalować obrazek potrzebujemy pobrać jego wysokość oraz szerokość. 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).

<img src="obraz.jpg" onload="resize_image(this);">

Dobra, kod html już mamy czas na JS :)

var max_width = 300; // definiujemy maksymalną szerokość obrazka
// tworzymy nową funkcje
function resize_image(img) {
    // jeśli szerokość obrazka jest większa niż dopuszczalna maksymalna szerokość
    if(img.width > max_width) {
        // obliczamy proporcje szerokość do wysokość
        factor = img.width / img.height;
        // obliczamy proporcjonalną wysokość, zaokrąglamy ją używając Math.floor();
        height = Math.floor(max_width / factor);
        // nadajemy obrazkowi nowe wymiary
        img.width = max_width;
        img.height = height;
    }
}

Jak widać na przykładzie 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.

var max_width = 300; // definiujemy maksymalną szerokość obrazka
// definujemy nową funkcje
function resize_image(img) {
    // jeśli szerokość obrazka jest większa niż dopuszczalna maksymalna szerokość
    if(img.width > max_width) {
        // obliczamy proporcje szerokość do wysokość
        factor = img.width / img.height;
        // obliczamy proporcjonalną wysokość, zaokrąglamy ją używając Math.floor();
        height = Math.floor(max_width / factor);
        // i tutaj zaczyna się zabawa ;) tworzymy element div
        var newdiv = document.createElement('div');
        // nadajemy mu klasę css .resize_image
        newdiv.className = 'resize_image';
        // za pomocą metody innerHTML zmieniamy zawartość diva: link do powiększonego obrazka, oraz komunikat "Kliknij na obrazek aby go powiększyć"
        newdiv.innerHTML = '<a href="' + img.src +'" onclick="this.target=\'_blank\'"><img src="' + img.src +'" height="' + height +'" width="' + max_width +'" alt="" title="Kliknij aby powiększyć."></a><br /><p style="width:' + max_width +';">Kliknij na obrazek aby go powiększyć.</p>';
 
        // wstawiamy diva przed ten duży obrazek
        img.parentNode.insertBefore(newdiv, img);
        // i usuwamy go (obrazek)
        img.parentNode.removeChild(img);
    }
}

Jeszcze dam wam styl css:

.resize_image {
    display: inline;
}
.resize_image img {
    border: 1px solid #9aa4b1;
    padding: 5px;
    display: inline;
    margin: 0;
}
.resize_image p {
    border: 1px solid #9aa4b1;
    border-top: none;
    padding: 5px;
    color: #464c55;
    margin: 0;
    font-size: 14px;
    padding: 5px;
    height: 17px;
    text-align: center;
}

Jak widać działa.

To by było na tyle ;)