Question

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获取，但我认为没有办法直接将HTML添加到HTML内容中。

Answer 1

对于Google Caja编译器，这是Issue 1558 - 访问并将其标记为“投票”并接收更新。您是否尝试过Caja Testbed？

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

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

Answer 3

要从Google云端硬盘文件中获取编码的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 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" />

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

4 个答案: