Creating a Draw Signature function for Google form using Google site
271 views
Skip to first unread message
Guillaume Chambellan
Feb 5, 2024, 4:02:46 AM2/5/24
to Google Apps Script Community
Hi Everyone,
I have created a little signature canvas on a google site which i want to use as part of my attendance system.
I am trying to create a google form that allow my client to import a signature.
My idea is to:
- create a google site and add the function drawing signature.
I have created a little signature canvas on a google site which i want to use as part of my attendance system.
I am trying to create a google form that allow my client to import a signature.
My idea is to:
- create a google site and add the function drawing signature.
- when a save button is clicked, it automatically save the signature into my drive folder
-client then just have to paste the link generated by the signature and paste into the google form.
- once the form is submitted, the link will be added to the excel and the excel, via the link, will automatically translate the link into a image with the function =image()
I have created the signature canva, added it to my google site but i am stock with the saving part.
I don't seem to be able to save the signature onto a drive. Here is my signature HTML code and the script that i have added into my google drive to automatically retrieve the link from my signature.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Signature Box</title>
<style>
body {
font-family: 'Soleil Bold', sans-serif;
font-size: 12px;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h2 {
font-size: 24px;
margin-top: 20px;
}
#signatureCanvas {
border: 1px solid #000;
width: 100%; /* Set width to 100% */
max-width: 400px; /* Set maximum width */
height: auto; /* Automatically adjust height */
}
@media (max-width: 768px) {
/* Adjust signature box size for smaller screens */
#signatureCanvas {
max-width: 300px;
}
}
</style>
<script>
let canvas, ctx, isDrawing, lineThickness, lastX, lastY;
function init() {
canvas = document.getElementById('signatureCanvas');
ctx = canvas.getContext('2d');
isDrawing = false;
lineThickness = 5;
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('touchstart', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('touchmove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('touchend', stopDrawing);
}
function startDrawing(e) {
e.preventDefault();
isDrawing = true;
const rect = canvas.getBoundingClientRect();
[lastX, lastY] = [e.clientX - rect.left, e.clientY - rect.top];
}
function draw(e) {
e.preventDefault();
if (!isDrawing) return;
const rect = canvas.getBoundingClientRect();
const currentX = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left;
const currentY = (e.touches ? e.touches[0].clientY : e.clientY) - rect.top;
ctx.lineWidth = lineThickness;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(currentX, currentY);
ctx.stroke();
[lastX, lastY] = [currentX, currentY];
}
function stopDrawing() {
isDrawing = false;
}
function clearSignature() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function saveSignature() {
var canvas = document.getElementById('signatureCanvas');
var dataURL = canvas.toDataURL(); // Get signature as data URL
google.script.run.saveSignatureToDrive(dataURL); // Pass signature to Google Apps Script
}
// Adjust line thickness for mobile devices
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
lineThickness = 2; // Adjust line thickness for better control on mobile devices
}
window.onload = init;
</script>
</head>
<body>
<div class="container">
<h2>Signature</h2>
<canvas id="signatureCanvas" width="400" height="200"></canvas>
<br>
<button onclick="clearSignature()">Clear/Borrar</button>
<button onclick="saveSignature()">Copiar/Copy</button>
<br>
<textarea id="signatureDataURL" rows="4" cols="50" readonly></textarea>
</div>
</body>
</html>
I have created the signature canva, added it to my google site but i am stock with the saving part.
I don't seem to be able to save the signature onto a drive. Here is my signature HTML code and the script that i have added into my google drive to automatically retrieve the link from my signature.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Signature Box</title>
<style>
body {
font-family: 'Soleil Bold', sans-serif;
font-size: 12px;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h2 {
font-size: 24px;
margin-top: 20px;
}
#signatureCanvas {
border: 1px solid #000;
width: 100%; /* Set width to 100% */
max-width: 400px; /* Set maximum width */
height: auto; /* Automatically adjust height */
}
@media (max-width: 768px) {
/* Adjust signature box size for smaller screens */
#signatureCanvas {
max-width: 300px;
}
}
</style>
<script>
let canvas, ctx, isDrawing, lineThickness, lastX, lastY;
function init() {
canvas = document.getElementById('signatureCanvas');
ctx = canvas.getContext('2d');
isDrawing = false;
lineThickness = 5;
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('touchstart', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('touchmove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('touchend', stopDrawing);
}
function startDrawing(e) {
e.preventDefault();
isDrawing = true;
const rect = canvas.getBoundingClientRect();
[lastX, lastY] = [e.clientX - rect.left, e.clientY - rect.top];
}
function draw(e) {
e.preventDefault();
if (!isDrawing) return;
const rect = canvas.getBoundingClientRect();
const currentX = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left;
const currentY = (e.touches ? e.touches[0].clientY : e.clientY) - rect.top;
ctx.lineWidth = lineThickness;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(currentX, currentY);
ctx.stroke();
[lastX, lastY] = [currentX, currentY];
}
function stopDrawing() {
isDrawing = false;
}
function clearSignature() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function saveSignature() {
var canvas = document.getElementById('signatureCanvas');
var dataURL = canvas.toDataURL(); // Get signature as data URL
google.script.run.saveSignatureToDrive(dataURL); // Pass signature to Google Apps Script
}
// Adjust line thickness for mobile devices
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
lineThickness = 2; // Adjust line thickness for better control on mobile devices
}
window.onload = init;
</script>
</head>
<body>
<div class="container">
<h2>Signature</h2>
<canvas id="signatureCanvas" width="400" height="200"></canvas>
<br>
<button onclick="clearSignature()">Clear/Borrar</button>
<button onclick="saveSignature()">Copiar/Copy</button>
<br>
<textarea id="signatureDataURL" rows="4" cols="50" readonly></textarea>
</div>
</body>
</html>
Google Apps Script:
function saveSignatureToDrive(imageData) {
try {
var folder = DriveApp.getFoldersByName("signature").next();
var blob = Utilities.newBlob(Utilities.base64Decode(imageData), "image/jpeg", "signature.jpg");
folder.createFile(blob);
return "Signature saved successfully.";
} catch (error) {
console.error("Error saving signature:", error);
return "Error saving signature to Google Drive: " + error.toString();
}
}
function saveSignatureToDrive(imageData) {
try {
var folder = DriveApp.getFoldersByName("signature").next();
var blob = Utilities.newBlob(Utilities.base64Decode(imageData), "image/jpeg", "signature.jpg");
folder.createFile(blob);
return "Signature saved successfully.";
} catch (error) {
console.error("Error saving signature:", error);
return "Error saving signature to Google Drive: " + error.toString();
}
}
Reply all
Reply to author
Forward
0 new messages