如何通过 Google Apps Script Web App 将 jpg 或 png 图像转换为 Blob? [英] How do I convert jpg or png image to Blob via a Google Apps Script Web App?

问题描述

我想将 html 表单中的图片通过 http 发布到 Google Apps 脚本 Web 应用程序，然后将该图片添加到 Google Drive.

I want to http post an image from html form to google apps script web app, and then add that image to google drive.

我的应用程序脚本如下.

my apps script is below.

function doPost(e){
  var date = new Date();
  var timestamp = date.toString()
  var adress = e.parameter.adress;
  var cost = e.parameter.cost;
  var item = e.parameter.item;
  var check = e.parameter.image;

  //add file to drive
  var destination_id = "some ID"
  var destination = DriveApp.getFolderById(destination_id);
  destination.createFile(check);
};

当我执行时，它返回一个错误；找不到方法:createFile(String)

when I execute, it returns a error ; cannot find method: createFile(String)

我认为这是因为检查"是一个字符串，我想将提交的图像转换为 Blob.

I think this is because "check" is a string, and I want to convert the submitted image to Blob.

我该怎么做?

推荐答案

下面的示例怎么样?添加了getAs()".https://developers.google.com/apps-script/reference/drive/file#getAs(String)

How about following sample? Added "getAs()". https://developers.google.com/apps-script/reference/drive/file#getAs(String)

这些是我用于此测试的非常简单的 html 和 gas 脚本.

These are very simple html and gas script I used for this test.

HTML:此文件名为form.html".

HTML: This file name is "form.html".

<form>
  <input type="file" name="imageFile">
  <input type="button" value="ok" onclick="google.script.run.upload(this.parentNode)">
</form>

GAS 脚本:

function doGet() {
  return HtmlService.createHtmlOutputFromFile('form.html');
}

function upload(e) {
  var destination_id = "some ID";
  var img = e.imageFile;
  var contentType = "image/jpeg";
  var destination = DriveApp.getFolderById(destination_id);
  var img = img.getAs(contentType);
  destination.createFile(img);  
}

对于此示例脚本，如果您想保存为 jpeg 文件，请将 'contentType' 从 'image/png' 更改为 'image/jpeg'.当您上传 contentType 为 'image/jpeg' 的 png 文件时，png 文件会通过 'getAs()' 转换为 jpeg 文件.

For this sample script, if you want to save as a jpeg file, please change 'contentType' from 'image/png' to 'image/jpeg'. When you upload png file for contentType of 'image/jpeg', the png file is converted to jpeg file by 'getAs()'.

启用 V8 时，似乎无法将 this.parentNode 发送到 Google Apps Script 端.我不确定这是错误还是规范.我认为这可能会在未来的更新中得到解决.但作为当前的解决方法，我想再添加一个示例脚本，用于使用 Web Apps、对话框和侧边栏上传文件.

When V8 is enabled, it seems that this.parentNode cannot be sent to Google Apps Script side. I'm not sure whether this is a bug or the specification. I think that this might be resolved in the future update. But as the current workaround, I would like to add one more sample script for uploading the file using Web Apps, dialog and sidebar.

在这种情况下，文件将作为字节数组发送到 Google Apps 脚本端.该文件是从 Google Apps 脚本端的字节数组创建的.

In this case, the file is sent to Google Apps Script side as the byte array. And the file is created from the byte array at Google Apps Script side.

<input id="file" type="file" onchange="saveFile(this)" />
<script>
  function saveFile(f) {
    const file = f.files[0];
    const fr = new FileReader();
    fr.onload = function(e) {
      const obj = {
        filename: file.name,
        mimeType: file.type,
        bytes: [...new Int8Array(e.target.result)]
      };
      google.script.run.withSuccessHandler(e => console.log(e)).saveFile(obj);
    };
    fr.readAsArrayBuffer(file);
  }
</script>

Google Apps 脚本:Code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index.html');
}

function saveFile(e) {
  var blob = Utilities.newBlob(e.bytes, e.mimeType, e.filename);
  DriveApp.createFile(blob);
  return "Done.";
}

更新时间:2021 年 12 月 9 日

V8 运行时发布后，存在一个错误，当使用 google.script.run 将文件从 HTML 表单发送到 Google Apps Script 端时，文件 blob 是无效数据.

Updated: December 9, 2021

After V8 runtime was released, there was a bug that when the file is sent from HTML form to Google Apps Script side using google.script.run, the file blob was the invalid data.

来自 Martin Hawksey 的 Apps Script Pulse，发现使用 google.script 将 HTML 表单文件发送到 Google Apps Script 端的 blob 无效.run终于解决了.在这种情况下，此脚本可以与 V8 运行时一起使用.

From Apps Script Pulse by Martin Hawksey, it was found that the invalid blob of sending the file of HTML form to Google Apps Script side using google.script.run has finally been resolved. In this case, this script can be used with V8 runtime.

<form>
  <input type="file" name="file" onchange="google.script.run.withSuccessHandler(console.log).upload(this.parentNode)">
</form>

Google Apps 脚本端:Code.gs

const doGet = _ => HtmlService.createHtmlOutputFromFile('index.html');
const upload = ({file}) => DriveApp.createFile(file).getId();

重要提示:

重要的一点是，在当前阶段，当上述 HTML 作为 Web Apps (doGet) 访问时，此脚本有效.但是当上面的 HTML 作为对话框和侧边栏访问时，Google Apps Script 端的 file 是 undefined.如此看来，在现阶段，这个 HTML 似乎只能与 Web Apps 一起使用.请注意这一点.我相信这种情况会在未来的更新中得到解决.

IMPORTANT:

As an important point, in the current stage, when the above HTML is accessed as Web Apps (doGet), this script works. But when the above HTML is accessed as a dialog and a sidebar, file at the Google Apps Script side is undefined. By this, it seems that in the current stage, this HTML can be used with only Web Apps. Please be careful about this. I would like to believe that this situation is resolved in the future update.

这篇关于如何通过 Google Apps Script Web App 将 jpg 或 png 图像转换为 Blob?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！