javascript - 从 Google Drive 检索缩略图

标签 javascript jquery html google-drive-api thumbnails

我正在使用适用于 JavaScript 的 Google Drive Picker API,并希望检索与 Google Drive 生成​​的 URL 相对的文档缩略图。

下面是谷歌检索文档,并在其中产生了一个url:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Picker Example</title>

    <script type="text/javascript">

      // The Browser API key obtained from the Google Developers Console.
      var developerKey = 'xxxxxxxYYYYYYYY-12345678';

      // The Client ID obtained from the Google Developers Console. Replace with your own Client ID.
      var clientId = "1234567890-abcdefghijklmnopqrstuvwxyz.apps.googleusercontent.com"

      // Scope to use to access user's photos.
      var scope = ['https://www.googleapis.com/auth/photos'];

      var pickerApiLoaded = false;
      var oauthToken;

      // Use the API Loader script to load google.picker and gapi.auth.
      function onApiLoad() {
        gapi.load('auth', {'callback': onAuthApiLoad});
        gapi.load('picker', {'callback': onPickerApiLoad});
      }

      function onAuthApiLoad() {
        window.gapi.auth.authorize(
            {
              'client_id': clientId,
              'scope': scope,
              'immediate': false
            },
            handleAuthResult);
      }

      function onPickerApiLoad() {
        pickerApiLoaded = true;
        createPicker();
      }

      function handleAuthResult(authResult) {
        if (authResult && !authResult.error) {
          oauthToken = authResult.access_token;
          createPicker();
        }
      }

      // Create and render a Picker object for picking user Photos.
      function createPicker() {
        if (pickerApiLoaded && oauthToken) {
          var picker = new google.picker.PickerBuilder().
              addView(google.picker.ViewId.PHOTOS).
              setOAuthToken(oauthToken).
              setDeveloperKey(developerKey).
              setCallback(pickerCallback).
              build();
          picker.setVisible(true);
        }
      }

      // A simple callback implementation.
      function pickerCallback(data) {
        var url = 'nothing';
        if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
          var doc = data[google.picker.Response.DOCUMENTS][0];
          url = doc[google.picker.Document.URL];
        }
        var message = 'You picked: ' + url;
        document.getElementById('result').innerHTML = message;
      }
    </script>
  </head>
  <body>
    <div id="result"></div>

    <!-- The Google API Loader script. -->
    <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
  </body>
</html>

简而言之,我想要一个缩略图而不是 URL,因为我想向用户显示缩略图,点击它会将他们带到相应的文档而不是 url

最佳答案

https://developers.google.com/picker/docs/reference并向下滚动到靠近底部的文档。您将看到 Document 对象有一个属性 THUMBNAILS。

关于javascript - 从 Google Drive 检索缩略图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28162855/

相关文章:

javascript - ReactJS - 元素类型无效错误

jQuery $ ('.div' ).each 只运行一次迭代

javascript - Jquery Grid 全选不起作用

javascript - Datepicker - onClose 不运行

javascript 函数在 html 中不起作用

asp.net - 如何使用 javascript 在客户端重新加载更新面板?

javascript - jQuery UI 可拖动 : bind to object in mousemove event?

html - 在 Lotus Notes Xpage 中解析值

javascript - 在 ng-grid 中,gridOptions.$gridScope.columns 在隐藏/显示列上更改了两次

html - 使用 GWT 使用用户的网络摄像头捕获视频/图像