如何在 Google Apps 脚本中从二进制字符串（客户端隐藏表单字段）重建图像的 blob

Question

我正在尝试使用 Google HTMLService 从客户端处理表单。棘手的部分是我想在表单中捕获粘贴的图像（从剪贴板），将其发送到服务器端并将其保存在 DriveApp 中。

在客户端，我认为我能够根据此页面捕获粘贴的图像：http://joelb.me/blog/2011/code-snippet-accessing-clipboard-images-with-javascript/

我的客户端代码如下所示：

function pasteHandler(e) {
   // We need to check if event.clipboardData is supported (Chrome)
   if (e.clipboardData) {
      // Get the items from the clipboard
      var items = e.clipboardData.items;
      if (items) {
         // Loop through all items, looking for any kind of image
         for (var i = 0; i < items.length; i++) {
            if (items[i].type.indexOf("image") !== -1) {
               // We need to represent the image as a file,
               var blob = items[i].getAsFile();
               // and use a URL or webkitURL (whichever is available to the browser)
               // to create a temporary URL to the object
               var URLObj = window.URL || window.webkitURL;
               var source = URLObj.createObjectURL(blob);
               var reader = new FileReader();
               reader.onload = function(e) {
                 document.getElementById("summaryImage").value= reader.result;
               }
               reader.readAsBinaryString(blob);

               // The URL can then be used as the source of an image
               createImage(source);
            }
         }
      }
   // If we can't handle clipboard data directly (Firefox), 
   // we need to read what was pasted from the contenteditable element
   } 
}

所以变化只是我使用 FileReader 读取 blob 并将其保存到表单的隐藏字段中。

<input type="hidden" name="summaryImage" id='summaryImage' value=''>

我认为这部分工作正常，因为我可以在客户端显示图像并且隐藏字段也填充了字节流。

我不确定的是如何获取隐藏字段的值，现在是 "Binary String" 并将其保存为 Google 驱动器中的正确 PNG 文件和/或查看它.

在服务器端，我能够保存任何上传的文件（使用输入文件表单元素），但请注意隐藏字段传递的二进制字符串。

我试过如下的方法：

blob = form.summaryImage;
DriveApp.createFile('TRIFILE2.png', blob, 'image/png');

这确实创建了一个文件，但不能以 png 格式查看。如果我在 Google 驱动器中打开它，它显示如下。我想它知道这是一个 PNG 文件，但转换它的正确方法是什么？

‰PNG


IHDR   y   2     Þ  R    IDATx í]mLTYš~Øl€I ÃF  ´šX ‰|Dc H(œ    TÿàcÒÅPkuÂGÿ°è B'*ì: èHÖ    =ÂàØà¸É”ýc¨ùa &–M75i„ ]0ÓR&’¢W£`RZ› ÅA·
LÒ`²¹›s?ªîïÂ[x©{ªÛÔóñž÷}žûž{îåT=i×JJ ÐWJ# Æ\ %9¥) þ!Åã£á ’¬Š“€f²
h¦$S’U€€
B¤™LIV  * ‘f2%Y  ¨ DšÉ”d   ‚ i&S’U€€
B¤™LIV  * ‘f2%Y  ¨ DšÉ”d   ‚ i&S’U€€
B¤™LIV  * ‘f2%Y  ¨ DšÉ”d   ‚ i&S’U€€
B¤™LIV  * ‘f2%Y  ¨ DšÉ”d   ‚ i&S’U€€
B¤™LIV  * 1 a ú;^)N4 ®Sœ`  %™’¬  T "ÍdJ²
 PAˆ4“)É*@@ !ÒL¦$«   „H3™’¬  T "ÍdJ²
 PAˆ4“)É*@@ !ÒL¦$«   „H3™’¬  T "ÍdJ²
 PAˆ4“)É*@@ !ÒL¦$‹ pc -

我也试过 Utilities.newBlob() 函数，但无法弄清楚如何从二进制字符串中生成正确的 Blob。

Answer 1

不要使用 readAsBinaryString，而是使用 readAsDataURL，它得到一个 base64，你不会有那么乱的字符。

如果您需要服务器端代码，可以在此处按照我的代码和 Sandy Good 教程进行操作：

如何在 Google Apps 脚本中从二进制字符串（客户端隐藏表单字段）重建图像的 blob

How to reconstruct a blob for an image from a binary string (client side hidden form field) in Google Apps Script

javascript

blob

web-applications

google-apps-script