2017-04-23 3 views
1

Ich habe ein Problem mit dem npm-Modul - signature_pad und es scheint nicht zu funktionieren. Im Moment verwende ich nur HTML, CSS und JS. Im Moment bekomme ich immer wieder eine Fehlermeldung: SignaturePad is not defined. Ich habe versucht, das Modul aus meiner package.JSON-Datei mit import SignaturePad from 'signature_pad' zu importieren, aber ich bekomme einen Fehler zurück sagen unexpected token import.SignaturePad nicht definiert - kann das Modul signature_pad nicht initialisieren

Ich habe meinen HTML- und JS-Code unten angehängt. Irgendwelche Vorschläge?

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); 
} 

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> 

Antwort

1

gelöst. Die Reihenfolge der Skripte zu ändern und das signature_pad.min.js-Skript zuerst zu machen, scheint es zu beheben.

<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> 
Verwandte Themen