使用JavaScript从Google图片中获取随机图片

Question

使用JavaScript从Google图片中获取随机图片

24

我有一个网站的想法，每次访问页面时背景都会不同。我希望使用Javascript从Google图片中获取任何图片，并将其放置为我的网站背景。基本上，每次刷新页面脚本就会从Google图像中获取一个随机图片，并将其作为背景或至少下载该图片。如何实现这一点，或者是否可能？

- htmlcoder123

这并不是特别可能的。 - SLaks

1

你可以使用像lorempixel这样的服务来实现，但我不确定它是否符合你的需求。尽管从Google Images获取一个真正的随机图片似乎有些冒险，因为那里有很多不适合作为网站背景的图片。 - Scott

2

你需要使用Google图像搜索API来查询图像，然后可以从JSON数据中获取随机结果。请注意，它已被弃用，但仍可使用。你也可以使用他们更新的自定义搜索API。 - Spencer Wieczorek

总有Flikr API可用，据我所知，它也不错，所有图片都是高分辨率的。你的网站会遇到一个问题就是性能。由于它是随机的，你将无法进行任何图像处理，因此10MB的图片也不足为奇。 - ZeroBased_IX

1

你最好收集一些你喜欢的图片并将它们托管在你的域名上，这样就非常容易随机选择一张并展示它。 - Nicholas Hazel

我知道，但那样就不会是随机的了，关键是要让它变得随机。 - htmlcoder123

2个回答

2

虽然不是技术上所要求的，但这可能有助于给随机性带来一些结构--您可以组成几个词典，包括动词、名词、形容词等，并用随机形容词-名词-动词的方式进行mad-lib，（例如，肥胖的斗牛犬奔跑），然后使用该搜索查询谷歌，并从结果中选择一个随机图片。这样，您可以潜在地减少不适当的结果，并根据用户选择的主题选择特定的词典。（例如，根据用户的喜好更改可用的名词）

- Neil Loftin

请考虑添加更多关于您回答的信息。 - 0xInfection

总的来说，这是一个好主意——以某种方式生成一些随机单词并进行搜索。这样可以在随机性上获得一定的控制。 - Nick Perkins

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sinisa Bobic · Accepted Answer

虽然需要进行许多自定义以使脚本按预期工作（包括设置延迟来处理速率限制；Google每个搜索请求的API有64个项目的速率限制），但可以通过Google Images完成。以下是使用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>

不过我可以建议一下：从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>