Laravel8签名板在Hostinger不显示求助及工具推荐

一、部署到Hostinger后签名板不显示的解决方案 #

1. 修复混合内容拦截问题 #

你的代码中外部资源使用了http协议，而Hostinger默认启用HTTPS，浏览器会拦截HTTPS页面加载HTTP资源，导致签名板依赖的JS/CSS无法加载。将所有外部资源的协议改为https：

修改后的头部资源引入代码：

<head>
    <title>Laravel Signature Pad Tutorial Example - ItSolutionStuff.com </title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
  
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <link type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.css" rel="stylesheet"> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://keith-wood.name/js/jquery.signature.js"></script>
  
    <link rel="stylesheet" type="text/css" href="https://keith-wood.name/css/jquery.signature.css">
  
    <style>
        .kbw-signature { width: 100%; height: 200px;}
        #sig canvas{
            width: 100% !important;
            height: auto;
        }
    </style>
  
</head>

2. 本地化资源（可选，提升稳定性） #

第三方CDN资源可能存在访问不稳定的情况，建议将jquery.signature.js和jquery.signature.css下载到项目的public/js和public/css目录，然后用Laravel的asset()函数引入：

<script type="text/javascript" src="{{ asset('js/jquery.signature.js') }}"></script>
<link rel="stylesheet" type="text/css" href="{{ asset('css/jquery.signature.css') }}">

3. 排查资源加载错误 #

打开浏览器开发者工具（F12），查看Console和Network标签：

• 如果有404错误，检查资源路径是否正确
• 如果有CORS错误，确认Hostinger服务器允许加载外部资源

4. 验证路由与CSRF #

确保route('signaturepad.upload')在服务器上正确解析，表单中的@csrf令牌正常生成（查看页面源码确认<input type="hidden" name="_token" value="...">存在）。

二、Laravel 8可用的签名板工具（支持转图片格式） #

• jQuery Signature Pad
  你当前使用的工具，基于jQuery和jQuery UI，支持将签名同步为Base64格式的PNG图片，适合已有jQuery项目。

• Signature Pad（原生JS）
  无依赖的轻量级签名库，支持导出PNG/JPG/SVG格式的图片，示例代码：

  <div id="signature-pad" class="signature-pad">
    <canvas></canvas>
  </div>
  <script src="{{ asset('js/signature_pad.min.js') }}"></script>
  <script>
    const canvas = document.querySelector("canvas");
    const signaturePad = new SignaturePad(canvas);
    
    // 提交时获取Base64图片
    document.querySelector('form').addEventListener('submit', function(e) {
      const signatureData = signaturePad.toDataURL('image/png');
      document.querySelector('input[name="signed"]').value = signatureData;
    });
  </script>
  

• Laravel Signature Pad 封装包
  部分第三方Laravel包已封装好签名板功能，直接通过Composer安装即可使用，无需手动引入前端资源，支持将签名保存为图片文件到服务器。

• PadDraw
  轻量的手绘签名库，支持导出图片，API简单，适合对体积要求高的项目。

内容的提问来源于stack exchange，提问作者Angel