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

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

我想使用的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內容中。

來源

2013-12-18 StuWatson

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

來源

2015-06-09 18:08:09 hopper

我會錯過那15個重點......當谷歌世界繼續循環時，更好的工作更新答案！ – Mogsdad

對於Google Caja編譯器，這是Issue 1558 - 訪問並顯示它以「投票」並接收更新。你有沒有試過在Caja Testbed測試？

另一種方法是讓服務器端函數通過UrlFetch檢索base64編碼圖像，使用base64Decode對其進行解碼，然後將該BLOB保存爲圖像文件並將其保存爲host it from Google Drive。不幸的是，我預計這會很慢。

來源

2013-12-18 12:02:48 Mogsdad

答案與IFRAME沙箱的出現不再相關，如漏斗的答案中所述。由於第1558號問題尚未結束，因此請留下答案。 – Mogsdad

要獲得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

HTM L

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

來源

2016-02-25 20:42:27

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

回答

相關問題