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.
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.