jSignature 简介

Signature 是一个 jQuery 插件，它简化了浏览器窗口中签名捕获字段的创建，允许用户使用鼠标，笔或手指绘制签名。

jSignature 签名将签名作为笔画的向量轮廓捕获。 虽然 jSignature 也可以导出伟大的位图（PNG），提取签名的高度可扩展的行程移动坐标（也称为矢量图像）允许更大的灵活性。

进行额外的努力（通过平滑和压力模拟），使得笔画在屏幕上看起来很漂亮，而这些画面由阁下绘制。

所有主要的桌面，平板电脑和手机浏览器的支持。默认情况下使用 HTML5 画布元素。我们依靠基于canvas 元素模拟器 Flash（flashcanvas）当实际帆布不支持的浏览器（Internet Explorer 8 以下）。

实时 jsignature 呈现只有装置适当的“漂亮的”逼近我们捕获。捕获的数据总是相同的-我们尽可能捕捉尽可能多的运动坐标。笔触的绘制不同于浏览器的功能，设备的效率，屏幕大小。

捕获的签名的屏幕表示的这种降级和增强是为了确保渲染不会影响捕获的响应性而进行的。 例如，在缓慢渲染设备（Android 浏览器，基于 FlashCanvas 的 Canvas 仿真）上，平滑被踢出了一个缺口，以补偿捕获的笔画坐标中的巨大差距 - 捕获设备效率低下的结果。 在所有情况下，客户都会对图纸的反应和美观感到高兴。

jSignature 可以轻松地将其自己调入现有样式的网站。 jSignature 自动检测包装元素上使用的颜色（文字颜色=笔颜色，背景=背景），并自动选择“装饰”（签名行）的令人愉快的中间色调。 jSignature 适用于固定和可变宽度的网页设计，以及各种大小的屏幕（手机，平板电脑，电脑屏幕），并且当父元素更改大小时自动重新绘制绘图区域和签名。

使用该插件需要引入 jQuery 和 jSignature.js

<script src="https://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jSignature/2.1.3/jSignature.min.js"></script>
<script src="./js/layer/layer.js"></script>

HTML 代码段：

<div id="signature"></div>
<p style="text-align: center;margin-top:32px;">
    <b style="color: red">请按着鼠标写字签名。</b>
</p>
<div style="text-align: center;margin-top:52px;">
    <input type="button" value=" 确 实 " id="yes"/>
    <input type="button" value=" 重 写 " id="reset"/>
</div>
<div id="someelement" style="margin-left:450px;">
    <img src="" id="images">
</div>

<script>
    $(function() {
        var $sigdiv = $("#signature");
        $sigdiv.jSignature({
            'color':'#000', // 定义画布上笔画的颜色。
            'background-color':'#eee', //定义了画布的背景颜色。
            'height': 400,  // 定义画布的高度，数值没有%或px。
            'width': 950, //定义画布的宽度，数值没有%或px。
            });
        $("#yes").click(function(){
            //将画布内容转换为图片
            var datapair = $sigdiv.jSignature("getData", "image");
            $("#images").attr('src','data:' + datapair[0] + "," + datapair[1]);
            //询问框
            layer.confirm("请您确认是否无误！", {
                btn: ['确认', '取消'] //按钮
            }, function () {
                $.ajax({
                    type:'post',
                    url: "{{ url('signa') }}",
                    data:{data:datapair[1],_token:"{{csrf_token()}}"},
                    async:false,
                    success:function(data){
                        // console.log(data);
                        if(data.status){
                            layer.msg(data.msg,{icon: 6});
                        }else{
			    layer.msg(data.msg,{icon: 5});
                        }
                    }
                });
            }, function () {
                layer.msg('取消成功');
            });
        });
        $("#reset").click(function(){
            $("#signature").jSignature("reset"); //重置画布，可以进行重新作画
            $("#images").attr('src','');
        });
    });
</script>

Laravel 后端处理代码

public function test(Request $request)
    {
        if (!$data = $request->all()) {
            return view('Home.signa');
        }
        $base64_content = $request->data;
        // 构建存储的文件夹规则，值如：/img/uploads/20181101/
        $folder_name = "img/uploads/".date('Ymd',time());
        if (!file_exists($folder_name)) {
            //检查是否有该文件夹，如果没有就创建，并给予相应权限
            mkdir($folder_name, 0700);
        }
        // 文件具体存储的物理路径，`public_path()` 获取的是 `public` 文件夹的物理路径。
        $upload_path = public_path().'/'.$folder_name;

        // 值如：1_1493521050_X7mXJ2n3p2.png
        $file_name = date('YmdH',time()).'_'.str_random(10).'.'.'png';

       // dd($upload_path.'/'.$file_name);
        //转换为图片文件
        if(file_put_contents($upload_path.'/'.$file_name, base64_decode($base64_content))) {
            return ['status'=>1,'msg'=>'签名成功！'];
        }else{
            return ['status'=>0,'msg'=>'签名失败！'];
        }
    }