在 Apps 脚本中使用带有 HtmlService 的 base64 编码图像答案

【问题标题】：Using base64-encoded images with HtmlService in Apps Script在 Apps 脚本中使用带有 HtmlService 的 base64 编码图像
【发布时间】：2014-01-06 13:15:03
【问题描述】：

Google Apps 脚本是否支持在 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 脚本中，图像不显示。在渲染页面查看源码时，图片标签如下：

<img src="null">

还有其他方法可以将 base64 编码的图像添加到页面吗？我可以将图像作为 blob 获取，但我认为没有办法直接将 blob 添加到 HTML 内容中。

【问题讨论】：

标签： javascript html image google-apps-script google-api

【解决方案1】：

首先从 Google Drive 文件中获取编码的 base64 字符串：

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

【讨论】：

【解决方案2】：

从 December 2014 开始，Google Apps 脚本添加了一个额外的 IFRAME sandbox mode，它支持数据 URI（因为它不使用 Caja 编译器）。缺点是IFRAME 模式与旧版浏览器不兼容，但根据您的要求，这可能不是问题。

只需在您的模板上调用 setSandboxMode()，您的数据 URI 应该会按预期工作：

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

output.setSandboxMode(HtmlService.SandboxMode.IFRAME);

【讨论】：

我会错过这 15 个代表点...随着 Google 世界的不断发展，更新答案做得很好！

【解决方案3】：

这是 Google Caja 编译器的Issue 1558 - 访问并加注星标以“投票”并接收更新。您是否尝试过在Caja Testbed 中进行测试？

另一种方法可能是让服务器端函数通过 UrlFetch 检索 base64 编码图像，使用 base64Decode 对其进行解码，然后将 blob 保存为图像文件和 host it from Google Drive。不幸的是，我预计这会很慢。

【讨论】：

答案不再相关，随着 IFRAME 沙盒的出现，如 hopper 的回答中所述。将在此处留下这个答案，因为问题 1558 尚未关闭。

【解决方案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" />

【讨论】：