Javascript Girl
  1. Javascript Girl
  3. Utilisation d'images encodées base64 avec HtmlService dans Script d'applications
Intereting Posts
Forme d'écriture plus courte jQuery $ (document) .jà fonction SetStart et setEnd lancer une erreur lors de la tentative de sélection par programme de texte dans UIWebView AngularJS: Comment puis-je changer de vue à partir d'une fonction de contrôleur? Fonction javascript inArray Vérifiez si l'objet javascript se trouve dans un réseau existant Toute alternative à l'utilisation d'execCommand pour mettre en surbrillance HTML dans le lecteur ebook iOS Détecter si Extension Safari est installée Les performances Tweaking de la solution élégante au redimensionnement de texte pour les conceptions fluides / réactives? Pourquoi mon application FB boucle-t-elle toujours dans IE? Format Date Heure dans Angular JS Envoyer des données d'image sur RTC Data Channel Accès à des objets JavaScript imbriqués avec une clé de chaîne Je reçois un message d'erreur "Objet requis" Comment Google Analytics empêche la falsification de trafic Insérer HTML dans NicEdit WYSIWYG

Utilisation d'images encodées base64 avec HtmlService dans Script d'applications

Google Apps Script prend-il en charge l'utilisation d'images encodées base64 avec un service HTML? J'essaie d'ajouter des images à une page HTML en utilisant l'encodage base64, mais elles ne s'affichent pas dans la page finale.

Le HTML que j'essaie d'utiliser est: 

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

Lorsque je connecte le contenu html juste avant qu'il ne soit rendu par le service HTML, cela apparaît comme suit: 

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

Cela fonctionne bien dans JSFiddle et en HTML normal, mais dans Apps Script, les images ne s'affichent pas. Lors de l'affichage du code source sur la page rendue, les étiquettes d'image apparaissent comme suit: 

 <img src="null">

Existe-t-il une autre façon d'ajouter des images codées base64 à la page? Je peux obtenir les images en tant que blob, mais je ne pense pas qu'il existe un moyen d'ajouter directement un blob au contenu HTML.

En décembre 2014 , Google Apps Script a ajouté un mode IFRAME sandbox supplémentaire, qui prend en charge les URI de données (car il n'utilise pas le compilateur Caja). L'inconvénient est que le mode IFRAME n'est pas compatible avec les anciens navigateurs, mais selon vos besoins, cela peut ne pas constituer un problème.

Tout ce qui est requis est d'appeler setSandboxMode() sur votre modèle, et vos URI de données devraient fonctionner comme prévu: 

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

Il s'agit du problème 1558 pour le compilateur Google Caja – visitez-le et le star pour "voter" et recevoir des mises à jour. Avez-vous essayé de tester dans la Caja Testbed ?

Une alternative peut être qu'une fonction côté serveur récupère l'image codée base64 via UrlFetch, décodez-la à l'aide de base64Decode , puis enregistrez le blob en tant que fichier image et l' hébergez depuis Google Drive . Je m'attends à ce que ce soit très lent, malheureusement.

Pour obtenir la chaîne de base64 codée en premier lieu à partir des fichiers Google Drive:

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