web-dev-qa-db-fra.com

Utilisez javascript pour obtenir une image aléatoire à partir d'images Google.

J'ai l'idée pour mon site Web que chaque fois que vous visiterez la page, l'arrière-plan sera différent. Je souhaite obtenir littéralement n'importe quelle image à partir d'images Google et la placer en tant qu'arrière-plan de mon site Web à l'aide de Javascript.

En gros, chaque fois que vous actualisez la page, un script récupère une image aléatoire de Google images et la place en arrière-plan ou au moins télécharge l'image.

Comment dois-je faire cela, ou est-ce même possible?

javascripthtmlimage
17
htmlcoder123

Vous pouvez le faire via Google Images, même si une grande partie de la personnalisation est nécessaire pour que le script se comporte comme vous le souhaitez (y compris la configuration d'un délai pour gérer la limitation de débit; Google impose une limite de débit de 64 éléments par requête de recherche par API) Exemple d'utilisation de Google Images api:

<html>
<head>
    <title></title>
    <script src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
    google.load('search', '1');
    google.setOnLoadCallback(OnLoad);
    var search;

    //i suggest instead of this to make keywords list so first to pick random keyword than to do search and pick random image
    var keyword = 'mountains';

    function OnLoad()
    {
        search = new google.search.ImageSearch();

        search.setSearchCompleteCallback(this, searchComplete, null);

        search.execute(keyword);
    }

    function searchComplete()
    {
        if (search.results && search.results.length > 0)
        {
            var rnd = Math.floor(Math.random() * search.results.length);

            //you will probably use jQuery and something like: $('body').css('background-image', "url('" + search.results[rnd]['url'] + "')");
            document.body.style.backgroundImage = "url('" + search.results[rnd]['url'] + "')";
        }
    }
    </script>
</head>
<body>

</body>
</html>

Cependant, je peux suggérer plutôt: Images aléatoires provenant de flickr , voici un autre code de base pour cela (sky is the limit):

<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">

    var keyword = "mountains";

    $(document).ready(function(){

        $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
        {
            tags: keyword,
            tagmode: "any",
            format: "json"
        },
        function(data) {
            var rnd = Math.floor(Math.random() * data.items.length);

            var image_src = data.items[rnd]['media']['m'].replace("_m", "_b");

            $('body').css('background-image', "url('" + image_src + "')");

        });

    });
    </script>
</head>
<body>

</body>
</html>
23
Sinisa Bobic

bien que ce ne soit pas techniquement ce qui était demandé, cela pourrait aider à structurer le caractère aléatoire - vous pouvez composer quelques dictionnaires, de verbes, de noms, d'adjectifs .. gros bulldog en cours) puis interrogez Google avec cette recherche et choisissez une image aléatoire parmi les résultats. De cette façon, vous pouvez potentiellement réduire les résultats inappropriés et permettre également la sélection de dictionnaires spécifiques en fonction des thèmes choisis par l'utilisateur. (c'est-à-dire changer les noms disponibles en fonction des goûts de l'utilisateur)

0
Neil Loftin