在网页上捕获签名（通过平板电脑屏幕）答案

【问题标题】：Capturing signature on a webpage (via tablet screen)在网页上捕获签名（通过平板电脑屏幕）
【发布时间】：2021-03-05 14:40:58
【问题描述】：

我正在尝试编写一个短代码来通过网页上的平板电脑屏幕捕获签名。但是，我无法找到捕获该签名的区域。

我正在使用的代码是从其他工作的地方借来的：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Simon's Timesheet Signature Capture Test Page</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.css" rel="stylesheet">
<link href="/usr/share/javascript/jquery/jquery.signature.css" rel="stylesheet">
<style>
body > iframe { display: none; }
.kbw-signature { width: 400px; height: 200px; }
</style>
<!--[if IE]>
<script src="js/excanvas.js"></script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="/usr/share/javascript/jquery/jquery.signature.js"></script>
<script>
$(function() {
    $('#sig').signature();
    $('#clear').click(function() {
        $('#sig').signature('clear');
    });
    $('#json').click(function() {
        alert($('#sig').signature('toJSON'));
    });
    $('#svg').click(function() {
        alert($('#sig').signature('toSVG'));
    });
});
</script>
</head>
<body>
<h1>jQuery UI Signature Basics v18.5.2018</h1>
<p>This page demonstrates the very basics of the
    <a href="http://keith-wood.name/signature.html">jQuery UI Signature plugin</a>.
    It contains the minimum requirements for using the plugin and
    can be used as the basis for your own experimentation.</p>
<p>For more detail see the <a href="http://keith-wood.name/signatureRef.html">documentation reference</a> page.</p>
<p>Default signature:</p>
<div id="sig"></div>
<p style="clear: both;"><button id="clear">Clear</button> 
    <button id="json">To JSON</button> <button id="svg">To SVG</button></p>
</body>
</html>

我怀疑它与 jquery 的链接有关，除非有人可以看到其他明显的东西。（我对此很陌生）

有没有人能把我引向正确的方向？

谢谢。

【问题讨论】：

右键查看页面源码。单击 jquery.signature.js 和 jquery.signature.css 链接，看看是否看到任何 CSS 或 JS 弹出。如果不这样做，则文件的路径在某处是错误的。
斯蒂芬 - 感谢您的提示。路径有错误（因此试图找出原因。显然这是权限问题。）
你不需要把它弄得像 /usr/share/etc 等那么复杂。只需在你的 web 目录中创建一个名为“js”的文件夹，然后将 javascript 引用为 ... （例如）

标签： javascript php html json

【解决方案1】：

试试这个...

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Simon's Timesheet Signature Capture Test Page</title>
    <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.css"
      rel="stylesheet">
<link href="../js/jquery.signature.css" rel="stylesheet">
<style>
    body > iframe {
        display: none;
    }

    .kbw-signature {
        width: 400px;
        height: 200px;
    }
</style>
<!--[if IE]>
<script src="../js/excanvas.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="../js/jquery.signature.js"></script>
<script src="../js/jquery.ui.touch-punch.min.js"></script>
</head>
<body>
<h1>jQuery UI Signature Basics v18.5.2018</h1>
<p>This page demonstrates the very basics of the
    <a href="http://keith-wood.name/signature.html">jQuery UI Signature plugin</a>.
It contains the minimum requirements for using the plugin and
can be used as the basis for your own experimentation.</p>
<p>For more detail see the <a href="http://keith-wood.name/signatureRef.html">documentation reference</a> page.</p>
<p>Default signature:</p>
<div id="sig"></div>
<p style="clear: both;">
    <button id="clear">Clear</button>
    <button id="json">To JSON</button>
    <button id="svg">To SVG</button>
</p>
<script>
    $(document).ready(function () {
        $('#sig').signature();
    $('#clear').click(function () {
        $('#sig').signature('clear');
    });
    $('#json').click(function () {
        alert($('#sig').signature('toJSON'));
    });
    $('#svg').click(function () {
        alert($('#sig').signature('toSVG'));
    });
});
</script>
</body>
</html>

有几件事。我已将 googleapi 调用更改为 https 而不是 http。这有助于浏览器对混合内容的挑剔。

签名的代码现在也在底部，所以这应该确保#sig div 在附加到它的代码之前就在那里。这也得益于文档就绪功能。

忽略我的 ../js/ 签名。这就是我放的地方。请参阅我上面关于查看页面源的评论以查看该文件是否实际可用。

【讨论】：

这适用于我的 PC，但是当我在手机或平板电脑上使用它时，整个页面都会移动，而不是捕获我签名的框。你能引导我解决这个问题吗？关键词就好了。我想这就像在签名框中关闭滚动一样。
我已经编辑了代码以包含相当方便的 touch-punch 库。这有助于 jQuery-ui 更好地处理触摸屏上的操作。 touchpunch.furf.com