HTML使用JSignature签字并上传图片

1.jsignature签字插件下载
jsignature签字插件下载
2.引入JS

<script src="https://s1.pstatp.com/cdn/expire-1-M/jquery/1.10.2/jquery.min.js"></script>
<script src="libs/jSignature.min.js"></script>

3.添加一个div，放在你需要的地方即可，加个高度，字体颜色黑色

<div id="signature" style="height:300px;color:black"></div>

4.添加一个style，让签字板背景变为白色

#signature {
            border: 2px dotted black;//添加边框
            background-color: '#000';//设置背景白色
        }

5.初始化签名板

$("#signature").jSignature({ 'UndoButton': true });//初始化签名板并且可以支持撤销

6.获取签名信息，并转换为png格式

function saveImage() {
            var datapair = $("#signature").jSignature("getData", "image");  //将canvas里面的数据转换成base64数组
            //判断用户是否进行了签字，initSignature在初始化完成的时候取一次，附上值即可
            if (datapair[1] == initSignature) {
                Toast("warning", "请先签字！");//换为自己的弹框即可
                return;
            }
            var imgBase64 = 'data:' + datapair[0] + "," + datapair[1];  //封装成正确的base64
            var file = base64toFile(imgBase64, 'file');     //base64转换成流文件，然后就可以上传了
            let formData = new FormData()            //封装成formData格式
            formData.append('type', 3);//此参数根据具体业务处理
            formData.append("images", file);//上传的文件，images为后台接收的参数名称
            $("#loadding").show();
            $.ajax({
                type: "post",
                data: formData,
                processData: false,
                contentType: false,
                url: 'xxx',//注意替换成自己的url
                success: function (result) {
                   //上传完之后的结果
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    Toast("error", "后台错误", "status:" + XMLHttpRequest.status + ' readyState:' + XMLHttpRequest.readyState + ' textStatus:' + textStatus);
                    $("#loadding").hide();
                }
            });
        }
        //将文件转换为文件流
        function base64toFile(dataurl, filename) {
            var arr = dataurl.split(',')
            var mime = arr[0].match(/:(.*?);/)[1]
            var suffix = mime.split('/')[1]
            var bstr = atob(arr[1])
            var n = bstr.length
            var u8arr = new Uint8Array(n)
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n)
            }
            return new File([u8arr], filename + '.' + suffix, {
                type: mime
            })
        }