Saving image to Spreadsheet with Google Scripts

Question

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

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.

Have you tried [insertImage](https://developers.google.com/apps-script/reference/spreadsheet/sheet) on the sheet page of the documentation? — Cooper, Mar 27 '17 at 20:42
Haven't gotten that far, I can't figure out how to grab the rendered image from the dialog box first. :\ — Lauren, Mar 27 '17 at 21:24
[This](http://stackoverflow.com/questions/10673122/how-to-save-canvas-as-an-image-with-canvas-todataurl) might help. — Cooper, Mar 27 '17 at 21:56
Thanks! I guess first I need to script saving the image and then fetching the URL. — Lauren, Mar 27 '17 at 22:45

Jack Brown · Accepted Answer · 2017-03-28T00:31:34.297

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

Your Html Code:

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

Server side code:

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.

Oh my goodness, it worked! I swear I was using DriveApp earlier and kept getting errors that "DriveApp" was not defined. What is wrong with me! Can I use the same documentation to upload the insert the image into the spreadsheet? — Lauren, Mar 28 '17 at 14:13
Might have been a typo, used Driveapp instead or DriveApp? Either way, glad it worked — Jack Brown, Mar 28 '17 at 16:05

Saving image to Spreadsheet with Google Scripts

1 Answers1

Linked