SignaturePad 未定义 - 无法将 signature_pad 模块初始化为脚本

Question

SignaturePad 未定义 - 无法将 signature_pad 模块初始化为脚本

Tod*_*ter 4 javascript node.js signaturepad

我在使用 npm 模块 - signature_pad 时遇到问题，似乎无法设置它。目前我使用的只是普通的 HTML、CSS 和 JS。目前，我不断收到错误消息：SignaturePad is not defined. 我尝试从我的 package.JSON 文件中导入模块，import SignaturePad from 'signature_pad'但我收到一条错误消息，说unexpected token import.

我在下面附上了我的 HTML 和 JS 代码。有什么建议？

JavaScript

var wrapper1 = document.getElementById("signature-pad-1"),
    canvas1 = wrapper1.querySelector("canvas"),
    signaturePad1;

resizeCanvas(canvas1);
signaturePad1 = new SignaturePad(canvas1);

function resizeCanvas(canvas) {
   var ratio =  window.devicePixelRatio || 1;
   canvas.width = canvas.offsetWidth * ratio;
   canvas.height = canvas.offsetHeight * ratio;
   canvas.getContext("2d").scale(ratio, ratio);
}

Run Code Online (Sandbox Code Playgroud)

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sign Here</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <div class="contract">
      <h1>Signature Below</h1>
      <p>ABC</p>
      <div id="signature-pad-1" class="m-signature-pad">
        <div class="m-signature-pad--body">
          <canvas></canvas>
        </div>
      </div>
      <script type="text/javascript" src="./js/sig_pad.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Tod*_*ter 5

解决了。交换脚本的顺序并首先创建 signature_pad.min.js 脚本似乎已经修复了它。

    <script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script>
    <script type="text/javascript" src="./js/sig_pad.js"></script>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，6 月前
查看次数：	6309 次
最近记录：	6 年，11 月前