使用 Google Scripts 將圖像保存到電子表格

Question

我正在嘗試使用 jSignature 將簽名板添加到 Google Sheet。 我添加了一個記錄簽名的對話框，如下所示：

//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 的新手。

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

您必須跟蹤圖像文件的名稱並將圖片相應地插入到電子表格中。