使用Google脚本将图像保存到电子表格

时间:2017-03-27 19:24:25

标签: jquery google-apps-script google-sheets jsignature

我正在尝试使用jSignature向Google表格添加签名板。我添加了一个对话框来记录这样的签名:

//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()" />

唯一的问题是我无法弄清楚如何将图像放入单元格中。复制/粘贴不起作用,就我所知,它需要插入。我想也许我写了一个函数将它保存到谷歌驱动器,然后使用URL插入它,但我仍然无法弄清楚如何抓取实际图像,以便用它做任何事情。任何见解,我是GS的新手。

1 个答案:

答案 0 :(得分:1)

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

您的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)
}

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