在 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" />