在 .php 文件中添加 javascript 签名板

Question

我有一个 .php 文件，一旦交易被批准，我希望它显示签名板，但我如何将它实现到我的 php 代码中。下面的代码是 .php 文件的一部分，我需要 https://github.com/szimek/signature_pad 这个签名板才能显示，但它在 JavaScript 中。

 if($tran->result == "Approved"){

}

d

if($tran->result == "Approved"){
?>



<?
echo '<canvas id="signature-pad" class="signature-pad" width=400 
height=200></canvas>
    <div>
<button id="save">Save</button>

<button id="clear">Clear</button>
</div>'

?>
 <script type="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script> <script> var signaturePad = new 
 SignaturePad(document.getElementById('signature-pad'), {
  backgroundColor: 'rgba(255, 255, 255, 0)',
  penColor: 'rgb(0, 0, 0)'
});
var saveButton = document.getElementById('save');
var cancelButton = document.getElementById('clear');

saveButton.addEventListener('click', function (event) {
  var data = signaturePad.toDataURL('image/png');

// Send data to server instead...
  window.open(data);
});

cancelButton.addEventListener('click', function (event) {
  signaturePad.clear();
});    </script> </script><script src="touchpadjs.js"></script>

Answer 1

您在获得批准后输出 HTML 代码段 echo '<canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>'。您可以已经在您的网页中包含 JS 文件，或者您可以将其包含在上面的代码中，如 <script type="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script> 后跟您自己的 JS 代码 <script src="Path_to_your_own_JS_file"></script>

示例代码已存在于底部的相同 link 中：

https://jsfiddle.net/szimek/d6a78gwq/

Answer 2

发现问题所在，js 文件没有被 html 和 css 代码访问，所以我只是将所有代码添加到 php 函数中，就像 for javascript 和 css 一切都开始工作了。

在 .php 文件中添加 javascript 签名板

adding javascript signature pad in .php file

javascript

php

payment-processing

electronic-signature