Подача изображений, хранящихся на Диске, в HTML-шаблоне (скрипт Google Apps)

Я следовал инструкциям здесь, чтобы мой шаблон подписи Gmail отображал изображение, хранящееся на Google Диске, в качестве логотипа.

Цель состоит в том, чтобы атрибут src тега изображения указывал на изображение и отображал его в строке. В приведенном выше ответе большой двоичный объект изображения извлекается с помощью UrlFetchApp. В моем коде я вызываю метод openById(id) приложения DriveApp, чтобы открыть файл изображения и получить большой двоичный объект.

Однако ни один из подходов не работает. Только когда у меня есть '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);

}

gmail google-apps-script web-standards

Anton Dementiev 18.01.2020 источник

Ответы (2)

arrow_upward
1
arrow_downward

Вы хотите поместить изображение своего Google Диска в свою подпись Gmail, используя HTML-шаблон.
Вы хотите добиться этого с помощью Google Apps Script.

Если я правильно понимаю, как насчет этого ответа? Пожалуйста, подумайте об этом как об одном из нескольких возможных ответов.

Проблема и обходной путь:

Когда я проверил официальный документ, я увидел изображение для подписи следующим образом.

Если вы добавили фотографию или изображение с 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 Диска, как насчет следующего потока? Я думаю, что этот метод показан в официальном документе.

Публично поделитесь изображением на Google Диске.
Поместите 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);

To:

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. И если вы хотите поместить изображение в src, используя данные base64, используйте src="data:image/png;base64,###". В вашем скрипте используется src="image/png;base64,###".

Использованная литература:

Если я неправильно понял ваш вопрос, и это было не то направление, которое вам нужно, приношу свои извинения.

Tanaike 19.01.2020

arrow_upward
0
arrow_downward

Попробуй это:

Все, что вам нужно сделать, это добавить идентификатор файла изображения по умолчанию в функцию convertImageToDataURI, а затем запустить диалоговое окно. Или вы также можете развернуть как веб-приложение. Для своих целей я обычно уменьшаю размер изображений до ширины менее 1000 пикселей и сохраняю соотношение сторон меньше единицы.

Код.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 пуст

изображения.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>

Если вам нужен инструмент для получения идентификаторов файлов изображений в папке, попробуйте эту функцию:

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");
  }
}

Скриптлеты

Веб-приложения

Вот как выглядит мой диалог:

Cooper 18.01.2020