duanchui1279 2018-05-17 20:33
浏览 93
已采纳

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

I am trying to write a short code to capture the signature via a tablet screen on a webpage. However, I can't get the area up that captures that signature.

The code I am using, which I have borrowed from other places that do work is:

<!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>

I suspect it has something to do with the links to jquery, unless somebody can see something else glaringly obvious. (I am quite new to this)

Is anyone able to put me in the right direction?

Thanks.

  • 写回答

1条回答 默认 最新

  • doubo9799 2018-05-17 21:19
    关注

    Try this ...

    <!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>

    There's a couple of things. I've changed the googleapi call to https instead of http. This helps with browsers that are tetchy with mixed content.

    The code for the signature is now also at the bottom, so this should make sure the #sig div is there before the code that attaches itself to it is. This is also helped by the document ready function.

    Ignore my ../js/ for the signatures. That's just where I put it. See my comment above about viewing page source to see if the file is actually available.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥500 火焰左右视图、视差（基于双目相机）
  • ¥100 set_link_state
  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号
  • ¥15 基于单片机的靶位控制系统
  • ¥15 真我手机蓝牙传输进度消息被关闭了，怎么打开？(关键词-消息通知)
  • ¥15 装 pytorch 的时候出了好多问题，遇到这种情况怎么处理？
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本