工作代码

Question

如何获取Google图片返回的图片的JSON响应？

我在文档中尝试过，发现谷歌图片API已被弃用，转而支持Google Custom Search API。根据我的理解，Google自定义搜索允许您在域内而不是整个网络中进行搜索。我尝试过以下调用，但是我返回了一个没有任何图像URL的JSON响应

GET https://www.googleapis.com/customsearch/v1?key={API_KEY}&cx={ENGINE_API}&q=vancouver&searchType=image

{
 "kind": "customsearch#search",
 "url": {
  "type": "application/json",
  "template": "https://www.googleapis.com/customsearch/v1?q={searchTerms}&num={count?}&start={startIndex?}&lr={language?}&safe={safe?}&cx={cx?}&sort={sort?}&filter={filter?}&gl={gl?}&cr={cr?}&googlehost={googleHost?}&c2coff={disableCnTwTranslation?}&hq={hq?}&hl={hl?}&siteSearch={siteSearch?}&siteSearchFilter={siteSearchFilter?}&exactTerms={exactTerms?}&excludeTerms={excludeTerms?}&linkSite={linkSite?}&orTerms={orTerms?}&relatedSite={relatedSite?}&dateRestrict={dateRestrict?}&lowRange={lowRange?}&highRange={highRange?}&searchType={searchType}&fileType={fileType?}&rights={rights?}&imgSize={imgSize?}&imgType={imgType?}&imgColorType={imgColorType?}&imgDominantColor={imgDominantColor?}&alt=json"
 },
 "queries": {
  "request": [
   {
    "title": "Google Custom Search - vancouver",
    "totalResults": "14400000",
    "searchTerms": "vancouver",
    "count": 10,
    "startIndex": 1,
    "inputEncoding": "utf8",
    "outputEncoding": "utf8",
    "safe": "off",
    "cx": "004087055820537748846:jsb6pxcwlfc",
    "searchType": "image"
   }
  ],
  "nextPage": [
   {
    "title": "Google Custom Search - vancouver",
    "totalResults": "14400000",
    "searchTerms": "vancouver",
    "count": 10,
    "startIndex": 11,
    "inputEncoding": "utf8",
    "outputEncoding": "utf8",
    "safe": "off",
    "cx": "004087055820537748846:jsb6pxcwlfc",
    "searchType": "image"
   }
  ]
 },
 "context": {
  "title": "Google"
 },
 "searchInformation": {
  "searchTime": 0.387643,
  "formattedSearchTime": "0.39",
  "totalResults": "14400000",
  "formattedTotalResults": "14,400,000"
 },
 "items": [
  {
   "kind": "customsearch#result",
   "title": "Gastown in Vancouver",
   "htmlTitle": "Gastown in \u003cb\u003eVancouver\u003c/b\u003e",
   "link": "https://www.google.com/maps/d/thumbnail?mid=1cjm_9rHpykRpj_ynUSKktJuaVPo&hl=en",
   "displayLink": "www.google.com",
   "snippet": "Gastown in Vancouver",
   "htmlSnippet": "Gastown in \u003cb\u003eVancouver\u003c/b\u003e",
   "mime": "image/",
   "image": {
    "contextLink": "https://www.google.com/mymaps/viewer?mid=1cjm_9rHpykRpj_ynUSKktJuaVPo&hl=en",
    "height": 520,
    "width": 504,
    "byteSize": 65000,
    "thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTM1MMx7p1iq8mIIAGQ9vhOq3jCO5DfD2Hg0JxDIP-xv_te-5y3bJ6aU3Ef",
    "thumbnailHeight": 131,
    "thumbnailWidth": 127
   }
  },
  {
   "kind": "customsearch#result",
   "title": "Ramada Limited Vancouver Downtown",
   "htmlTitle": "Ramada Limited \u003cb\u003eVancouver\u003c/b\u003e Downtown",
   "link": "https://www.google.com/maps/d/thumbnail?mid=1B41Gt1WF8xLcJyfvc38rj8LBKgA&hl=en",
   "displayLink": "www.google.com",
   "snippet": "Ramada Limited Vancouver Downtown",
   "htmlSnippet": "Ramada Limited \u003cb\u003eVancouver\u003c/b\u003e Downtown",
   "mime": "image/",
   "image": {
    "contextLink": "https://www.google.com/mymaps/viewer?mid=1B41Gt1WF8xLcJyfvc38rj8LBKgA&hl=en",
    "height": 520,
    "width": 504,
    "byteSize": 71067,
    "thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_R6h1Kx-ClxwwdjQ96P31JIdEfg_MgFnTA82X3l9T_YwnBHe3NZ30Pd4g",
    "thumbnailHeight": 131,
    "thumbnailWidth": 127
   }
  },
  {
   "kind": "customsearch#result",
   "title": "Vancouver Bike Route Stanley Park Seawall",
   "htmlTitle": "\u003cb\u003eVancouver\u003c/b\u003e Bike Route Stanley Park Seawall",
   "link": "https://www.google.com/maps/d/thumbnail?mid=14dxTKK_5KAhFsRhgdfVm9IBUSFo&hl=en_US",
   "displayLink": "www.google.com",
   "snippet": "Vancouver Bike Route Stanley Park Seawall",
   "htmlSnippet": "\u003cb\u003eVancouver\u003c/b\u003e Bike Route Stanley Park Seawall",
   "mime": "image/",
   "image": {
    "contextLink": "https://www.google.com/mymaps/viewer?mid=14dxTKK_5KAhFsRhgdfVm9IBUSFo&hl=en_US",
    "height": 520,
    "width": 504,
    "byteSize": 56235,
    "thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSXPIwRIMWTkV2awxaXIGDSL0asRPMSGm3LTMPlChkGvfJywWuDY_YwP53F",
    "thumbnailHeight": 131,
    "thumbnailWidth": 127
   }
  },
  {
   "kind": "customsearch#result",
   "title": "Gowalla Walking Tour of Vancouver",
   "htmlTitle": "Gowalla Walking Tour of \u003cb\u003eVancouver\u003c/b\u003e",
   "link": "https://www.google.com/maps/d/thumbnail?mid=18ob0bMMVH84t36U1_A3_jFbcx58&hl=en",
   "displayLink": "www.google.com",
   "snippet": "Gowalla Walking Tour of Vancouver",
   "htmlSnippet": "Gowalla Walking Tour of \u003cb\u003eVancouver\u003c/b\u003e",
   "mime": "image/",
   "image": {
    "contextLink": "https://www.google.com/mymaps/viewer?mid=18ob0bMMVH84t36U1_A3_jFbcx58&hl=en",
    "height": 520,
    "width": 504,
    "byteSize": 54143,
    "thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTmVpAm7SR0tSWPVMibBl3W6yEvYtnup8zn9ccWVvPZNRPF8w9EGM1unBGg",
    "thumbnailHeight": 131,
    "thumbnailWidth": 127
   }
  },
  {
   "kind": "customsearch#result",
   "title": "VANCOUVER MURAL FESTIVAL MURAL MAP",
   "htmlTitle": "\u003cb\u003eVANCOUVER\u003c/b\u003e MURAL FESTIVAL MURAL MAP",
   "link": "https://www.google.com/maps/d/thumbnail?mid=1ur3X4PbXsGyg0aKhNNwEq03itN0&hl=en_US",
   "displayLink": "www.google.com",
   "snippet": "VANCOUVER MURAL FESTIVAL MURAL MAP",
   "htmlSnippet": "\u003cb\u003eVANCOUVER\u003c/b\u003e MURAL FESTIVAL MURAL MAP",
   "mime": "image/",
   "image": {
    "contextLink": "https://www.google.com/mymaps/viewer?mid=1ur3X4PbXsGyg0aKhNNwEq03itN0&hl=en_US",
    "height": 520,
    "width": 504,
    "byteSize": 129311,
    "thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR6DGPUW2U6pDAUmuVz_DR7cxU-LPUdMrOzbN2E0GHE8_FegyyHhvdOSX4V",
    "thumbnailHeight": 131,
    "thumbnailWidth": 127
   }
  },
  {
   "kind": "customsearch#result",
   "title": "Best Western Hotel Downtown Vancouver",
   "htmlTitle": "Best Western Hotel Downtown \u003cb\u003eVancouver\u003c/b\u003e",
   "link": "https://www.google.com/maps/d/thumbnail?mid=1p-nRfVmGJpViUr4zPovQcaSTdeE&hl=en_US",
   "displayLink": "www.google.com",
   "snippet": "Best Western Hotel Downtown Vancouver",
   "htmlSnippet": "Best Western Hotel Downtown \u003cb\u003eVancouver\u003c/b\u003e",
   "mime": "image/",
   "image": {
    "contextLink": "https://www.google.com/mymaps/viewer?mid=1p-nRfVmGJpViUr4zPovQcaSTdeE&hl=en_US",
    "height": 520,
    "width": 504,
    "byteSize": 53972,
    "thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQhQD8cRDrRL2bPYEycxl55FqUCco8vCYkq1pfx4JYXHWXRe_s9Ttzy7Xc",
    "thumbnailHeight": 131,
    "thumbnailWidth": 127
   }
  },
  {
   "kind": "customsearch#result",
   "title": "Carmana Plaza Hotel Vancouver",
   "htmlTitle": "Carmana Plaza Hotel \u003cb\u003eVancouver\u003c/b\u003e",
   "link": "https://www.google.com/maps/d/thumbnail?mid=1qf-nG5qQI0beJIftB7jWRSfIcHw&hl=en",
   "displayLink": "www.google.com",
   "snippet": "Carmana Plaza Hotel Vancouver",
   "htmlSnippet": "Carmana Plaza Hotel \u003cb\u003eVancouver\u003c/b\u003e",
   "mime": "image/",
   "image": {
    "contextLink": "https://www.google.com/mymaps/viewer?mid=1qf-nG5qQI0beJIftB7jWRSfIcHw&hl=en",
    "height": 520,
    "width": 504,
    "byteSize": 56307,
    "thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSEJBHFdUcUqMOLmHXj1acSwI0GLNniL8poTF9xKiIJUFV3US8vDUesTWc",
    "thumbnailHeight": 131,
    "thumbnailWidth": 127
   }
  },
  {
   "kind": "customsearch#result",
   "title": "Seismic building risk in Vancouver",
   "htmlTitle": "Seismic building risk in \u003cb\u003eVancouver\u003c/b\u003e",
   "link": "https://www.google.com/maps/d/thumbnail?mid=1AzDOrFqjnR5qKqAkBnbqGDlbc_8&hl=en_US",
   "displayLink": "www.google.com",
   "snippet": "Seismic building risk in Vancouver",
   "htmlSnippet": "Seismic building risk in \u003cb\u003eVancouver\u003c/b\u003e",
   "mime": "image/",
   "image": {
    "contextLink": "https://www.google.com/mymaps/viewer?mid=1AzDOrFqjnR5qKqAkBnbqGDlbc_8&hl=en_US",
    "height": 520,
    "width": 504,
    "byteSize": 62217,
    "thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvOomFOVNoIc6fVOBhyS9HXh3S5KkbxbvJw2EtkKjlNoVGF0Y7wlU8F9kC",
    "thumbnailHeight": 131,
    "thumbnailWidth": 127
   }
  },
  {
   "kind": "customsearch#result",
   "title": "1607- 1420 W. Georgia St, Vancouver",
   "htmlTitle": "1607- 1420 W. Georgia St, \u003cb\u003eVancouver\u003c/b\u003e",
   "link": "https://www.google.com/maps/d/thumbnail?mid=1b4WGaMzNOARvuejyduraaT-9Nhg&hl=en",
   "displayLink": "www.google.com",
   "snippet": "1607- 1420 W. Georgia St, Vancouver",
   "htmlSnippet": "1607- 1420 W. Georgia St, \u003cb\u003eVancouver\u003c/b\u003e",
   "mime": "image/",
   "image": {
    "contextLink": "https://www.google.com/mymaps/viewer?mid=1b4WGaMzNOARvuejyduraaT-9Nhg&hl=en",
    "height": 520,
    "width": 504,
    "byteSize": 59096,
    "thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQaKK52bEj0-tvFOOJw3kbqZoChXiWeQ9-wLoccNHNHQpOqaKwNSEk4wvM",
    "thumbnailHeight": 131,
    "thumbnailWidth": 127
   }
  },
  {
   "kind": "customsearch#result",
   "title": "Correctional Centres in British Columbia",
   "htmlTitle": "Correctional Centres in British Columbia",
   "link": "https://www.google.com/maps/d/thumbnail?mid=1Xiubw4z5fACCpd5z71ubgUwz5f8&hl=en_US",
   "displayLink": "www.google.com",
   "snippet": "Correctional Centres in British Columbia",
   "htmlSnippet": "Correctional Centres in British Columbia",
   "mime": "image/",
   "image": {
    "contextLink": "https://www.google.com/mymaps/viewer?mid=1Xiubw4z5fACCpd5z71ubgUwz5f8&hl=en_US",
    "height": 520,
    "width": 504,
    "byteSize": 62990,
    "thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTR0gMZSVrF7H2n1JcfXxbZ25ZgOsc7iW2hsYltXGAYP5bwukZCfcNXyKQ",
    "thumbnailHeight": 131,
    "thumbnailWidth": 127
   }
  }
 ]
}

Answer 1

确保正确自定义搜索引擎。

更新search engine并确保已启用image search

您还要确保在网站中至少添加了一个网站来搜索（下面我添加了google.com）

然后你得到这样的回复

{
    "kind": "customsearch#search",
    "url": {
        "type": "application/json",
        "template": ""
    },
    "queries": {
        "request": [
            {
                "title": "Google Custom Search - city",
                "totalResults": "297000000",
                "searchTerms": "city",
                "count": 10,
                "startIndex": 1,
                "inputEncoding": "utf8",
                "outputEncoding": "utf8",
                "safe": "off",
                "cx": "000938323173939893608:mrtwb_hl8cu"
            }
        ],
        "nextPage": [
            {
                "title": "Google Custom Search - city",
                "totalResults": "297000000",
                "searchTerms": "city",
                "count": 10,
                "startIndex": 11,
                "inputEncoding": "utf8",
                "outputEncoding": "utf8",
                "safe": "off",
                "cx": "000938323173939893608:mrtwb_hl8cu"
            }
        ]
    },
    "context": {
        "title": "Google"
    },
    "searchInformation": {
        "searchTime": 0.400265,
        "formattedSearchTime": "0.40",
        "totalResults": "297000000",
        "formattedTotalResults": "297,000,000"
    },
    "items": [
        {
            "kind": "customsearch#result",
            "title": "Yarra City Council Boundary",
            "htmlTitle": "Yarra <b>City</b> Council Boundary",
            "link": "https://www.google.com/mymaps/viewer?mid=1X8_ONIG08PtjQ--SOiAD9Xk8mM8&hl=en",
            "displayLink": "www.google.com",
            "snippet": "Yarra City Council Boundary.",
            "htmlSnippet": "Yarra <b>City</b> Council Boundary.",
            "cacheId": "V02kFnMgkfgJ",
            "formattedUrl": "https://www.google.com/mymaps/viewer?mid=1X8...hl=en",
            "htmlFormattedUrl": "https://www.google.com/mymaps/viewer?mid=1X8...hl=en",
            "pagemap": {
                "cse_thumbnail": [
                    {
                        "width": "221",
                        "height": "228",
                        "src": "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQUjeu8rgqsWGc4u_XkQNcBRull03-9xL9KEUehjmnglOC2op3eS9pkmZ4"
                    }
                ],
                "website": [
                    {
                        "name": "Yarra City Council Boundary",
                        "description": "Yarra City Council Boundary",
                        "url": "https://www.google.com/maps/d/viewer?mid=1X8_ONIG08PtjQ--SOiAD9Xk8mM8&hl=en",
                        "image": "https://www.google.com/maps/d/thumbnail?mid=1X8_ONIG08PtjQ--SOiAD9Xk8mM8&hl=en"
                    }
                ],
                "metatags": [
                    {
                        "viewport": "initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0,width=device-width",
                        "og:type": "website",
                        "og:title": "Yarra City Council Boundary",
                        "og:description": "Yarra City Council Boundary",
                        "og:url": "https://www.google.com/maps/d/viewer?mid=1X8_ONIG08PtjQ--SOiAD9Xk8mM8&hl=en",
                        "og:image": "https://www.google.com/maps/d/thumbnail?mid=1X8_ONIG08PtjQ--SOiAD9Xk8mM8&hl=en",
                        "twitter:card": "summary_large_image",
                        "twitter:title": "Yarra City Council Boundary",
                        "twitter:description": "Yarra City Council Boundary",
                        "twitter:image:src": "https://www.google.com/maps/d/thumbnail?mid=1X8_ONIG08PtjQ--SOiAD9Xk8mM8&hl=en"
                    }
                ],
                "cse_image": [
                    {
                        "src": "https://www.google.com/maps/d/thumbnail?mid=1X8_ONIG08PtjQ--SOiAD9Xk8mM8&hl=en"
                    }
                ]
            }
        },

        ...
                ]
            }
        }
    ]
}

工作代码

下面是一些代码，如果你看起来会从pagemap对象中获取图像在imageobject属性中，您将获得图片。

// angular to show images 
var app = angular.module("app", []);

app.controller("image-query", function($scope) {

  $scope.settings = {
    async: true,
    crossDomain: true,
    url: "https://www.googleapis.com/customsearch/v1?",
    data: {
      key: "AIzaSyAh7eEvk6WpvUXd7gFP0dZnLJNSfiKJ2Us",
      cx: "000938323173939893608:evp8tltzv_y"
    },
    method: "GET"
  };

  $scope.query = "";
  $scope.images = [];
  $scope.exts = ["jpg", "png", "jpeg", "gif"];

  $scope.updateImages = function() {
    $scope.settings.data.q = $scope.query

    $.ajax($scope.settings).done(function(res) {
      // empty images from last query
      $scope.images = [];
      var results = res.items;
      // image may or may not have imageobject
      results.forEach(i => {
        if (i.pagemap.imageobject) {
          i.pagemap.imageobject.forEach(o => {
            if (o.url && $scope.exts.some(ext => o.url.includes(ext))) {
              $scope.images.push(o.url);
              $scope.$apply();
            }
          })
        }
      });

      // uncomment to see logged images
      // console.dir($scope.images);
    })
  }

});

#root {
  display: flex;
  align-items: center;
  flex-direction: column;
}

#image-gallery {
  width: 100%;
  height: 300px;
  margin: 10px;
}

#image-gallery li {
  list-style-type: none;
  display: inline;
  overflow-y: scroll;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="root" ng-app="app" ng-controller="image-query">
  <h1>Search Images</h1>
  <input ng-model="query" id="search" placeholder="search an image" />
  <br/>
  <button ng-click="updateImages()">Search</button>
  <hr width="100%" />
  <ul id="image-gallery" height="100%">
    <li ng-repeat="img in images track by $index" ng-model="images">
      <img height="100px" width="100px" src="{{img}}" />
    </li>
  </ul>
</div>

GET要求获取Google图片图片网址列表

1 个答案:

工作代码