Question

我想在google驱动器中获取一个png图像，以显示在Google Apps脚本html页面上。我可以将图像显示在脚本html页面上，如果它只是在网络上的某个URL（请参阅下面的注释掉的行），而不是来自谷歌驱动器。以下是我尝试获取blob然后在图像标记中使用它的代码的一部分：

function getImage() {
//The next 2 lines don't produce the image on the page
  var image = DriveApp.getFileById('File Id Goes Here').getBlob().getAs('image/png');
  var image = '<img src = "' + image + '" width = "90%">'
  //Note, the next line uncommented produces an image on the page
//var image = '<img src = "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width = "90%">'
return image
}

function doGet() {
  var htmlToAppend = getImage(); 
   var html = HtmlService.createTemplateFromFile('index').evaluate()
              .setTitle('Google Image').append(htmlToAppend).setSandboxMode(HtmlService.SandboxMode.IFRAME);  
  return html;    
}

结果是脚本生成的html页面上缺少图像，缺失图像的URL以script.googleusercontent.com/Blob结尾

Blob的信息在这里：https://developers.google.com/apps-script/reference/base/blob（在单独的页面/标签中打开）

感谢任何帮助。

Answer 1

如果您看到Using base64-encoded images with HtmlService in Apps Script或Displaying files (e.g. images) stored in Google Drive on a website，则有一些解决方法可以从驱动器中获取图像。

一种解决方法是使用IFRAME sandbox mode，但这不支持旧浏览器。

所需的只是在模板上调用setSandboxMode（），您的数据URI应按预期工作：

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

output.setSandboxMode(HtmlService.SandboxMode.IFRAME);

第二个是使用文件的永久链接：

https://drive.google.com/uc?export=view&id={fileId}

但请注意，Serving images in an Apps Script through HtmlService已被弃用。

<img src="https://googledrive.com/host/0B12wKjuEcjeiySkhPUTBsbW5j387M/my_image.png" height="95%" width="95%">

此外，请避免使用相同的变量名称以避免错误发生

希望这有帮助。

从Google云端硬盘获取基于脚本网页的图片

1 个答案: