Обслуживание сохраненных на диске изображений в шаблоне HTML (Google Apps Script) - PullRequest
Новая
       43

Обслуживание сохраненных на диске изображений в шаблоне HTML (Google Apps Script)

1 голос
/ 18 января 2020

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

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

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

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

}

Ответы [ 2 ]

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

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

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

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

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

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

Ссылки:

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

0 голосов
/ 18 января 2020

Попробуйте:

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

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>

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

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

Скриплеты

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

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

enter image description here

...