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

问题描述

我想将HTML表单中的图片http发布到google apps脚本网络应用中，然后将该图片添加到Google驱动器中.

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

我的应用脚本在下面.

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);
};

当我执行时，它返回一个错误； cannot find method: 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".当您上传内容类型为'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脚本端.我不确定这是错误还是规范.我认为在将来的更新中可能会解决此问题.但是，作为当前解决方法，我想再添加一个示例脚本，以使用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.";
}

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