Apps 脚本 - 在 HtmlService 中使用来自 Google Drive 的图像答案

【问题标题】：AppsScript- Using an image from Google Drive in HtmlServiceApps 脚本 - 在 HtmlService 中使用来自 Google Drive 的图像
【发布时间】：2012-06-28 17:01:55
【问题描述】：

以下文档的图像部分

https://developers.google.com/apps-script/html_service

表示只能显示托管在公共 url 上的图像（由于使用了图像代理）。

这是否适用于存储在用户谷歌驱动器中的图像？有没有什么办法可以将这样的图像用作 HtmlService 元素？

【问题讨论】：

您可以创建google blog，在其中插入图片，复制图片链接并在您的谷歌应用脚本中使用它:)

标签： html image google-apps-script

【解决方案1】：

目前还没有一种方法可以满足您的要求。

【讨论】：

再次感谢您的明确回答。你知道是否有计划支持这个吗？拥有 Drive 而无法在 HtmlOutput 中使用它似乎有点奇怪。
我不能保证任何事情，但这绝对是我们知道并正在研究的一个用例。
现在限制实际上已经解除了。您可以使用drive.google.com/uc?export=view&id=<FILE_ID> 链接到 Google Drive 上的私人图像。但是授权有点奇怪。我同时拥有开发 Google 帐户和我的个人 Google 帐户，该帐户对应用程序以及登录的图像没有权限。Google Apps 授予我对应用程序的访问权限，但它在加载图像时给了我 403。在我注销个人帐户后，它突然起作用了。不知道发生了什么。

【解决方案2】：

听起来您正试图从 Google 云端硬盘中提供某种可公开访问的永久链接。

打开文件。
在文件菜单下，单击共享。
在“谁有权访问”下，单击更改。
选择“在网络上公开”。
单击完成，然后复制列出的链接。那是您应该为您工作的公开链接。

【讨论】：

不错！感谢您的提醒（错误等）。
实际上我不想永久链接到谷歌驱动器上的图片视图，但实际上将该图片作为 html 的元素。

【解决方案3】：

您可以使用 base 64 编码嵌入图像。

function getFileBase64s(fileName) {
  var output = [];
  if (typeof fileName === 'string'){
    var fileIterator = DriveApp.getFilesByName(fileName);
    while (fileIterator.hasNext()) output.push(Utilities.base64Encode(fileIterator.next().getBlob().getBytes()));
  } else {
    SpreadsheetApp.getUi().alert('File name: '+fileName+' is not an string')
  };
  return output;
};

在您的 HTML 模板中：

<? getFileBase64s('fileName').forEach(function(fileBase64){ ?>
    <img src="data:image/png;base64,<?=fileBase64?>" >
<? }) ?>

【讨论】：

【解决方案4】：

当您使用 Advanced Drive Service 访问文件时，元数据有一个名为“thumbnailLink”的属性，该属性非常适合在 Html 服务中显示图像，尤其是当您不想公开共享文件时。它也比 base64 方法快得多。该链接会在数小时内过期，因此您每次都需要重新提出请求。

对于单个图像，以下方法可以解决问题：

Drive.Files.get(id).thumbnailLink

对于多个图像，您可以使用高级驱动服务中的列表方法。例如，以下将访问给定 id 文件夹中的所有图像。

  var query =  "'"+id+"' in parents and mimeType contains 'image/'"
  var files;
  var pageToken;
    do {
      files = Drive.Files.list({
        q: query,
        maxResults: 300,
        pageToken: pageToken
      });
      if (files.items && files.items.length > 0) {
        for (var i = 0; i < files.items.length; i++) {
          var file = files.items[i];
          var title = file.title
          var src = file.thumbnailLink
        }
        
      }
      pageToken = files.nextPageToken;
    } while (pageToken);

您还可以通过将“s220”字符串替换为更大的数字来调整图像的大小，例如，src = src.replace("s220","s1000")。

【讨论】：