使用Google脚本将图像保存到电子表格 [英] Saving image to Spreadsheet with Google Scripts

问题描述

我正在尝试使用jSignature将签名板添加到Google表格中.我添加了一个对话框，其中记录了如下签名:

I'm trying to add a signature pad to a Google Sheet using jSignature. I've added a dialog box that records the signature like this:

//Code.gs
function showDialog() {
  var html = HtmlService.createHtmlOutputFromFile('Page')
    .setWidth(400)
    .setHeight(300);
DocumentApp.getUi()
  .showModalDialog(html, 'Your Signature is Required');
}

//Page.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/willowsystems/jSignature/master/libs/jSignature.min.js"></script>

Please draw your signature on the signature pad below: 

<div id="signature"></div>

<img id="rendered" src="">

<script>
  $("#signature").jSignature({
    'background-color': 'transparent',
    'decor-color': 'transparent'
  });

  function renderSignature(){
    $("img#rendered").attr("src",$('#signature').jSignature('getData','default'));
  }
</script>

<input type="button" value="Render" onclick="renderSignature();"/>
<input type="button" value="Add to Sheet" onclick="//What to do"/>
<input type="button" value="Close" onclick="google.script.host.close()" />

唯一的是我不知道如何将图像放入单元格中.复制/粘贴无法正常工作，据我所知，它需要插入.我当时在想也许我写了一个函数将其保存到Google云端硬盘，然后使用URL插入它，但是我仍然不知道如何获取实际图像以便对其进行任何处理.任何见解都值得赞赏，我是GS的新手.

The only thing is I can't figure out how to get the image into a cell. Copy/paste won't work, it would need to be inserted as far as I can tell. I was thinking maybe I write a function to save it to Google Drive and then insert it using a URL, but I still can't figure out how to grab the actual image in order to do anything with it. Any insight appreciated, I'm new to GS.

推荐答案

要将图像保存到云端硬盘，您可以执行以下操作

To the save the image to your Drive you can do something like this

您的HTML代码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/willowsystems/jSignature/master/libs/jSignature.min.js"></script>

Please draw your signature on the signature pad below: 

<div id="signature"></div>

<img id="rendered" src="">

<script>
  $("#signature").jSignature({
    'background-color': 'transparent',
    'decor-color': 'transparent'
  });

  function renderSignature(){
    $("img#rendered").attr("src",$('#signature').jSignature('getData','default'));
  }

  function saveImage(){ //This sends the image src to saveImages function
  var bytes = document.getElementById('rendered').src
  console.log(bytes)
  google.script.run.saveImage(bytes)
  }
</script>

<input type="button" value="Render" onclick="renderSignature();"/>
<input type="button" value="Add to Sheet" onclick="saveImage()"/>
<input type="button" value="Close" onclick="google.script.host.close()" />

服务器端代码:

function showDialog() {
  var html = HtmlService.createHtmlOutputFromFile('Sign')
    .setWidth(400)
    .setHeight(300);
SpreadsheetApp.getUi()
  .showModalDialog(html, 'Your Signature is Required');
}

function saveImage(bytes){
  var bytes = bytes.split(",")
  var blob = Utilities.newBlob(Utilities.base64Decode(bytes[1]), 'image/png');
  blob.setName("Sign Pic")
  DriveApp.getFolderById("Folder ID to save SignPic").createFile(blob)
}

您将必须跟踪图像文件的名称，并相应地将图片插入电子表格中.

You will have to keep track of names of image files and insert the pics into the spreadsheet accordingly.

这篇关于使用Google脚本将图像保存到电子表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！