google-apps-script - 你可以在谷歌表单中创建一个字段,你可以在其中插入鼠标轨迹以将签名转换为 png 格式吗?
问题描述
我有一个问题,我希望客户用平板笔签署他们的签名并将其发送到我们的工作表,但从未得到脚本。我希望获得一些帮助以获取脚本,您可以在谷歌表单中签署一个显示为 png 的字段,或者在那里制作一个网络应用程序,您可以制作一个我连接到标志的标志,该标志将发送 e 标志到片材汽车。
解决方案
你可以做两件事
- 简单:让用户事先准备一个保存为 png 的签名,并在您的 Google 表单中包含一个“文件上传”项目
- 优雅:使用Google Web App创建自定义 HTML 表单并使用jSignature
示例网络应用程序
.gs 文件
function doGet() {
return HtmlService
.createTemplateFromFile('index')
.evaluate();
}
function saveToDrive(signature){
...
var signature = signature.split(",")
var blob = Utilities.newBlob(Utilities.base64Decode(signature[1]), 'image/png');
var sheet=SpreadsheetApp.getActive().getActiveSheet();
sheet.insertImage(blob, 1, 1);
...
}
index.html 文件
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/></head>
<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>
<body>
<form>
...
Signature:
<div id="signature"></div><br>
<img id="rendered" src="" style="display:none">
<input type="Submit" value="Save" onclick="getSignature();"/>
...
</form>
</body>
<script>
document.getElementById("signature").style.border = "1px solid black";
$("#signature").jSignature({
'background-color': 'transparent',
'decor-color': 'transparent'
});
function getSignature(){
$("img#rendered").attr("src",$('#signature').jSignature('getData','default'));
var signature = document.getElementById('rendered').src;
google.script.run.saveToDrive(signature);
}
</script>
</html>