HTML使用JSignature签字并上传图片

以你之姓@ 2022-10-07 10:57 300阅读 0赞

1.jsignature签字插件下载  
[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
                })
            }

[jsignature]: https://www.jq22.com/jquery-info13488

发表评论取消回复

表情：

评论列表（有 0 条评论，300人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML 各平台上传图片

[https://github.com/tx1721110240/UploadImg][https_github.com_tx1721110240_UploadImg] 苹果

柔光的暖阳◎/ 2022年12月23日 01:00/ 0 赞/ 194 阅读

相关 HTML使用JSignature签字并上传图片

1.jsignature签字插件下载 [jsignature签字插件下载][jsignature] 2.引入JS <script src="https://s

以你之姓@/ 2022年10月07日 10:57/ 0 赞/ 301 阅读

相关 jsp页面签字板及保存-jSignature

jSignature是jQuery的插件，简化了字段的创建，允许用户通过鼠标，手指在启用触摸的设备（例如iPhone，iPad或Android设备）或笔输入设备上输入签名。

谁践踏了优雅/ 2022年09月30日 10:55/ 0 赞/ 202 阅读

相关 springmvc上传图片并显示--支持多图片上传

实现上传图片功能在Springmvc中很好实现。现在我将会展现完整例子。开始需要在pom.xml加入几个jar,分别是： <dependency>

电玩女神/ 2022年08月20日 04:13/ 0 赞/ 324 阅读

相关 HTML5 本地裁剪图片并上传至服务器

很多情况下用户上传的图片都需要经过裁剪，比如头像啊什么的。但以前实现这类需求都很复杂，往往需要先把图片上传到服务器，然后返回给用户，让用户确定裁剪坐标，发送给服务器，服务器裁剪

落日映苍穹つ/ 2022年08月18日 11:45/ 0 赞/ 210 阅读

相关 html5压缩图片并上传

手机端图片有很大的，上传的时候很慢，这时候就要压缩一下了，有一个开源的js可以压缩图片的大小，开源地址如下：[https://github.com/think2011/loca

阳光穿透心脏的1/2处/ 2022年08月04日 12:59/ 0 赞/ 251 阅读

相关图片上传并显示

问题描述： ![这里写图片描述][SouthEast] 选择了文件过后是这样的： ![这里写图片描述][SouthEast 1] 很显然，这样的按钮并不好看。

比眉伴天荒/ 2022年07月03日 12:30/ 0 赞/ 349 阅读

相关 html上传图片后，在页面显示上传的图片

html上传图片后，在页面显示上传的图片 1、html <form class="container" enctype="multipart/form-data"

爱被打了一巴掌/ 2022年06月04日 02:42/ 0 赞/ 308 阅读

相关关于HTML中上传图片

[关于HTML中上传图片][HTML] 值得注意的是：当一个表单里面包含这个上传元素的时候，表单的enctype必须指定为multipart/form-data,meth

女爷i/ 2022年05月06日 13:46/ 0 赞/ 244 阅读

相关 HTML实现自定义上传图片按钮并显示图片

在web开发中，上传文件功能通过type为file的input标签即可实现。但input的显示效果仅为一个按钮，且不能修改UI。如果要实现自定义上传按钮，一般需要设置input

水深无声/ 2021年12月01日 11:46/ 1 赞/ 1583 阅读