在 Apps 腳本中使用帶有 HtmlService 的 base64 編碼圖像

Question

Google Apps Script 是否支持在 HTML 服務中使用 base64 編碼的圖像？ 我正在嘗試使用 base64 編碼將圖像添加到 HTML 頁面，但它們沒有顯示在最終頁面中。

我嘗試使用的 HTML 是：

<img src="data:'+contentType+';base64,'+encoded+'"/>

當我在 HTML 服務呈現之前記錄 html 內容時，它顯示為：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUh.....(base64 string)/>

這在 JSFiddle 和普通 HTML 中工作正常，但在 Apps Script 中，圖像不顯示。 在渲染頁面查看源碼時，圖片標簽顯示如下：

<img src="null">

還有另一種方法可以將 base64 編碼的圖像添加到頁面中嗎？ 我可以將圖像作為 blob 獲取，但我認為沒有辦法將 blob 直接添加到 HTML 內容中。

Answer 1

首先從 Google Drive 文件中獲取編碼的 base64 字符串：

GS

var response = UrlFetchApp.fetch('https://googledrive.com/host/fileId/name.png');
var blob = response.getBlob();
var bytes = blob.getBytes();
var base64String = Utilities.base64Encode(bytes);
Logger.log(base64String);
// now copy and paste into html

HTML

<img src="data:image/png;base64, <base64String>" alt="img name" />

Answer 2

這是 Google Caja 編譯器的第 1558期 - 訪問並為它加星標以“投票”並接收更新。 您是否嘗試過在Caja Testbed 中進行測試？

另一種方法是讓服務器端函數通過 UrlFetch 檢索 base64 編碼的圖像，使用base64Decode對其進行解碼，然后將 blob 保存為圖像文件並從 Google Drive 托管它。 不幸的是，我預計這會很慢。

Answer 3

截至2014 年 12 月，Google Apps Script 添加了額外的IFRAME沙箱模式，該模式支持數據 URI（因為它不使用 Caja 編譯器）。 缺點是IFRAME模式與舊瀏覽器不兼容，但取決於您的要求，這可能不是問題。

所需setSandboxMode()的就是在您的模板上調用setSandboxMode() ，並且您的數據 URI 應該按預期工作：

var output = HtmlService.createHtmlOutput(
  '<img src="data:' + contentType + ';base64,' + encoded + '"/>'
);

output.setSandboxMode(HtmlService.SandboxMode.IFRAME);

Answer 4

在 GS

getImage64 = function(imageurl) {
var response = UrlFetchApp.fetch(imageurl);
var blob = response.getBlob();
var bytes = blob.getBytes();
return base64String = Utilities.base64Encode(bytes);
}
imgString = getImage64('https://URL.com/host/fileId/name.png');

HTML

<img src="data:image/png;base64, <imgString>" alt="img name" />