使用 javascript 从谷歌图片中获取随机图片

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/32615926/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 13:57:57  来源:igfitidea点击:

Use javascript to get a random image from Google images

javascripthtmlimage

提问by htmlcoder123

I have this idea for my website that every time you visit the page, the background will be different. I want to get literally any picture from Google images and place it as my website's background using Javascript.

我对我的网站有一个想法,即每次访问该页面时,背景都会不同。我想从 Google 图片中获取任何图片,并使用 Javascript 将其作为我网站的背景。

Basically every time you refresh the page a script will fetch a random picture from Google images and place it as the background or maybe at least download the picture.

基本上每次刷新页面时,脚本都会从 Google 图片中随机获取一张图片并将其作为背景放置,或者至少下载图片。

How should I do this, or is it even possible?

我应该怎么做,或者甚至有可能吗?

回答by Sinisa Bobic

It can be done via Google Images though much customization is required so the script behaves as you intended (including setting up a delay to handle rate-limiting; Google has a rate-limit of 64 items per search request over API) here is a basic example using Google Images api:

它可以通过 Google 图片完成,但需要进行大量自定义,因此脚本按您的预期运行(包括设置延迟来处理速率限制;Google 通过 API 对每个搜索请求的速率限制为 64 个)这里是一个基本的使用 Google 图片 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>

However may I suggest instead: Random images from flickr, here is another basic code for that (sky is the limit):

但是我可以建议:来自 flickr 的随机图像,这是另一个基本代码(天空是极限):

<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>

回答by Neil Loftin

although not technically what was asked, this could help give some structure to the randomness -- you could compose a couple dictionaries, of verbs, nouns, adjectives.. and mad-lib it up with a random adjective-noun verbing, (ie, fat bulldog running) then query google with that search, and pick a random picture from the results. this way, you can potentially reduce the inappropriate results, and also allow selection of specific dictionaries based on themes the user has selected perhaps. (ie, changing the available nouns based on user's likes)

尽管从技术上讲不是所问的问题,但这可以帮助为随机性提供一些结构-您可以编写一些词典,动词,名词,形容词......并用随机的形容词 - 名词动词来疯狂地解放它,(即,胖斗牛犬跑步)然后用该搜索查询谷歌,并从结果中随机选择一张图片。这样,您可以潜在地减少不适当的结果,并且还允许根据用户可能选择的主题选择特定词典。(即,根据用户的喜好更改可用名词)