Informazioni su immagini in Javascript con bg-image

Mattepuffo's logo
Informazioni su immagini in Javascript con bg-image

Informazioni su immagini in Javascript con bg-image

Programmazione, Javascript - AJAX

Oggi vediamo il plugin per jQuery bg-image.js, che ci permette di reperire informazioni sulle immagini usando Javascript lato client.

Ovviamente il presupposto è che l'immagine sia in qualche modo caricata sul browser.

Ad esempio come background.

Potete scaricare il plugin dal link sopra; qui sotto un esempio di pagina completo:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>TEST</title>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"
                integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
                crossorigin="anonymous">
        </script>
        <script src="jquery-bg-image.min.js"></script>
        <style>
            #bg-image {
                width: 100%;
                height: 100%;
                background-image: url("img.jpg");
            }
        </style>
    </head>
    <body>
        <div id="bg-image"></div>
        <script>
            $(function () {
                $("#bg-image").bgImage(function (event) {
                    console.log(event);
                    var background_image = $(this).get(0);
                    console.log(background_image.width);
                    console.log(background_image.height);
                    console.log(background_image.src);
                });
            });
        </script>
    </body>
</html>

Enjoy!

Condividi

Commentami!