以模板HTML（Google Apps Script）提供驱动器存储的图像

Question

我一直按照here的说明进行操作，让我的Gmail签名模板将存储在Google云端硬盘中的图像显示为徽标。

目标是使图像标签的'src'属性指向图像并内嵌显示。在上面链接的答案中，使用UrlFetchApp提取了图像Blob。在我的代码中，我正在调用DriveApp的openById（id）方法来打开图像文件并获取Blob。

但是，这两种方法似乎都不起作用。只有当我直接将'src'指向图像URL时，它才会加载图像。我尝试同时使用base64Encode和base64EncodeWebSafe，但是签名仅显示图像的空容器。

我在这里想念什么？

HTML模板

<table>
<tbody>
 <tr>
  <td> 
    <img src="{{config.imgData}}" alt="my logo">
  </td>
   <td>
    <table>
     <tbody>
       <tr><td> My name is {{config.name}} </td> </tr>
       <tr><td> www.example.com </td> </tr>
     </tbody>
    </table>
   </td>
  </tr>

</tbody>
</table>

GS代码

var config = {
  name: "Anton",
  imgData: ""
}

function updateSignature() {

var imgFileId = "DRIVE FILE ID";

var imgFile = DriveApp.getFileById(imgFileId);

var imgBlob = imgFile.getBlob().getAs("image/png"); //getAs doesn't change anything

//Get content type and bytes
var contentType = imgBlob.getContentType();
var imgBytes = imgBlob.getBytes();
var imgData = contentType + ";base64," + Utilities.base64Encode(imgData);
config.imgData = imgData;


  var alias = Gmail.Users.Settings.SendAs.get("me", myEmail);
 //Get signature html as a string
  var templateString = HtmlService.createHtmlOutputFromFile("signature_template").getContent();

   for (var configKey in config) {
    if (config.hasOwnProperty(configKey)) {
       templateString = templateString.replace("{{config." + configKey + "}}", config[configKey]);
    }  
  }

 var finalTemplate = HtmlService.createHtmlOutput(templateString).getContent();

  alias.signature = finalTemplate;
  Gmail.Users.Settings.SendAs.update(alias, "me", myEmail);

}

Answer 1

• 您想使用模板HTML将Google云端硬盘的图片添加到Gmail签名中。
• 您想使用Google Apps脚本来实现。

如果我的理解正确，那么这个答案如何？请认为这只是几个可能的答案之一。

问题和解决方法：

当我勾选the official document时，我看到了如下所示的签名图像。

• 如果您从Google云端硬盘添加了照片或图片，则需要公开共享您的图片，以使其显示在签名中。注意：如果您通过工作或学校帐户使用Gmail，请要求管理员公开共享图像。
• 搜索图像，例如公司徽标，然后获取图像URL。
• 将您自己的图像添加到Google并使用该URL。

[将data:image/png;base64,###用于图像标签的src时，发现用Gmail.Users.Settings.SendAs.update()更新的签名不包含src属性。当使用https://###时，用Gmail.Users.Settings.SendAs.update()更新的签名包括src属性。

从上述情况考虑，认为data:image/png;base64,###可能无法用于签名的图像标签的src。这可能是规范。

因此，为了放置来自Google云端硬盘的图片，以下流程如何？我认为这是the official document中显示的方法。

1. 在Google云端硬盘中公开共享图像。
2. 将图像的URL放入签名。

修改的脚本：

修改脚本后，如何进行以下修改？

发件人：

var imgBlob = imgFile.getBlob().getAs("image/png"); //getAs doesn't change anything

//Get content type and bytes
var contentType = imgBlob.getContentType();
var imgBytes = imgBlob.getBytes();
var imgData = contentType + ";base64," + Utilities.base64Encode(imgData);

收件人：

imgFile.setSharing(DriveApp.Access.ANYONE_WITH_LINK, DriveApp.Permission.VIEW);
var imgData = "https://drive.google.com/uc?export=download&id=" + imgFileId;

注意：

• 当将图像手动添加到签名时，将使用上面的URL，并且文件会自动公开共享。
• 顺便说一句，在您当前的脚本中，imgData的var imgData = contentType + ";base64," + Utilities.base64Encode(imgData);可能是imgBytes。并且，当您想使用base64数据将图像放入src时，请使用src="data:image/png;base64,###"。在脚本中，使用src="image/png;base64,###"。

参考：

• Create a Gmail signature
• Users.settings.sendAs: update

如果我误解了你的问题，而这不是你想要的方向，我深表歉意。

Answer 2

尝试一下：

您需要做的就是将默认图像文件ID添加到功能convertImageToDataURI，然后启动对话框。或者，您也可以将其部署为Webapp。为了我的目的，我通常将图像的大小减小到小于1000像素宽，并使长宽比小于1。

Code.gs：

function onOpen() {
  SpreadsheetApp.getUi().createMenu('My Tools')
  .addItem('Display Dialog', 'displayDialog')
  .addItem('Get File Ids from FolderId','getFileIds')
  .addToUi();
}

function convertImageToDataURI(fileId) {
  var fileId=fileId||'default image file id';
  if(fileId) {
    var file=DriveApp.getFileById(fileId);
    var blob=file.getBlob();
    var dataUri='data:' + blob.getContentType() + ';base64,' + Utilities.base64Encode(blob.getBytes());
    return dataUri;
  }
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

function displayDialog() {
  var userInterface=HtmlService.createTemplateFromFile('image').evaluate();
  SpreadsheetApp.getUi().showModelessDialog(userInterface, "For the Birds");
}

function doGet() {
  return HtmlService.createTemplateFromFile('image').evaluate();
}

resources.html :（此示例不需要）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

css.html :（此示例不需要）

<style>
body {background-color:#ffffff;}
input{padding:2px;margin:2px;}
</style>

script.html :（此示例不需要）

<script>
  console.log('script.html code');
</script>

content.html为空

images.html：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('resources') ?>
    <?!= include('css') ?>
  </head>
  <body>
    <img id="birds" src="<?!=convertImageToDataURI()?>" width="320" />
    <?!= include('content') ?>
    <?!= include('script') ?>
  </body>
</html>
<html><head>

如果需要工具来获取文件夹中图像的文件ID，请尝试以下功能：

function getFileIds() {
  var resp=SpreadsheetApp.getUi().prompt("Folder Id","Enter Folder Id", SpreadsheetApp.getUi().ButtonSet.OK_CANCEL);
  if(resp.getSelectedButton()==SpreadsheetApp.getUi().Button.OK && resp.getResponseText().length>0) {
    try{
    var folder=DriveApp.getFolderById(resp.getResponseText());
    var files=folder.getFiles();
    var html='<style>td,th{border:1px solid black;padding:2px 5px;}</style><table><tr><th>File Name</th><th>File Id</th><th>Type</th></tr>';
    while(files.hasNext()) {
      var file=files.next();
      html+=Utilities.formatString('<tr><td>%s</td><td>%s</td><td>%s</td></tr>', file.getName(),file.getId(),file.getMimeType());
    }
    html+='</table><br /><input type="button" value="Close" onClick="google.script.host.close();" />';
    var userInterface=HtmlService.createHtmlOutput(html).setWidth(800).setHeight(400);
    SpreadsheetApp.getUi().showModelessDialog(userInterface, "Files in Folder");
    }
    catch(e){SpreadsheetApp.getUi().alert(e);}
  }else{
    SpreadsheetApp.getUi().alert("Invalid or Missing Inputs: No FileId Provided");
  }
}

Scriplets

Web Apps

这是我的对话框的样子：