Inserer signature manuscrite dans un google doc

Le 07/11/2025 à 12:25

je souhaite par le biais d'un script permettre aux utilisateur d'un ggogle doc de pouvoior signer et inserer rapidement leur signature dans le document.

J'ai établi ce script pour ouvrir une fenetre de signature mais si je clique sur insérer cela ne fonctionne pas je ne vois pas la signature sur mon doc

function onOpen() {
DocumentApp.getUi()
.createMenu('✍️ Signature rapide')
.addItem('Ajouter une signature', 'ouvrirSignature')
.addToUi();
}

function ouvrirSignature() {
const html = HtmlService.createHtmlOutputFromFile('signature')
.setWidth(400)
.setHeight(300);
DocumentApp.getUi().showModalDialog(html, 'Signature rapide');
}

function insererSignature(imageData) {
if (!imageData || !imageData.startsWith('data:image')) {
DocumentApp.getUi().alert("Aucune signature détectée !");
return;
}

const bytes = Utilities.base64Decode(imageData.split(',')[1]);
const blob = Utilities.newBlob(bytes, 'image/png', 'signature.png');

const body = DocumentApp.getActiveDocument().getBody();
body.appendParagraph('\nSignature :');
body.appendImage(blob).setWidth(150);
}

et voici le code html pour ma fenetre d'insertion

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
}
canvas {
border: 1px solid #777;
border-radius: 4px;
margin-top: 10px;
touch-action: none;
}
button {
margin: 8px;
}
</style>
</head>
<body>
<h3>✍️ Signature</h3>
<canvas id="canvas" width="300" height="150"></canvas>
<div>
<button onclick="effacer()">🧹 Effacer</button>
<button onclick="valider()">✅ Insérer</button>
</div>

<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let dessin = false;

function commencer(e) {
dessin = true;
dessiner(e);
}
function arreter() {
dessin = false;
ctx.beginPath();
}
function dessiner(e) {
if (!dessin) return;
e.preventDefault();
const rect = canvas.getBoundingClientRect();
const x = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left;
const y = (e.touches ? e.touches[0].clientY : e.clientY) - rect.top;
ctx.lineWidth = 2;
ctx.lineCap = 'round';
ctx.strokeStyle = '#000';
ctx.lineTo(x, y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x, y);
}

canvas.addEventListener('mousedown', commencer);
canvas.addEventListener('mouseup', arreter);
canvas.addEventListener('mousemove', dessiner);
canvas.addEventListener('touchstart', commencer);
canvas.addEventListener('touchend', arreter);
canvas.addEventListener('touchmove', dessiner);

function effacer() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function valider() {
const dataURL = canvas.toDataURL('image/png');
google.script.run.insererSignature(dataURL);
google.script.host.close();
}
</script>
</body>
</html>

Je n'ai pas d'erreur à l'execution mais ma signature n'apparait pas

Le 07/11/2025 à 14:13

Salut,

Pour avoir déjà pas mal bossé le sujet, il s'avère que le plus fiable est de sortir de docs ou sheets, pour passer sur une webapp concernant les signature (surtout que ça permet d'utiliser des lib dédiées).

Toutefois si tu souhaites maintenir en direct dans docs, voici comment faire pour que ça fonctionne.

Ton code fait très "Vibe Coding" made by ChatGPT, le voici modifié pour qu'il fonctionnel pour un usage à la souris ou au tactile :

SCRIPT GAS :

function onOpen() {
  DocumentApp.getUi()
    .createMenu('✍️ Signature')
    .addItem('Insérer', 'ouvrirSignature')
    .addToUi();
}

function ouvrirSignature() {
  const html = HtmlService.createHtmlOutputFromFile('signature')
    .setWidth(400)
    .setHeight(300);
  DocumentApp.getUi().showModalDialog(html, 'Signature');
}

function insererSignature(imageData) {
  if (!imageData?.startsWith('data:image')) {
    throw new Error('Format invalide');
  }

  const blob = Utilities.newBlob(
    Utilities.base64Decode(imageData.split(',')[1]),
    'image/png'
  );

  const doc = DocumentApp.getActiveDocument();
  const cursor = doc.getCursor();
  const img = cursor ? cursor.insertInlineImage(blob) : doc.getBody().appendImage(blob);
  img.setWidth(150);
}

SCRIPT SIGNATURE.HTML :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {padding: 20px;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;text-align: center;}
  h3 { margin-bottom: 15px; font-weight: 500; }
  canvas {border: 2px solid #ddd;border-radius: 8px; cursor: crosshair; touch-action: none;display: block;margin: 0 auto 15px;}
  button {padding: 8px 20px; margin: 0 5px;border: none;border-radius: 6px;cursor: pointer;font-size: 14px;transition: opacity 0.2s;}
  button:hover { opacity: 0.8; }
  button:first-of-type { background: #f3f4f6; }
  button:last-of-type { background: #10b981; color: white; }
</style>
</head>
<body>
  <h3>✍️ Signature</h3>
  <canvas id="c" width="340" height="160"></canvas>
  <div>
    <button onclick="clear()">Effacer</button>
    <button onclick="save()">Insérer</button>
  </div>
<script>
const c = document.getElementById('c');
const ctx = c.getContext('2d');
let drawing = false;
const draw = (e) => {
  if (!drawing) return;
  e.preventDefault();
  const rect = c.getBoundingClientRect();
  const x = (e.clientX || e.touches[0].clientX) - rect.left;
  const y = (e.clientY || e.touches[0].clientY) - rect.top;
  ctx.lineWidth = 2;
  ctx.lineCap = 'round';
  ctx.lineTo(x, y);
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(x, y);
};
['mousedown', 'touchstart'].forEach(evt => c.addEventListener(evt, (e) => { drawing = true; draw(e); }));
['mouseup', 'touchend', 'mouseout'].forEach(evt => c.addEventListener(evt, () => { drawing = false; ctx.beginPath(); }));
['mousemove', 'touchmove'].forEach(evt => c.addEventListener(evt, draw));

function clear() { ctx.clearRect(0, 0, c.width, c.height); }

function save() {
  google.script.run
    .withSuccessHandler(() => google.script.host.close())
    .withFailureHandler(err => alert(err.message))
    .insererSignature(c.toDataURL());
}
</script>
</body>
</html>
Le 12/11/2025 à 11:14

merci beaucoup ça fonctionne parfaitement.

Rechercher des sujets similaires à "inserer signature manuscrite google doc"