2013-12-18 4 views
6

Unterstützt Google Apps Script die Verwendung von base64-kodierten Bildern mit HTML-Service? Ich versuche, Bilder zu einer HTML-Seite mit Base64-Codierung hinzuzufügen, aber sie werden nicht auf der letzten Seite angezeigt.Verwenden von base64-kodierten Bildern mit HtmlService in Apps Skript

Die HTML ich zu verwenden Ich versuche ist:

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

Wenn ich den HTML-Inhalt melden Sie sich, kurz bevor es von HTML-Dienst gemacht wird dies wie folgt angezeigt:

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

Dies funktioniert gut in JSFiddle und in normalem HTML, aber in Apps Script, werden die Bilder nicht angezeigt. Wenn die Codequelle der Anzeige auf der gerenderten Seite erscheinen die Image-Tags wie folgt:

<img src="null"> 

Gibt es eine andere Art und Weise Base64-codierten Bilder, die auf der Seite hinzufügen? Ich kann die Bilder als Blob erhalten, aber ich glaube nicht, dass es eine Möglichkeit gibt, einen Blob direkt zum HTML-Inhalt hinzuzufügen.

Antwort

2

Ab der Version December 2014 wurde in Google Apps Script eine zusätzliche IFRAME sandbox mode hinzugefügt, die Daten-URIs unterstützt (da der Caja-Compiler nicht verwendet wird). Der Nachteil ist, dass IFRAME Modus ist nicht kompatibel mit älteren Browsern, aber je nach Ihren Anforderungen, die kein Problem sein kann.

das ist alles erforderlich ist setSandboxMode() auf Ihrer Vorlage zu rufen, und Ihre Daten URIs sollte funktionieren wie erwartet:

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

output.setSandboxMode(HtmlService.SandboxMode.IFRAME); 
+0

Ich vermisse diese 15 Rep-Punkte ... Guter Job, der Antworten aktualisiert, während die Google-Welt sich dreht! – Mogsdad

2

Dies ist Issue 1558 für den Google Caja-Compiler - besuchen und markieren Sie ihn, um "abzustimmen" und Updates zu erhalten. Haben Sie versucht, im Caja Testbed zu testen?

Eine Alternative kann eine serverseitige Funktion Abrufen der Base64-Bild über UrlFetch codiert zu haben ist, sie dekodieren base64Decode verwenden, dann das Blob als Bilddatei speichern und host it from Google Drive. Ich erwarte, dass dies leider sehr langsam wäre.

+0

Antwort ist nicht mehr relevant, mit dem Aufkommen von IFRAME Sandbox, wie in Trichter Antwort beschrieben. Wird diese Antwort hier belassen, da die Ausgabe 1558 nicht abgeschlossen wurde. – Mogsdad

1

Um den codierten Base64-String in erster Linie von Google Drive-Dateien zu erhalten:

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 

HTM L

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