您现在的位置是：首页 > 前端 > 后端 > WEB基础 WEB基础

jSignatur手写签名js使用文档

2021-04-05【WEB基础】1009人已围观

简介jSignatur手写签名js使用文档

### jSignatur手写签名js使用文档

![jSignatur](http://image.apidata.vip/blog/article/2021-04-05/161759638804548028.jpg)

[下载地址](https://github.com/brinley/jSignature "下载地址")

> html

```html
<div class="inroom_box">
    <div class="form-group">
        <label for="c-title-{$v.id}" class="control-label col-xs-12 col-sm-2" style="color: #F60;">客户签字:</label>
        <div class="col-xs-12 col-sm-8">
            <button type="button" class="btn btn-warning" id="qm_save">保存签名</button>
            <button type="button" class="btn btn-default" id="qm_clear">重写签名</button>
            <span style="color: #F60;">&nbsp;注：写完后，需要保存签名</span>
        </div>
    </div>
    <div class="form-group">
        <div id="signature" > </div>
        {if condition="isset($member_info['image']) && !empty($member_info['image'])"}
        <div id="signature2">
            {if condition="isset($member_info['image']) && !empty($member_info['image'])"}
            <img src="{$member_info.image}" alt="" >
            {/if}
        </div>
        {/if}
    </div>
</div>
```

> javascript

```javascript
var arguments = {
    width: '100%',
    height: '150px',
    cssclass: 'zx11',
    // signatureLine: false,//去除默认画布上那条横线
    lineWidth: '5'
};
$("#signature").jSignature(arguments);
$('#qm_clear').click(function () {
    $("#signature1").css("display","block");
    $("#signature2").css("display","none");
    $("#signature").jSignature("reset");
});
$('#qm_save').click(function () {
    //标准格式但是base64会被tp框架过滤，所不校验，但是jSignature默认是使用png
    var datapair = $("#signature").jSignature("getData", "image");
    var i = new Image();
    i.src = "data:" + datapair[0] + "," + datapair[1];
    i.image = datapair[1];
    // console.log(i.image);
    console.log(i.src);

layer.confirm("如果确认无误，请确认<br><img src=" + i.src + " height='auto' width='200px' />", {
        btn: ['确认', '取消'] //按钮
    }, function () {
        var member_info_id = $("#member_info_id").html();
        $.ajax({
            url: "/index/member/signature",
            //dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: "{\"member_info_id\":\"" + member_info_id + "\",\"image_data\":\"" + i.image + "\"}",//避免base64长度过大，json传输
            type: "post",
            cache: false,
            success: function (re) {
                if (re.code === 1) {
                    layer.msg(re.msg);
                } else {
                    layer.msg(re.msg);
                }
            }
        });
    }, function () {
        layer.msg('取消成功');
    });
});
```

> php

```php
<?php
	/**
     * 上传签名
     */
    public function signature()
    {
        $id = input('member_info_id');
        $image_data = input("image_data");
        $base_img = str_replace('data:image/jpg;base64,', '', $image_data);
        $dir = '/assets/signature/member_'. mt_rand(100,999) .'_'.(string)date("YmdHis",time()).'.png';
        $file_name = APP_PATH .'/../public'.$dir; //必须png
        file_put_contents($file_name, base64_decode($base_img));
        $re = Db::name("member")->where("id",$id)->update(["image"=>$dir]);
        if($re !== false){
            $this->success("签名上传成功");
        }
        $this->error("签名上传失败");
    }
```

[记录地址 https://www.bbsmax.com/A/ZOJPm1P25v/](https://www.bbsmax.com/A/ZOJPm1P25v/ "记录地址")

关注博客，更多精彩分享，敬请期待！

Tags：

很赞哦！ (0)

上一篇：详解PhpSpreadsheet设置单元格