3 Pertanyaan: Menggunakan gambar yang disandikan base64 dengan HtmlService di Apps Script

pertanyaan dibuat di Tue, Jun 9, 2015 12:00 AM

Apakah Google Apps Script mendukung penggunaan gambar yang disandikan base64 dengan layanan HTML? Saya mencoba menambahkan gambar ke halaman HTML menggunakan pengkodean base64, tetapi mereka tidak ditampilkan di halaman akhir.

HTML yang saya coba gunakan adalah:

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

Ketika saya mencatat konten html sesaat sebelum disajikan oleh layanan HTML, ini muncul sebagai:

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

Ini berfungsi baik dalam JSFiddle dan dalam HTML normal, tetapi dalam Apps Script, gambar tidak ditampilkan. Saat melihat kode sumber pada halaman yang diberikan, tag gambar muncul sebagai berikut:

 
<img src="null">

Apakah ada cara lain untuk menambahkan gambar yang disandikan base64 ke halaman? Saya bisa mendapatkan gambar sebagai gumpalan, tapi saya rasa tidak ada cara untuk langsung menambahkan gumpalan ke konten HTML.

    
6
3 Jawaban                              3                         

Mulai dari Desember 2014 , Google Apps Script telah menambahkan IFRAME mode kotak pasir tambahan, yang mendukung URI data (karena itu tidak menggunakan kompiler Caja). Kelemahannya adalah bahwa mode IFRAME tidak kompatibel dengan browser lama, tetapi tergantung pada kebutuhan Anda yang mungkin tidak menjadi masalah.

Yang diperlukan hanyalah menelepon setSandboxMode() pada templat Anda, dan URI data Anda akan berfungsi seperti yang diharapkan:

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

output.setSandboxMode(HtmlService.SandboxMode.IFRAME);
    
2
2015-06-09 18: 08: 09Z
  1. Saya akan kehilangan 15 poin rep ... Pekerjaan yang bagus memperbarui jawaban karena dunia Google terus berputar!
    2015-06-12 01: 57: 39Z

Ini Masalah 1558 untuk Google Caja kompiler - kunjungi dan beri bintang untuk "memilih" dan menerima pembaruan. Sudahkah Anda mencoba pengujian di Caja Diuji ?

Alternatif mungkin memiliki fungsi sisi server mengambil gambar base64 yang disandikan melalui UrlFetch, mendekodekannya menggunakan base64Decode , lalu simpan gumpalan sebagai file gambar dan host dari Google Drive . Saya berharap ini akan sangat lambat, sayangnya.

    
2
2013-12-18 12: 02: 48Z
  1. Jawaban tidak lagi relevan, dengan munculnya sandboxing IFRAME, seperti yang dijelaskan dalam jawaban hopper. Akan meninggalkan jawaban ini di sini, karena Masalah 1558 belum ditutup.
    2015-06-12 01: 59: 20Z

Untuk mendapatkan string base64 yang disandikan di tempat pertama dari file 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" />
    
2
2016-02-25 20: 42: 27Z
sumber ditempatkan sini