使用 javascript 从 Google 图片中获取随机图片答案

【问题标题】：Use javascript to get a random image from Google images使用 javascript 从 Google 图片中获取随机图片
【发布时间】：2015-12-13 11:20:30
【问题描述】：

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

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

我应该怎么做，或者有可能吗？

【问题讨论】：

这不太可能。
您可以使用为您执行此操作的服务，例如 lorempixel，但我不确定这是否符合您的需求。虽然从 Google 图片中获取真正的随机图片似乎有点冒险，因为那里的图片数量不适合网站背景。
您将需要使用Google Image Search API 来查询图像，然后您可以从 JSON 数据中获得随机结果。请注意，它已被弃用，但仍然可以使用。您也可以使用他们较新的Custom Search API。
总是有 Flikr API，根据我的阅读，它也不错，都是高分辨率。您的网站会遇到的一个问题是性能。由于它是随机的，因此您将无法进行任何图像处理，因此不会闻所未闻 10MB。
您最好获取您喜欢的图像集合并将它们托管在您的域中。然后随机选择一个并显示它变得非常容易

标签： javascript html image

【解决方案1】：

它可以通过 Google 图片来完成，但需要进行大量自定义，以便脚本按照您的预期运行（包括设置延迟来处理速率限制；Google 对每个通过 API 的搜索请求的速率限制为 64 个项目）here是一个使用 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>

但是我可以建议：来自 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>

【讨论】：

不再工作，因为响应“此 API 不再可用。”消息。

【解决方案2】：

虽然从技术上讲不是问什么，但这有助于为随机性提供一些结构——你可以组成几个字典，动词、名词、形容词......然后用随机的形容词-名词动词来拼凑它，（即，胖斗牛犬奔跑）然后用该搜索查询谷歌，并从结果中选择一张随机图片。这样，您可以潜在地减少不适当的结果，并且还允许根据用户可能选择的主题选择特定的词典。（即根据用户的喜好改变可用名词）

【讨论】：

考虑添加有关您的答案的更多信息。
这是一个好主意，一般来说——生成一些随机词（不知何故）并在上面搜索。让您可以控制随机性。