签名板未将签名发送到谷歌驱动器文件夹

问题描述 投票：0回答：1

我使用 Google App Scripts 制作了一个 HTML、CSS 和 JS (GS) 程序。 Web 应用程序启动并且应用程序工作正常，只是发送按钮不会将画布上绘制的签名图片发送到 Google 云端硬盘文件夹。发送按钮应该将绘制的签名转换为 PNG 并将其发送到链接的 Google Drive 文件夹。

HTML：


<!doctype html>
<html lang="en">
  <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>Signature Pad</title>
    <link rel= "stylesheet" href="style.css">
  </head>
 
 
  <body>
    <div id = "app" class = "container">
        <div class = "margin text-center">
        <div class = "canvas mx-auto"> 
          <h1> Important Contract </h1>
          <p> Description </p>
        <canvas id = "sig" width = "500px" height = "500px" class = "border"> </canvas>
        <div> 
            <button type="button" class="btn btn-dark" id = "clearSig">Clear</button>
            <button type="button" class="btn btn-dark" id ="send">Send</button>
        </div>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.umd.min.js"></script>
    <script>

        var signaturePad;
          function setupSignatureBox(){
            var canvas = document.getElementById("sig");
            signaturePad = new SignaturePad(canvas);
          }

          function clearSignature(){
            signaturePad.clear();
          }

          function sendToDrive(){
            signaturePad.toDataURL();
            google.script.run.recieveSignature(imageData);
          }

          document.getElementById("clearSig").addEventListener("click",clearSignature);
          document.getElementById("send").addEventListener("click",sendToDrive);
          document.addEventListener("DOMContentLoaded",setupSignatureBox);
    </script>
  </body>
</html>

JS（GS）：

function doGet() {
  return HtmlService.createTemplateFromFile("index").evaluate();
}

function recieveSignature(encodedImage){
 
  const data = encodedImage.split(",")[1];
  const dataDecoded = Utilities.base64Decode(data);
  const signatureAsPictureBlob = Utilities.newBlob(dataDecoded).setName("somefile.png");
  DriveApp.getFolderById("1DlVK84J9gVjfk5Gepw9L2pOhfMCFk74Q").createFile(signatureAsPicture);

}
javascript html google-apps-script google-drive-api
1个回答
0
投票

我让它工作了：

function recieveSignature(encodedImage){
  console.log('received Signature')
  Logger.log(JSON.stringify(encodedImage))
  const data = encodedImage.split(",")[1];
  const dataDecoded = Utilities.base64Decode(data);
  const signatureAsPictureBlob = Utilities.newBlob(dataDecoded).setName("somefile.png");
  DriveApp.getFolderById(gobj.globals.folder1id).createFile(signatureAsPictureBlob);

}

function launchSignatureDialog() {
  SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutputFromFile('ah2').setHeight(400).setWidth(800),"Signature Dialog");
}

html:

<!doctype html>
<html lang="en">
  <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>Signature Pad</title>
    <link rel= "stylesheet" href="style.css">
  </head>
 
 
  <body>
    <div id = "app" class = "container">
        <div class = "margin text-center">
        <div class = "canvas mx-auto"> 
          <h1> Important Contract </h1>
          <p> Description </p>
        <canvas id = "sig" width = "500px" height = "500px" class = "border"> </canvas>
        <div> 
            <button type="button" class="btn btn-dark" id = "clearSig">Clear</button>
            <button type="button" class="btn btn-dark" id ="send">Send</button>
        </div>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.umd.min.js"></script>
    <script>
     var signaturePad;
     window.onload = function() {
      document.getElementById("clearSig").addEventListener("click",clearSignature);
      document.getElementById("send").addEventListener("click",sendToDrive);
      
     }
        
          function setupSignatureBox(){
            console.log("setupSignatureBox")
            var canvas = document.getElementById("sig");
            signaturePad = new SignaturePad(canvas);
          }

          function clearSignature(){
            signaturePad.clear();
          }

          function sendToDrive(){
            console.log('sendToDrive')
            console.log('signaturePad: %s',JSON.stringify(signaturePad))
            let imageData = signaturePad.toDataURL();
            console.log('just before google.script.run');
            google.script.run.recieveSignature(imageData);
          }
          document.addEventListener("DOMContentLoaded",setupSignatureBox);
          
      console.log("End of Script");
    </script>
  </body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.